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

src/hooks/query/accounts.js

@@ -13,6 +13,9 @@ const commonInvalidateQueries = (query) => {
   query.invalidateQueries(t.ACCOUNTS);
   query.invalidateQueries(t.ACCOUNT);
 
+  // Invalidate cashflow accounts.
+  query.invalidateQueries(t.CASH_FLOW_ACCOUNTS);
+
   // Invalidate financial reports.
   query.invalidateQueries(t.FINANCIAL_REPORT);
 };

src/hooks/query/cashflowAccounts.js

@@ -7,7 +7,19 @@ const commonInvalidateQueries = (queryClient) => {
   // Invalidate accounts.
   queryClient.invalidateQueries(t.ACCOUNTS);
   queryClient.invalidateQueries(t.ACCOUNT);
-  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTION);
+  
+  // Invalidate account transactions.
+  queryClient.invalidateQueries(t.ACCOUNT_TRANSACTION);
+
+  // Invalidate cashflow accounts.
+  queryClient.invalidateQueries(t.CASH_FLOW_ACCOUNTS);
+
+  // Invalidate the cashflow transactions.
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+
+  // Invalidate financial reports.
+  queryClient.invalidateQueries(t.FINANCIAL_REPORT);
 };
 
 /**
@@ -28,10 +40,10 @@ export function useCashflowAccounts(query, props) {
 /**
  * Retrieve account transactions list.
  */
-export function useCashflowTransactions(id, props) {
+export function useCashflowTransactions(accountId, props) {
   return useRequestQuery(
-    [t.CASH_FLOW_TRANSACTIONS, id],
-    { method: 'get', url: `cashflow/account/${id}/transactions` },
+    [t.CASH_FLOW_TRANSACTIONS, accountId],
+    { method: 'get', url: `cashflow/account/${accountId}/transactions` },
     {
       select: (res) => res.data.cashflow_transactions,
       defaultData: [],
@@ -68,8 +80,6 @@ export function useDeleteCashflowTransaction(props) {
 
   return useMutation((id) => apiRequest.delete(`cashflow/transactions/${id}`), {
     onSuccess: (res, id) => {
-      queryClient.invalidateQueries([t.CASH_FLOW_TRANSACTION, id]);
-
       // Invalidate queries.
       commonInvalidateQueries(queryClient);
     },
@@ -92,7 +102,7 @@ export function useAccountTransactionsInfinity(
   const apiRequest = useApiRequest();
 
   return useInfiniteQuery(
-    ['CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY', accountId],
+    [t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY, accountId],
     async ({ pageParam = 1 }) => {
       const response = await apiRequest.http({
         ...axios,
@@ -115,3 +125,42 @@ export function useAccountTransactionsInfinity(
     },
   );
 }
+
+/**
+ * Refresh cashflow transactions infinity.
+ */
+export function useRefreshCashflowTransactionsInfinity() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
+    },
+  };
+}
+
+/**
+ * Refresh cashflow accounts.
+ */
+export function useRefreshCashflowAccounts() {
+  const queryClient = useQueryClient();
+
+  return {
+    refresh: () => {
+      queryClient.invalidateQueries(t.CASH_FLOW_ACCOUNTS);
+    },
+  };
+}
+
+/**
+ * Refresh the cshflow account transactions.
+ */
+export function useRefreshCashflowTransactions() {
+  const query = useQueryClient();
+
+  return {
+    refresh: () => {
+      query.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+    },
+  };
+}

src/hooks/query/expenses.js

@@ -21,6 +21,10 @@ const commonInvalidateQueries = (queryClient) => {
 
   // Invalidate financial reports.
   queryClient.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate the cashflow transactions.
+  queryClient.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 };
 
 const transformExpenses = (response) => ({

src/hooks/query/manualJournals.js

@@ -22,6 +22,10 @@ const commonInvalidateQueries = (client) => {
 
   // Invalidate financial reports.
   client.invalidateQueries(t.FINANCIAL_REPORT);
+
+  // Invalidate the cashflow transactions.
+  client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 };
 
 /**

src/hooks/query/paymentMades.js

@@ -26,6 +26,10 @@ const commonInvalidateQueries = (client) => {
   // Invalidate vendors.
   client.invalidateQueries(t.VENDORS);
   client.invalidateQueries(t.VENDOR);
+
+  // Invalidate the cashflow transactions.
+  client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 };
 
 /**

src/hooks/query/paymentReceives.js

@@ -24,6 +24,10 @@ const commonInvalidateQueries = (client) => {
   // Invalidate customers.
   client.invalidateQueries(t.CUSTOMERS);
   client.invalidateQueries(t.CUSTOMER);
+
+  // Invalidate the cashflow transactions.
+  client.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+  client.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY);
 };
 
 // Transform payment receives.

src/hooks/query/types.js

@@ -137,6 +137,7 @@ const CASH_FLOW_ACCOUNTS = {
   CASH_FLOW_ACCOUNTS: 'CASH_FLOW_ACCOUNTS',
   CASH_FLOW_TRANSACTIONS: 'CASH_FLOW_TRANSACTIONS',
   CASH_FLOW_TRANSACTION: 'CASH_FLOW_TRANSACTION',
+  CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY: 'CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY'
 };
 
 export default {