diff --git a/src/components/ui/csvDownloader/csv-export.tsx b/src/components/ui/csvDownloader/csv-export.tsx index 38fa5153f..6a00e3c77 100644 --- a/src/components/ui/csvDownloader/csv-export.tsx +++ b/src/components/ui/csvDownloader/csv-export.tsx @@ -8,7 +8,7 @@ import { JSX, useCallback } from 'react'; import { CsvExportProps } from './csv-export.type'; import { useCsvExport } from './use-csv-export'; -import { ExportCsvButton } from './export-csv-button'; +import { ManagedExportCsvButton } from './managed-export-csv-button'; export function CsvExport({ columns, @@ -19,10 +19,12 @@ export function CsvExport({ skipPinnedBottom = false, language, getData, + resetKey, }: CsvExportProps): JSX.Element { const csvExport = useCsvExport(); - const download = useCallback(() => { - csvExport.getData({ + + const exportCsv = useCallback(async () => { + await csvExport.getData({ columns, tableName, tableNamePrefix, @@ -32,6 +34,5 @@ export function CsvExport({ getData, }); }, [columns, csvExport, tableName, tableNamePrefix, skipColumnHeaders, skipPinnedBottom, language, getData]); - - return ; + return ; } diff --git a/src/components/ui/csvDownloader/csv-export.type.ts b/src/components/ui/csvDownloader/csv-export.type.ts index ebda67dba..f909b8ff3 100644 --- a/src/components/ui/csvDownloader/csv-export.type.ts +++ b/src/components/ui/csvDownloader/csv-export.type.ts @@ -6,6 +6,7 @@ */ import { ColDef, CsvExportParams } from 'ag-grid-community'; +import { Key } from 'react'; import { GsLangUser } from '../../../utils'; export type CsvDownloadProps = { @@ -17,6 +18,7 @@ export type CsvDownloadProps = { language: GsLangUser; getData: (params?: CsvExportParams) => string | undefined | void; isCopyCsv?: boolean; + resetKey?: Key; }; export type CsvExportProps = CsvDownloadProps & { diff --git a/src/components/ui/csvDownloader/index.ts b/src/components/ui/csvDownloader/index.ts index 1897faa82..9d2c05910 100644 --- a/src/components/ui/csvDownloader/index.ts +++ b/src/components/ui/csvDownloader/index.ts @@ -8,4 +8,5 @@ export * from './csv-export'; export * from './csv-export.type'; export * from './export-csv-button'; +export * from './managed-export-csv-button'; export * from './use-csv-export'; diff --git a/src/components/ui/csvDownloader/managed-export-csv-button.tsx b/src/components/ui/csvDownloader/managed-export-csv-button.tsx new file mode 100644 index 000000000..c10a8665b --- /dev/null +++ b/src/components/ui/csvDownloader/managed-export-csv-button.tsx @@ -0,0 +1,64 @@ +/* + * Copyright (c) 2025, RTE (http://www.rte-france.com) + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +import { useCallback, useEffect, useState } from 'react'; +import { ExportCsvButton } from './export-csv-button'; + +export interface ManagedExportCsvButtonProps { + disabled?: boolean; + exportCsv: () => Promise; + resetKey?: unknown; + onSuccess?: () => void; + onError?: (error: unknown) => void; +} + +export function ManagedExportCsvButton({ + disabled = false, + exportCsv, + resetKey, + onSuccess, + onError, +}: Readonly) { + const [isLoading, setIsLoading] = useState(false); + const [isSuccessful, setIsSuccessful] = useState(false); + + useEffect(() => { + setIsLoading(false); + setIsSuccessful(false); + }, [resetKey]); + + useEffect(() => { + if (disabled) { + setIsSuccessful(false); + } + }, [disabled]); + + const handleClick = useCallback(async () => { + setIsSuccessful(false); + setIsLoading(true); + + try { + await exportCsv(); + setIsSuccessful(true); + onSuccess?.(); + } catch (error) { + setIsSuccessful(false); + onError?.(error); + } finally { + setIsLoading(false); + } + }, [exportCsv, onSuccess, onError]); + + return ( + + ); +}