diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx index 9b605a672..5048d2b54 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsActionsBar.tsx @@ -32,7 +32,7 @@ import { getAddMoneyOutOptions, getAddMoneyInOptions, } from '@/constants/cashflowOptions'; -import { useRefreshCashflowTransactionsInfinity } from '@/hooks/query'; +import { useRefreshCashflowTransactions } from '@/hooks/query'; import { useAccountTransactionsContext } from './AccountTransactionsProvider'; import withDialogActions from '@/containers/Dialog/withDialogActions'; @@ -76,7 +76,7 @@ function AccountTransactionsActionsBar({ const { accountId, currentAccount } = useAccountTransactionsContext(); // Refresh cashflow infinity transactions hook. - const { refresh } = useRefreshCashflowTransactionsInfinity(); + const { refresh } = useRefreshCashflowTransactions(); const { mutateAsync: updateBankAccount } = useUpdateBankAccount(); @@ -141,7 +141,7 @@ function AccountTransactionsActionsBar({ }; // Handle the refresh button click. const handleRefreshBtnClick = () => { - refresh(); + refresh(accountId); }; const { diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx index f2e4ddfe5..51749c778 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx @@ -48,8 +48,11 @@ function AccountTransactionsDataTable({ const columns = useAccountTransactionsColumns(); // Retrieve list context. - const { cashflowTransactions, isCashFlowTransactionsLoading } = - useAccountTransactionsAllContext(); + const { + cashflowTransactions, + isCashFlowTransactionsLoading, + isCashFlowTransactionsFetching, + } = useAccountTransactionsAllContext(); const { mutateAsync: uncategorizeTransaction } = useUncategorizeTransaction(); const { mutateAsync: unmatchTransaction } = @@ -118,6 +121,7 @@ function AccountTransactionsDataTable({ sticky={true} loading={isCashFlowTransactionsLoading} headerLoading={isCashFlowTransactionsLoading} + progressBarLoading={isCashFlowTransactionsFetching} expandColumnSpace={1} expandToggleColumn={2} selectionColumnWidth={45} diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx index c5a8fed62..93f534093 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx @@ -13,10 +13,10 @@ import { useAccountTransactionsContext, } from './AccountTransactionsProvider'; import { AccountTransactionsDetailsBar } from './AccountTransactionsDetailsBar'; -import { AccountTransactionsProgressBar } from './components'; import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs'; import { AppContentShell } from '@/components/AppShell'; import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside'; +import { AccountTransactionsLoadingBar } from './components'; import { withBanking } from '../withBanking'; /** @@ -42,8 +42,8 @@ function AccountTransactionsMain() { return ( setScrollableRef(e)}> + - diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx index 4266fae1c..04ba17f7a 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx @@ -39,6 +39,7 @@ function AccountTransactionsProvider({ query, ...props }) { const { data: bankAccountMetaSummary, isLoading: isBankAccountMetaSummaryLoading, + isFetching: isBankAccountMetaSummaryFetching, } = useGetBankAccountSummaryMeta(accountId); const [scrollableRef, setScrollableRef] = useState(); @@ -52,15 +53,18 @@ function AccountTransactionsProvider({ query, ...props }) { isCashFlowAccountsFetching, isCashFlowAccountsLoading, + isCurrentAccountFetching, isCurrentAccountLoading, + isBankAccountMetaSummaryLoading, + isBankAccountMetaSummaryFetching, filterTab, setFilterTab, scrollableRef, - setScrollableRef + setScrollableRef, }; return ( diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx index c84ec27aa..34c037c14 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx @@ -34,7 +34,11 @@ function ExcludedTransactionsTableRoot({ // #withBankingActions setExcludedTransactionsSelected, }: ExcludeTransactionsTableProps) { - const { excludedBankTransactions } = useExcludedTransactionsBoot(); + const { + excludedBankTransactions, + isExcludedTransactionsLoading, + isExcludedTransactionsFetching, + } = useExcludedTransactionsBoot(); const { mutateAsync: unexcludeBankTransaction } = useUnexcludeUncategorizedTransaction(); @@ -79,8 +83,9 @@ function ExcludedTransactionsTableRoot({ columns={columns} data={excludedBankTransactions} sticky={true} - loading={false} - headerLoading={false} + loading={isExcludedTransactionsLoading} + headerLoading={isExcludedTransactionsLoading} + progressBarLoading={isExcludedTransactionsFetching} expandColumnSpace={1} expandToggleColumn={2} selectionColumnWidth={45} diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx index ae3ecf944..e469b8f06 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx @@ -30,8 +30,11 @@ function PendingTransactionsDataTableRoot({ const { scrollableRef } = useAccountTransactionsContext(); // Retrieve list context. - const { pendingTransactions, isPendingTransactionsLoading } = - usePendingTransactionsContext(); + const { + pendingTransactions, + isPendingTransactionsLoading, + isPendingTransactionFetching, + } = usePendingTransactionsContext(); return ( ; + } + return null; +} export function ActionsMenu({ payload: { onUncategorize, onUnmatch }, @@ -137,16 +148,3 @@ export function useAccountTransactionsColumns() { [], ); } - -/** - * Account transactions progress bar. - */ -export function AccountTransactionsProgressBar() { - const { isCashFlowTransactionsFetching, isUncategorizedTransactionFetching } = - useAccountTransactionsContext(); - - return isCashFlowTransactionsFetching || - isUncategorizedTransactionFetching ? ( - - ) : null; -} diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx index 7cad57e10..c3c88f431 100644 --- a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx +++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsList.tsx @@ -10,6 +10,7 @@ import { CashFlowAccountsProvider } from './CashFlowAccountsProvider'; import CashflowAccountsGrid from './CashflowAccountsGrid'; import CashFlowAccountsActionsBar from './CashFlowAccountsActionsBar'; import { CashflowAccountsPlaidLink } from './CashflowAccountsPlaidLink'; +import { CashflowAccountsLoadingBar } from './CashFlowAccountsLoadingBar'; import withCashflowAccounts from '@/containers/CashFlow/AccountTransactions/withCashflowAccounts'; import withCashflowAccountsTableActions from '@/containers/CashFlow/AccountTransactions/withCashflowAccountsTableActions'; @@ -35,6 +36,7 @@ function CashFlowAccountsList({ return ( + diff --git a/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsLoadingBar.tsx b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsLoadingBar.tsx new file mode 100644 index 000000000..0a85cfe74 --- /dev/null +++ b/packages/webapp/src/containers/CashFlow/CashFlowAccounts/CashFlowAccountsLoadingBar.tsx @@ -0,0 +1,12 @@ +// @ts-nocheck +import FinancialLoadingBar from '@/containers/FinancialStatements/FinancialLoadingBar'; +import { useCashFlowAccountsContext } from './CashFlowAccountsProvider'; + +export function CashflowAccountsLoadingBar() { + const { isCashFlowAccountsFetching } = useCashFlowAccountsContext(); + + if (isCashFlowAccountsFetching) { + return ; + } + return null; +} diff --git a/packages/webapp/src/hooks/query/cashflowAccounts.tsx b/packages/webapp/src/hooks/query/cashflowAccounts.tsx index 089fc6a34..046e00657 100644 --- a/packages/webapp/src/hooks/query/cashflowAccounts.tsx +++ b/packages/webapp/src/hooks/query/cashflowAccounts.tsx @@ -3,6 +3,7 @@ import { useMutation, useQueryClient, useInfiniteQuery } from 'react-query'; import { useRequestQuery } from '../useQueryRequest'; import useApiRequest from '../useRequest'; import t from './types'; +import { BANK_QUERY_KEY } from '@/constants/query-keys/banking'; const commonInvalidateQueries = (queryClient) => { // Invalidate settings. @@ -175,19 +176,6 @@ export function useAccountUncategorizedTransactionsInfinity( ); } -/** - * Refresh cashflow transactions infinity. - */ -export function useRefreshCashflowTransactionsInfinity() { - const queryClient = useQueryClient(); - - return { - refresh: () => { - queryClient.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY); - }, - }; -} - /** * Refresh cashflow accounts. */ @@ -208,8 +196,25 @@ export function useRefreshCashflowTransactions() { const query = useQueryClient(); return { - refresh: () => { - query.invalidateQueries(t.CASH_FLOW_TRANSACTIONS); + refresh: (accountId: number) => { + query.invalidateQueries(t.CASHFLOW_ACCOUNT_TRANSACTIONS_INFINITY); + query.invalidateQueries( + t.CASHFLOW_ACCOUNT_UNCATEGORIZED_TRANSACTIONS_INFINITY, + ); + query.invalidateQueries( + BANK_QUERY_KEY.RECOGNIZED_BANK_TRANSACTIONS_INFINITY, + ); + query.invalidateQueries( + BANK_QUERY_KEY.EXCLUDED_BANK_TRANSACTIONS_INFINITY, + ); + query.invalidateQueries( + BANK_QUERY_KEY.PENDING_BANK_ACCOUNT_TRANSACTIONS_INFINITY, + ); + query.invalidateQueries([ + BANK_QUERY_KEY.BANK_ACCOUNT_SUMMARY_META, + accountId, + ]); + query.invalidateQueries([t.ACCOUNT, accountId]); }, }; }