show on error notificiation

while downloading some csv file

11 Replies

kapa.ai•10mo ago

Hi @parothia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To download a CSV file in a Refine application, you can use the useExport hook provided by Refine. This hook allows you to export data as a CSV file. It calls the getList method of your data provider and downloads the data as a CSV file. Here is a basic usage example of the useExport hook:

import { useExport } from "@refinedev/core";  
  
interface IPost {  
 id: number;  
 slug: string;  
 title: string;  
 content: string;  
}  
  
export const PostList: React.FC = () => {  
 const { triggerExport } = useExport<IPost>();  
  
 return <button onClick={triggerExport}>Export Button</button>;  
};

import { useExport } from "@refinedev/core";  
  
interface IPost {  
 id: number;  
 slug: string;  
 title: string;  
 content: string;  
}  
  
export const PostList: React.FC = () => {  
 const { triggerExport } = useExport<IPost>();  
  
 return <button onClick={triggerExport}>Export Button</button>;  
};

In this example, when the user clicks the "Export Button", the download process will initialize. The useExport hook returns two properties: isLoading: boolean and triggerExport: async () => void. You can use these properties to create your own export button or pass them to the ExportButton component. For more detailed information and export settings, you can refer to the useExport documentation (https://refine.dev/docs/api-reference/core/hooks/import-export/useExport/). Internally, useExport uses export-to-csv to create the CSV file. You can also define your resource and options like sorting, filtering, pagination and also modify the data before exporting it just like using the useList hook. Sources: - CSV Export (https://refine.dev/docs/advanced-tutorials/import-export/csv-export/) - useExport (https://refine.dev/docs/api-reference/core/hooks/import-export/useExport/) - React-admin vs refine (https://refine.dev/blog/react-admin-vs-refine/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•10mo ago

@kapa.ai const handleDownloadBankStatement = async () => { if (dataProvider.custom) { await dataProvider .custom<ApiSuccessResponse<Blob>>({ method: 'get', query: { searchText: searchRequest.searchText, status: searchRequest.status, fromDate: searchRequest.fromDate, toDate: searchRequest.toDate, bankUuid: searchRequest.bankUuid, }, url: ${apiUrl}/${apiPaths.bankStatement.download}, headers: { 'Content-Type': 'text/csv', }, }) .then((response) => { if (response && response.data.data) { fileDownload(response.data.data, ${searchRequest.bankUuid}.csv); } else { } }) .finally(() => { setIsFileDownloading(false); }); } }; somewhat like this errorNotification const { data: depositBeneficiaryList, isLoading: isBankAccountsListLoading } = useCustom<DepositBeneficiaryList, ApiErrorResponse>({ url: ${apiUrl}/${apiPaths.bankStatement.bankAccounts}, errorNotification: { message: t( 'pages.bankStatement.upload.bankAccountsErrorNotificationMessage', ), type: 'error', }, method: 'get', });

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In your code, you are using the custom method from the dataProvider to fetch data and then download it as a CSV file. If you want to add an error notification, you can use the errorNotification prop provided by Refine's hooks like useCustom, useForm, useCreate, useUpdate, useCustomMutation, and useSelect. The errorNotification prop allows you to customize the error notification that shows up when the data fetching fails. It requires the NotificationProvider to work. Here is an example of how you can use it:

const { data: depositBeneficiaryList, isLoading: isBankAccountsListLoading } =
    useCustom<DepositBeneficiaryList, ApiErrorResponse>({
      url: `${apiUrl}/${apiPaths.bankStatement.bankAccounts}`,
      errorNotification: {
        message: t(
          'pages.bankStatement.upload.bankAccountsErrorNotificationMessage',
        ),
        type: 'error',
      },
      method: 'get',
    });

const { data: depositBeneficiaryList, isLoading: isBankAccountsListLoading } =
    useCustom<DepositBeneficiaryList, ApiErrorResponse>({
      url: `${apiUrl}/${apiPaths.bankStatement.bankAccounts}`,
      errorNotification: {
        message: t(
          'pages.bankStatement.upload.bankAccountsErrorNotificationMessage',
        ),
        type: 'error',
      },
      method: 'get',
    });

In this example, if the data fetching fails, an error notification with the message 'pages.bankStatement.upload.bankAccountsErrorNotificationMessage' and type 'error' will be shown. You can also customize the error notification by passing a function to the errorNotification prop. The function will receive the error data and should return an object with the message, description, and type properties. Here is an example:

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

useCustom({  
 errorNotification: (data, values) => {  
 return {  
 message: `Something went wrong when getting ${data.id}`,  
 description: "Error",  
 type: "error",  
 };  
 },  
});

In this example, if the data fetching fails, an error notification with a custom message, description 'Error', and type 'error' will be shown. Sources: - useCustom (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/) - useForm (https://refine.dev/docs/packages/documentation/react-hook-form/useForm/) - useCreate (https://refine.dev/docs/api-reference/core/hooks/data/useCreate/) - useUpdate (https://refine.dev/docs/api-reference/core/hooks/data/useUpdate/) - useCustomMutation (https://refine.dev/docs/api-reference/core/hooks/data/useCustomMutation/) - useSelect (https://refine.dev/docs/api-reference/mantine/hooks/useSelect/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•10mo ago

@kapa.ai useCustom and change this code const handleDownloadBankStatement = async () => { if (dataProvider.custom) { await dataProvider .custom<ApiSuccessResponse<Blob>>({ method: 'get', query: { searchText: searchRequest.searchText, status: searchRequest.status, fromDate: searchRequest.fromDate, toDate: searchRequest.toDate, bankUuid: searchRequest.bankUuid, }, url: ${apiUrl}/${apiPaths.bankStatement.download}, headers: { 'Content-Type': 'text/csv', }, }) .then((response) => { if (response && response.data.data) { fileDownload(response.data.data, ${searchRequest.bankUuid}.csv); } else { } }) .finally(() => { setIsFileDownloading(false); }); } };

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You can use the useCustom hook from Refine to fetch the data and handle the error notification. Here's how you can modify your code:

import { useCustom } from "@pankod/refine";

const handleDownloadBankStatement = () => {
  const { fetch: downloadBankStatement, isLoading: isFileDownloading } = useCustom<ApiSuccessResponse<Blob>, ApiErrorResponse>({
    method: 'get',
    query: {
      searchText: searchRequest.searchText,
      status: searchRequest.status,
      fromDate: searchRequest.fromDate,
      toDate: searchRequest.toDate,
      bankUuid: searchRequest.bankUuid,
    },
    url: `${apiUrl}/${apiPaths.bankStatement.download}`,
    headers: {
      'Content-Type': 'text/csv',
    },
    errorNotification: {
      message: 'Something went wrong while downloading the bank statement',
      type: 'error',
    },
  });

  useEffect(() => {
    downloadBankStatement()
      .then((response) => {
        if (response && response.data.data) {
          fileDownload(response.data.data, `${searchRequest.bankUuid}.csv`);
        }
      });
  }, [downloadBankStatement]);
};

import { useCustom } from "@pankod/refine";

const handleDownloadBankStatement = () => {
  const { fetch: downloadBankStatement, isLoading: isFileDownloading } = useCustom<ApiSuccessResponse<Blob>, ApiErrorResponse>({
    method: 'get',
    query: {
      searchText: searchRequest.searchText,
      status: searchRequest.status,
      fromDate: searchRequest.fromDate,
      toDate: searchRequest.toDate,
      bankUuid: searchRequest.bankUuid,
    },
    url: `${apiUrl}/${apiPaths.bankStatement.download}`,
    headers: {
      'Content-Type': 'text/csv',
    },
    errorNotification: {
      message: 'Something went wrong while downloading the bank statement',
      type: 'error',
    },
  });

  useEffect(() => {
    downloadBankStatement()
      .then((response) => {
        if (response && response.data.data) {
          fileDownload(response.data.data, `${searchRequest.bankUuid}.csv`);
        }
      });
  }, [downloadBankStatement]);
};

In this code, useCustom is used to fetch the data and handle the error notification. The fetch function returned by useCustom is used to initiate the data fetching when the component mounts. If the data fetching fails, an error notification with the message 'Something went wrong while downloading the bank statement' and type 'error' will be shown. Please note that you need to handle the finally block in your own way as useCustom does not provide a direct way to handle it. Sources: - useCustom (https://refine.dev/docs/api-reference/core/hooks/data/useCustom/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below

stormy-gold•10mo ago

@kapa.ai @pankod/refine dependency

kapa.ai•10mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The @pankod/refine is a dependency used in Refine projects. It's an open-source React-based framework for rapidly building data-driven applications. It offers immense development speed without any customization or significant functionality tradeoffs. However, starting from version 4, Refine has moved to a new npm organization, @refinedev. So, you should replace all @pankod dependencies with @refinedev. Here's how you can do it:

npm uninstall @pankod/refine-core @pankod/refine-antd @pankod/..  
npm i @refinedev/core @refinedev/antd @refinedev/..

npm uninstall @pankod/refine-core @pankod/refine-antd @pankod/..  
npm i @refinedev/core @refinedev/antd @refinedev/..

Please note that you must make this change for all packages that start with @pankod. Sources: - Migrating from 3.x.x to 4.x.x (https://refine.dev/docs/migration-guide/3x-to-4x/) - What is refine? (https://refine.dev/blog/next-js-pwa/) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•10mo ago

<@1149386202403844156> kapa.ai is still learning and improving, please let us know how it did by reacting below