diff --git a/packages/ui/src/components/export_csv/hooks.ts b/packages/ui/src/components/export_csv/hooks.ts index 230b3d8885..06b246e6d7 100644 --- a/packages/ui/src/components/export_csv/hooks.ts +++ b/packages/ui/src/components/export_csv/hooks.ts @@ -4,8 +4,14 @@ import dayjs from '@/utils/dayjs'; import { AsyncParser } from '@json2csv/node'; import { unwind, flatten } from '@json2csv/transforms'; import { stringQuoteOnlyIfNecessary as stringQuoteOnlyIfNecessaryFormatter } from '@json2csv/formatters'; +// eslint-disable-next-line import/no-cycle +import { CSVButtonTypes } from '@/components/export_csv'; -export const useMessageDetailsHook = (transactions: Transactions[]) => { +export const useMessageDetailsHook = ({ + transactions, + loadMoreItems, + hasNextPage, +}: CSVButtonTypes) => { const [csv, setCSV] = React.useState(); const items = transactions.map((x) => ({ @@ -95,9 +101,12 @@ export const useMessageDetailsHook = (transactions: Transactions[]) => { }; React.useEffect(() => { + if (hasNextPage) { + loadMoreItems(); + } convertToCSVString(JSON.stringify(items), options); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [items, transactions]); + }, [items, transactions, hasNextPage]); return csv; }; diff --git a/packages/ui/src/components/export_csv/index.tsx b/packages/ui/src/components/export_csv/index.tsx index 47ad954fac..52584d6e1d 100644 --- a/packages/ui/src/components/export_csv/index.tsx +++ b/packages/ui/src/components/export_csv/index.tsx @@ -5,12 +5,23 @@ import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined'; import FileSaver from 'file-saver'; import useStyles from '@/components/export_csv/styles'; import type { TransactionsListState } from '@/components/transactions_list/types'; +// eslint-disable-next-line import/no-cycle import { useMessageDetailsHook } from './hooks'; -const ExportCSVButton: FC = (props) => { - const { transactions } = props; +export interface CSVButtonTypes extends TransactionsListState { + loadMoreItems: (() => Promise) | (() => null); + hasNextPage: boolean; +} + +const ExportCSVButton: FC = (props) => { + const { transactions, itemCount, hasNextPage, loadMoreItems = () => null } = props; const { classes } = useStyles(); - const csv = useMessageDetailsHook(transactions); + const csv = useMessageDetailsHook({ + transactions, + itemCount, + loadMoreItems, + hasNextPage, + }); const handleCSVExport = () => { try { diff --git a/packages/ui/src/screens/account_details/components/transactions/index.tsx b/packages/ui/src/screens/account_details/components/transactions/index.tsx index 496f3e04b5..837e818484 100644 --- a/packages/ui/src/screens/account_details/components/transactions/index.tsx +++ b/packages/ui/src/screens/account_details/components/transactions/index.tsx @@ -24,7 +24,13 @@ const Transactions: FC = (props) => { return ( {t('transactions')} - +
{txListFormat === 'compact' ? (