feat: invlidate cashflow queries after mutate assocaited queries.

src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js

@@ -11,6 +11,7 @@ import {
   DashboardRowsHeightButton,
   FormattedMessage as T,
 } from 'components';
+import { useRefreshCashflowTransactionsInfinity } from 'hooks/query';
 
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import { CashFlowMenuItems } from './utils';
@@ -46,7 +47,6 @@ function AccountTransactionsActionsBar({
       account_id: accountId,
     });
   };
-
   // Handle money out form
   const handlMoneyOutFormTransaction = (account) => {
     openDialog('money-out', {
@@ -54,8 +54,13 @@ function AccountTransactionsActionsBar({
       account_id: accountId,
     });
   };
+  // Refresh cashflow infinity transactions hook.
+  const { refresh } = useRefreshCashflowTransactionsInfinity();
 
-  const handleRefreshBtnClick = () => {};
+  // Handle the refresh button click.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
 
   return (
     <DashboardActionsBar>

src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import 'style/pages/CashFlow/AccountTransactions/List.scss';
 
-import { DashboardPageContent, DashboardContentTable } from 'components';
+import { DashboardPageContent } from 'components';
 
 import { AccountTransactionsProvider } from './AccountTransactionsProvider';
 import AccountTransactionsActionsBar from './AccountTransactionsActionsBar';

src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js

@@ -30,10 +30,12 @@ function AccountTransactionsProvider({ query, ...props }) {
     isSuccess: isCashflowTransactionsSuccess,
     fetchNextPage: fetchNextTransactionsPage,
     isFetchingNextPage,
+    hasNextPage
   } = useAccountTransactionsInfinity(accountId, {
     page_size: 50,
   });
 
+  // Memorized the cashflow account transactions.
   const cashflowTransactions = React.useMemo(
     () =>
       isCashflowTransactionsSuccess
@@ -56,11 +58,12 @@ function AccountTransactionsProvider({ query, ...props }) {
     isLoading: isCurrentAccountLoading,
   } = useAccount(accountId, { keepPreviousData: true });
 
+  // Handle the observer ineraction.
   const handleObserverInteract = React.useCallback(() => {
-    if (!isFetchingNextPage) {
+    if (!isFetchingNextPage && hasNextPage) {
       fetchNextTransactionsPage();
     }
-  }, [isFetchingNextPage, fetchNextTransactionsPage]);
+  }, [isFetchingNextPage, hasNextPage, fetchNextTransactionsPage]);
 
   // Provider payload.
   const provider = {
@@ -81,7 +84,7 @@ function AccountTransactionsProvider({ query, ...props }) {
       <AccountTransactionsContext.Provider value={provider} {...props} />
       <IntersectionObserver
         onIntersect={handleObserverInteract}
-        // enabled={!isFetchingNextPage}
+        enabled={!isFetchingNextPage}
       />
     </DashboardInsider>
   );