From 3c49e8f57a37d3eb9f2804978dbb093e73c537d0 Mon Sep 17 00:00:00 2001 From: "a.bouhuolia" Date: Mon, 25 Oct 2021 13:09:28 +0200 Subject: [PATCH] feat: invlidate cashflow queries after mutate assocaited queries. --- .../AccountTransactionsActionsBar.js | 9 ++- .../AccountTransactionsList.js | 2 +- .../AccountTransactionsProvider.js | 9 ++- .../CashFlowAccountsActionsBar.js | 36 ++++------- src/hooks/query/accounts.js | 3 + src/hooks/query/cashflowAccounts.js | 63 ++++++++++++++++--- src/hooks/query/expenses.js | 4 ++ src/hooks/query/manualJournals.js | 4 ++ src/hooks/query/paymentMades.js | 4 ++ src/hooks/query/paymentReceives.js | 4 ++ src/hooks/query/types.js | 1 + 11 files changed, 101 insertions(+), 38 deletions(-) diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js index 34d322fc6..c86e29667 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.js +++ b/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 ( diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js index 337d61192..1c7d9ce79 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.js +++ b/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'; diff --git a/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js b/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js index a163ced01..4eeae0a14 100644 --- a/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.js +++ b/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 }) { ); diff --git a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js b/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js index fbbb906fe..ccd2609b8 100644 --- a/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsActionsBar.js +++ b/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={} /> - + } defaultChecked={false} @@ -108,9 +98,5 @@ function CashFlowAccountsActionsBar({ } export default compose( withDialogActions, - withSettingsActions, - withSettings(({ cashflowSettings }) => ({ - cashflowTableSize: cashflowSettings?.tableSize, - })), withCashflowAccountsTableActions, )(CashFlowAccountsActionsBar); diff --git a/src/hooks/query/accounts.js b/src/hooks/query/accounts.js index 0bd40dfa8..17de22f90 100644 --- a/src/hooks/query/accounts.js +++ b/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); }; diff --git a/src/hooks/query/cashflowAccounts.js b/src/hooks/query/cashflowAccounts.js index ec87baa21..25aca40a8 100644 --- a/src/hooks/query/cashflowAccounts.js +++ b/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); + }, + }; +} diff --git a/src/hooks/query/expenses.js b/src/hooks/query/expenses.js index 571f31c36..df5000d13 100644 --- a/src/hooks/query/expenses.js +++ b/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) => ({ diff --git a/src/hooks/query/manualJournals.js b/src/hooks/query/manualJournals.js index cdd38c635..dd3187132 100644 --- a/src/hooks/query/manualJournals.js +++ b/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); }; /** diff --git a/src/hooks/query/paymentMades.js b/src/hooks/query/paymentMades.js index 9005fef93..f4589b480 100644 --- a/src/hooks/query/paymentMades.js +++ b/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); }; /** diff --git a/src/hooks/query/paymentReceives.js b/src/hooks/query/paymentReceives.js index b395ab053..6f8a0f28a 100644 --- a/src/hooks/query/paymentReceives.js +++ b/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. diff --git a/src/hooks/query/types.js b/src/hooks/query/types.js index 2c72013bd..9b3637f27 100644 --- a/src/hooks/query/types.js +++ b/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 {