retrieve full transaction list

forbole · Feb 1, 2023 · 5d816e3 · 5d816e3
1 parent bb3dab8
commit 5d816e3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git 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<unknown[]>();
 
   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
@@ -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<TransactionsListState> = (props) => {
-  const { transactions } = props;
+export interface CSVButtonTypes extends TransactionsListState {
+  loadMoreItems: (() => Promise<void>) | (() => null);
+  hasNextPage: boolean;
+}
+
+const ExportCSVButton: FC<CSVButtonTypes> = (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
@@ -24,7 +24,13 @@ const Transactions: FC<ComponentDefault> = (props) => {
   return (
     <Box className={cx(classes.root, props.className)}>
       <Typography variant="h2">{t('transactions')}</Typography>
-      <ExportCSVButton transactions={state.data} itemCount={itemCount} />
+      <ExportCSVButton
+        transactions={state.data}
+        itemCount={itemCount}
+        loadMoreItems={loadMoreItems}
+        isItemLoaded={isItemLoaded}
+        hasNextPage={state.hasNextPage}
+      />
       <div className={classes.list}>
         {txListFormat === 'compact' ? (
           <TransactionsList