feat(webapp): categorize the cashflow uncategorized transactions

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx

@@ -7,7 +7,9 @@ import {
   useAccountTransactionsInfinity,
   useCashflowAccounts,
   useAccount,
+  useAccountUncategorizedTransactionsInfinity,
 } from '@/hooks/query';
+import { useAppQueryString } from '@/hooks';
 
 const AccountTransactionsContext = React.createContext();
 
@@ -15,6 +17,10 @@ function flattenInfinityPages(data) {
   return flatten(map(data.pages, (page) => page.transactions));
 }
 
+function flattenInfinityPagesData(data) {
+  return flatten(map(data.pages, (page) => page.data));
+}
+
 /**
  * Account transctions provider.
  */
@@ -22,6 +28,13 @@ function AccountTransactionsProvider({ query, ...props }) {
   const { id } = useParams();
   const accountId = parseInt(id, 10);
 
+  const [locationQuery, setLocationQuery] = useAppQueryString();
+
+  const filterTab = locationQuery?.filter || 'all';
+  const setFilterTab = (value: stirng) => {
+    setLocationQuery({ filter: value });
+  };
+
   // Fetch cashflow account transactions list
   const {
     data: cashflowTransactionsPages,
@@ -31,10 +44,32 @@ function AccountTransactionsProvider({ query, ...props }) {
     fetchNextPage: fetchNextTransactionsPage,
     isFetchingNextPage,
     hasNextPage,
-  } = useAccountTransactionsInfinity(accountId, {
-    page_size: 50,
-    account_id: accountId,
-  });
+  } = useAccountTransactionsInfinity(
+    accountId,
+    {
+      page_size: 50,
+      account_id: accountId,
+    },
+    {
+      enabled: filterTab === 'all' || filterTab === 'dashboard',
+    },
+  );
+
+  const {
+    data: uncategorizedTransactionsPage,
+    isFetching: isUncategorizedTransactionFetching,
+    isLoading: isUncategorizedTransactionsLoading,
+    isSuccess: isUncategorizedTransactionsSuccess,
+    fetchNextPage: fetchNextUncategorizedTransactionsPage,
+  } = useAccountUncategorizedTransactionsInfinity(
+    accountId,
+    {
+      page_size: 50,
+    },
+    {
+      enabled: filterTab === 'uncategorized',
+    },
+  );
 
   // Memorized the cashflow account transactions.
   const cashflowTransactions = React.useMemo(
@@ -45,6 +80,15 @@ function AccountTransactionsProvider({ query, ...props }) {
     [cashflowTransactionsPages, isCashflowTransactionsSuccess],
   );
 
+  // Memorized the cashflow account transactions.
+  const uncategorizedTransactions = React.useMemo(
+    () =>
+      isUncategorizedTransactionsSuccess
+        ? flattenInfinityPagesData(uncategorizedTransactionsPage)
+        : [],
+    [uncategorizedTransactionsPage, isUncategorizedTransactionsSuccess],
+  );
+
   // Fetch cashflow accounts.
   const {
     data: cashflowAccounts,
@@ -78,6 +122,12 @@ function AccountTransactionsProvider({ query, ...props }) {
     isCashFlowAccountsLoading,
     isCurrentAccountFetching,
     isCurrentAccountLoading,
+
+    filterTab,
+    setFilterTab,
+
+    uncategorizedTransactions,
+    isUncategorizedTransactionFetching
   };
 
   return (