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>
   );

src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js

@@ -7,15 +7,12 @@ import {
   Alignment,
   Switch,
 } from '@blueprintjs/core';
-import {
-  Icon,
-  FormattedMessage as T,
-} from 'components';
+import { Icon, FormattedMessage as T } from 'components';
+import { useRefreshCashflowAccounts } from 'hooks/query';
+
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 
 import withDialogActions from 'containers/Dialog/withDialogActions';
-import withSettings from '../../Settings/withSettings';
-import withSettingsActions from '../../Settings/withSettingsActions';
 import withCashflowAccountsTableActions from '../AccountTransactions/withCashflowAccountsTableActions';
 
 import { compose } from 'utils';
@@ -27,22 +24,15 @@ function CashFlowAccountsActionsBar({
   // #withDialogActions
   openDialog,
 
-  // #withSettings
-  cashflowTableSize,
-
-  // #withSettingsActions
-  addSetting,
-
-  // #
-  setCashflowAccountsTableState
+  // #withCashflowAccountsTableActions
+  setCashflowAccountsTableState,
 }) {
-  // Handle table row size change.
-  const handleTableRowSizeChange = (size) => {
-    addSetting('cashflowAccounts', 'tableSize', size);
-  };
-  // Handle click a refresh
-  const handleRefreshBtnClick = () => {};
+  const { refresh } = useRefreshCashflowAccounts();
 
+  // Handle refresh button click.
+  const handleRefreshBtnClick = () => {
+    refresh();
+  };
   // Handle add bank account.
   const handleAddBankAccount = () => {
     openDialog('account-form', {});
@@ -89,7 +79,7 @@ function CashFlowAccountsActionsBar({
           text={<T id={'import'} />}
         />
         <NavbarDivider />
-        
+
         <Switch
           labelElement={<T id={'inactive'} />}
           defaultChecked={false}
@@ -108,9 +98,5 @@ function CashFlowAccountsActionsBar({
 }
 export default compose(
   withDialogActions,
-  withSettingsActions,
-  withSettings(({ cashflowSettings }) => ({
-    cashflowTableSize: cashflowSettings?.tableSize,
-  })),
   withCashflowAccountsTableActions,
 )(CashFlowAccountsActionsBar);