refactoring: migrating to react-query to manage service-side state.

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js

@@ -18,32 +18,36 @@ import NumberFormatDropdown from 'components/NumberFormatDropdown';
 import withTrialBalance from './withTrialBalance';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import { compose, saveInvoke } from 'utils';
+import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 
 function TrialBalanceActionsBar({
   // #withTrialBalance
   trialBalanceSheetFilter,
-  trialBalanceSheetLoading,
 
   // #withTrialBalanceActions
   toggleTrialBalanceFilter,
-  refreshTrialBalance,
 
   // #ownProps
   numberFormat,
-  onNumberFormatSubmit
+  onNumberFormatSubmit,
 }) {
+  const { refetchSheet, isLoading } = useTrialBalanceSheetContext();
+
+  // Handle filter toggle click.
   const handleFilterToggleClick = () => {
     toggleTrialBalanceFilter();
   };
 
+  // Handle re-calc button click.
   const handleRecalcReport = () => {
-    refreshTrialBalance(true);
+    refetchSheet();
   };
 
   // Handle number format submit.
   const handleNumberFormatSubmit = (values) => {
     saveInvoke(onNumberFormatSubmit, values);
   };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -75,7 +79,7 @@ function TrialBalanceActionsBar({
             <NumberFormatDropdown
               numberFormat={numberFormat}
               onSubmit={handleNumberFormatSubmit}
-              submitDisabled={trialBalanceSheetLoading}
+              submitDisabled={isLoading}
             />
           }
           minimal={true}
@@ -119,7 +123,7 @@ function TrialBalanceActionsBar({
 export default compose(
   withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
     trialBalanceSheetFilter,
-    trialBalanceSheetLoading
+    trialBalanceSheetLoading,
   })),
   withTrialBalanceActions,
 )(TrialBalanceActionsBar);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceProvider.js

@@ -0,0 +1,30 @@
+import React, { createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useTrialBalanceSheet } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const TrialBalanceSheetContext = createContext();
+
+function TrialBalanceSheetProvider({ query, ...props }) {
+  const { data: trialBalanceSheet, isFetching, refetch } = useTrialBalanceSheet(
+    {
+      ...transformFilterFormToQuery(query),
+    },
+  );
+
+  const provider = {
+    trialBalanceSheet,
+    isLoading: isFetching,
+    refetchSheet: refetch,
+  };
+
+  return (
+    <DashboardInsider name={'trial-balance-sheet'}>
+      <TrialBalanceSheetContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useTrialBalanceSheetContext = () => useContext(TrialBalanceSheetContext);
+
+export { TrialBalanceSheetProvider, useTrialBalanceSheetContext };

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -1,16 +1,13 @@
 import React, { useEffect, useCallback, useState } from 'react';
-import { useQuery } from 'react-query';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
-import { queryCache } from 'react-query';
 
+import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
+
+import { TrialBalanceSheetProvider } from './TrialBalanceProvider';
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import TrialBalanceSheetHeader from './TrialBalanceSheetHeader';
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-
-import { compose } from 'utils';
-import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
 
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -18,7 +15,7 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
 import withTrialBalance from './withTrialBalance';
 
-import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
+import { compose } from 'utils';
 
 /**
  * Trial balance sheet.
@@ -29,13 +26,6 @@ function TrialBalanceSheet({
   setDashboardBackLink,
   setSidebarShrink,
 
-  // #withTrialBalance
-  trialBalanceSheetRefresh,
-
-  // #withTrialBalanceActions
-  fetchTrialBalanceSheet,
-  refreshTrialBalance,
-
   // #withPreferences
   organizationName,
 }) {
@@ -48,15 +38,6 @@ function TrialBalanceSheet({
     accountsFilter: 'all-accounts',
   });
 
-  // Fetches trial balance sheet.
-  const fetchSheet = useQuery(
-    ['trial-balance-sheet', filter],
-    (key, query) =>
-      fetchTrialBalanceSheet({
-        ...transformFilterFormToQuery(query),
-      }),
-    { manual: true },
-  );
   // Change page title of the dashboard.
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'trial_balance_sheet' }));
@@ -73,6 +54,7 @@ function TrialBalanceSheet({
     };
   }, [setDashboardBackLink, setSidebarShrink]);
 
+  // Handle filter form submit.
   const handleFilterSubmit = useCallback(
     (filter) => {
       const parsedFilter = {
@@ -81,34 +63,24 @@ function TrialBalanceSheet({
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
       setFilter(parsedFilter);
-      refreshTrialBalance(true);
     },
-    [setFilter, refreshTrialBalance],
+    [setFilter],
   );
 
-  // Observes the trial balance sheet refresh to invaoid the query.
-  useEffect(() => {
-    if (trialBalanceSheetRefresh) {
-      queryCache.invalidateQueries('trial-balance-sheet');
-      refreshTrialBalance(false);
-    }
-  }, [trialBalanceSheetRefresh, refreshTrialBalance]);
-
+  // Handle numebr format form submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setFilter({
       ...filter,
       numberFormat,
     });
-    refreshTrialBalance(false);
   };
 
   return (
-    <DashboardInsider>
+    <TrialBalanceSheetProvider query={filter}>
       <TrialBalanceActionsBar
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
-
       <DashboardPageContent>
         <div class="financial-statement">
           <TrialBalanceSheetHeader
@@ -120,15 +92,15 @@ function TrialBalanceSheet({
           </div>
         </div>
       </DashboardPageContent>
-    </DashboardInsider>
+    </TrialBalanceSheetProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
   withTrialBalanceActions,
-  withTrialBalance(({ trialBalanceSheetRefresh }) => ({
-    trialBalanceSheetRefresh,
+  withTrialBalance(({ trialBalanceQuery }) => ({
+    trialBalanceQuery,
   })),
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -20,10 +20,8 @@ function TrialBalanceSheetHeader({
 
   // #withTrialBalance
   trialBalanceSheetFilter,
-  trialBalanceSheetRefresh,
 
   // #withTrialBalanceActions
-  refreshTrialBalance,
   toggleTrialBalanceFilter
 }) {
   const { formatMessage } = useIntl();

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -4,23 +4,24 @@ import { useIntl } from 'react-intl';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { CellTextSpan } from 'components/Datatable/Cells';
+import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 
-import withTrialBalance from './withTrialBalance';
-
-import { compose, getColumnWidth } from 'utils';
-
-function TrialBalanceSheetTable({
-  // #withTrialBalanceDetail
-  trialBalanceTableRows,
-  trialBalanceSheetLoading,
-
-  // #withTrialBalanceTable
-  trialBalanceQuery,
+import { getColumnWidth } from 'utils';
 
+/**
+ * Trial Balance sheet data table.
+ */
+export default function TrialBalanceSheetTable({
   companyName,
 }) {
   const { formatMessage } = useIntl();
 
+  // Trial balance sheet context.
+  const {
+    trialBalanceSheet: { tableRows, query },
+    isLoading
+  } = useTrialBalanceSheetContext();
+
   const columns = useMemo(
     () => [
       {
@@ -35,7 +36,7 @@ function TrialBalanceSheetTable({
         Cell: CellTextSpan,
         accessor: 'formatted_credit',
         className: 'credit',
-        width: getColumnWidth(trialBalanceTableRows, `credit`, {
+        width: getColumnWidth(tableRows, `credit`, {
           minWidth: 95,
         }),
       },
@@ -43,24 +44,26 @@ function TrialBalanceSheetTable({
         Header: formatMessage({ id: 'debit' }),
         Cell: CellTextSpan,
         accessor: 'formatted_debit',
-        width: getColumnWidth(trialBalanceTableRows, `debit`, { minWidth: 95 }),
+        width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
       },
       {
         Header: formatMessage({ id: 'balance' }),
         Cell: CellTextSpan,
         accessor: 'formatted_balance',
         className: 'balance',
-        width: getColumnWidth(trialBalanceTableRows, `balance`, {
+        width: getColumnWidth(tableRows, `balance`, {
           minWidth: 95,
         }),
       },
     ],
-    [trialBalanceTableRows, formatMessage],
+    [tableRows, formatMessage],
   );
 
   const rowClassNames = (row) => {
     const { original } = row;
-    const rowTypes = Array.isArray(original.rowType) ? original.rowType : [original.rowType];
+    const rowTypes = Array.isArray(original.rowType)
+      ? original.rowType
+      : [original.rowType];
 
     return {
       ...rowTypes.reduce((acc, rowType) => {
@@ -74,16 +77,16 @@ function TrialBalanceSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={formatMessage({ id: 'trial_balance_sheet' })}
-      fromDate={trialBalanceQuery.from_date}
-      toDate={trialBalanceQuery.to_date}
+      fromDate={query.from_date}
+      toDate={query.to_date}
       name="trial-balance"
-      loading={trialBalanceSheetLoading}
+      loading={isLoading}
       basis={'cash'}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={trialBalanceTableRows}
+        data={tableRows}
         expandable={true}
         expandToggleColumn={1}
         expandColumnSpace={1}
@@ -93,17 +96,3 @@ function TrialBalanceSheetTable({
     </FinancialSheet>
   );
 }
-
-export default compose(
-  withTrialBalance(
-    ({
-      trialBalanceTableRows,
-      trialBalanceSheetLoading,
-      trialBalanceQuery,
-    }) => ({
-      trialBalanceTableRows,
-      trialBalanceSheetLoading,
-      trialBalanceQuery,
-    }),
-  ),
-)(TrialBalanceSheetTable);