re-structure to monorepo.

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

@@ -0,0 +1,97 @@
+// @ts-nocheck
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { flatten, map } from 'lodash';
+import { IntersectionObserver, DashboardInsider } from '@/components';
+import {
+  useAccountTransactionsInfinity,
+  useCashflowAccounts,
+  useAccount,
+} from '@/hooks/query';
+
+const AccountTransactionsContext = React.createContext();
+
+function flattenInfinityPages(data) {
+  return flatten(map(data.pages, (page) => page.transactions));
+}
+
+/**
+ * Account transctions provider.
+ */
+function AccountTransactionsProvider({ query, ...props }) {
+  const { id } = useParams();
+  const accountId = parseInt(id, 10);
+
+  // Fetch cashflow account transactions list
+  const {
+    data: cashflowTransactionsPages,
+    isFetching: isCashFlowTransactionsFetching,
+    isLoading: isCashFlowTransactionsLoading,
+    isSuccess: isCashflowTransactionsSuccess,
+    fetchNextPage: fetchNextTransactionsPage,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useAccountTransactionsInfinity(accountId, {
+    page_size: 50,
+    account_id: accountId,
+  });
+
+  // Memorized the cashflow account transactions.
+  const cashflowTransactions = React.useMemo(
+    () =>
+      isCashflowTransactionsSuccess
+        ? flattenInfinityPages(cashflowTransactionsPages)
+        : [],
+    [cashflowTransactionsPages, isCashflowTransactionsSuccess],
+  );
+
+  // Fetch cashflow accounts.
+  const {
+    data: cashflowAccounts,
+    isFetching: isCashFlowAccountsFetching,
+    isLoading: isCashFlowAccountsLoading,
+  } = useCashflowAccounts(query, { keepPreviousData: true });
+
+  // Retrieve specific account details.
+  const {
+    data: currentAccount,
+    isFetching: isCurrentAccountFetching,
+    isLoading: isCurrentAccountLoading,
+  } = useAccount(accountId, { keepPreviousData: true });
+
+  // Handle the observer ineraction.
+  const handleObserverInteract = React.useCallback(() => {
+    if (!isFetchingNextPage && hasNextPage) {
+      fetchNextTransactionsPage();
+    }
+  }, [isFetchingNextPage, hasNextPage, fetchNextTransactionsPage]);
+
+  // Provider payload.
+  const provider = {
+    accountId,
+    cashflowTransactions,
+    cashflowAccounts,
+    currentAccount,
+    isCashFlowTransactionsFetching,
+    isCashFlowTransactionsLoading,
+    isCashFlowAccountsFetching,
+    isCashFlowAccountsLoading,
+    isCurrentAccountFetching,
+    isCurrentAccountLoading,
+  };
+
+  return (
+    <DashboardInsider name={'account-transactions'}>
+      <AccountTransactionsContext.Provider value={provider} {...props} />
+      <IntersectionObserver
+        onIntersect={handleObserverInteract}
+        enabled={!isFetchingNextPage}
+      />
+    </DashboardInsider>
+  );
+}
+
+const useAccountTransactionsContext = () =>
+  React.useContext(AccountTransactionsContext);
+
+export { AccountTransactionsProvider, useAccountTransactionsContext };