fix: refresh accounts and account transactions.

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 {

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsDataTable.tsx

@@ -48,8 +48,11 @@ function AccountTransactionsDataTable({
   const columns = useAccountTransactionsColumns();
 
   // Retrieve list context.
-  const { cashflowTransactions, isCashFlowTransactionsLoading } =
+  const {
-    useAccountTransactionsAllContext();
+    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}

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 (
     <AppContentShell.Main ref={(e) => setScrollableRef(e)}>
       <AccountTransactionsActionsBar />
+      <AccountTransactionsLoadingBar />
       <AccountTransactionsDetailsBar />
-      <AccountTransactionsProgressBar />
 
       <DashboardPageContent>
         <AccountTransactionsFilterTabs />

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 (

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}
+      loading={isExcludedTransactionsLoading}
-      headerLoading={false}
+      headerLoading={isExcludedTransactionsLoading}
+      progressBarLoading={isExcludedTransactionsFetching}
       expandColumnSpace={1}
       expandToggleColumn={2}
       selectionColumnWidth={45}

packages/webapp/src/containers/CashFlow/AccountTransactions/PendingTransactions/PendingTransactionsTable.tsx

@@ -30,8 +30,11 @@ function PendingTransactionsDataTableRoot({
   const { scrollableRef } = useAccountTransactionsContext();
 
   // Retrieve list context.
-  const { pendingTransactions, isPendingTransactionsLoading } =
+  const {
-    usePendingTransactionsContext();
+    pendingTransactions,
+    isPendingTransactionsLoading,
+    isPendingTransactionFetching,
+  } = usePendingTransactionsContext();
 
   return (
     <CashflowTransactionsTable
@@ -41,6 +44,7 @@ function PendingTransactionsDataTableRoot({
       sticky={true}
       loading={isPendingTransactionsLoading}
       headerLoading={isPendingTransactionsLoading}
+      progressBarLoading={isPendingTransactionFetching}
       TableCellRenderer={TableFastCell}
       TableLoadingRenderer={TableSkeletonRows}
       TableRowsRenderer={TableVirtualizedListRows}

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -52,8 +52,11 @@ function AccountTransactionsDataTable({
   const { scrollableRef } = useAccountTransactionsContext();
 
   // Retrieve list context.
-  const { uncategorizedTransactions, isUncategorizedTransactionsLoading } =
+  const {
-    useAccountUncategorizedTransactionsContext();
+    uncategorizedTransactions,
+    isUncategorizedTransactionsLoading,
+    isUncategorizedTransactionFetching,
+  } = useAccountUncategorizedTransactionsContext();
 
   const { mutateAsync: excludeTransaction } =
     useExcludeUncategorizedTransaction();
@@ -105,6 +108,7 @@ function AccountTransactionsDataTable({
       selectionColumn={true}
       loading={isUncategorizedTransactionsLoading}
       headerLoading={isUncategorizedTransactionsLoading}
+      progressBarLoading={isUncategorizedTransactionFetching}
       expandColumnSpace={1}
       expandToggleColumn={2}
       selectionColumnWidth={45}

packages/webapp/src/containers/CashFlow/AccountTransactions/components.tsx

@@ -1,18 +1,29 @@
 // @ts-nocheck
 import React from 'react';
 import intl from 'react-intl-universal';
-import {
+import { Intent, Menu, MenuItem, Tag } from '@blueprintjs/core';
-  Intent,
+import { FormatDateCell, Icon } from '@/components';
-  Menu,
-  MenuItem,
-  Tag,
-  PopoverInteractionKind,
-  Position,
-  Tooltip,
-} from '@blueprintjs/core';
-import { Box, FormatDateCell, Icon, MaterialProgressBar } from '@/components';
-import { useAccountTransactionsContext } from './AccountTransactionsProvider';
 import { safeCallback } from '@/utils';
+import { useAccountTransactionsContext } from './AccountTransactionsProvider';
+import FinancialLoadingBar from '@/containers/FinancialStatements/FinancialLoadingBar';
+
+export function AccountTransactionsLoadingBar() {
+  const {
+    isBankAccountMetaSummaryFetching,
+    isCurrentAccountFetching,
+    isCashFlowAccountsFetching,
+  } = useAccountTransactionsContext();
+
+  const isLoading =
+    isCashFlowAccountsFetching ||
+    isCurrentAccountFetching ||
+    isBankAccountMetaSummaryFetching;
+
+  if (isLoading) {
+    return <FinancialLoadingBar />;
+  }
+  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 ? (
-    <MaterialProgressBar />
-  ) : null;
-}

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 (
     <CashFlowAccountsProvider tableState={cashflowAccountsTableState}>
       <CashFlowAccountsActionsBar />
+      <CashflowAccountsLoadingBar />
 
       <DashboardPageContent>
         <CashflowAccountsGrid />

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 <FinancialLoadingBar />;
+  }
+  return null;
+}

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: () => {
+    refresh: (accountId: number) => {
-      query.invalidateQueries(t.CASH_FLOW_TRANSACTIONS);
+      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]);
     },
   };
 }