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

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -1,15 +1,15 @@
 import React, { useEffect, useCallback, useState } from 'react';
 import moment from 'moment';
-import { useQuery } from 'react-query';
 import { useIntl } from 'react-intl';
-import { queryCache } from 'react-query';
 
-import GeneralLedgerTable from 'containers/FinancialStatements/GeneralLedger/GeneralLedgerTable';
+import 'style/pages/FinancialStatements/GeneralLedger.scss';
+
+import GeneralLedgerTable from './GeneralLedgerTable';
 import GeneralLedgerHeader from './GeneralLedgerHeader';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
+import { GeneralLedgerProvider } from './GeneralLedgerProvider';
 
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -19,9 +19,6 @@ import withSettings from 'containers/Settings/withSettings';
 import { compose } from 'utils';
 
 import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
-import withGeneralLedger from './withGeneralLedger';
-
-import 'style/pages/FinancialStatements/GeneralLedger.scss';
 
 /**
  * General Ledger (GL) sheet.
@@ -32,15 +29,8 @@ function GeneralLedger({
   setDashboardBackLink,
 
   // #withGeneralLedgerActions
-  fetchGeneralLedger,
   refreshGeneralLedgerSheet,
 
-  // #withAccountsActions
-  requestFetchAccounts,
-
-  // #withGeneralLedger
-  generalLedgerSheetRefresh,
-
   // #withSettings
   organizationName,
 }) {
@@ -66,24 +56,7 @@ function GeneralLedger({
       setDashboardBackLink(false);
     };
   });
-
-  // Observes the GL sheet refresh to invalid the query to refresh it.
-  useEffect(() => {
-    if (generalLedgerSheetRefresh) {
-      queryCache.invalidateQueries('general-ledger');
-      refreshGeneralLedgerSheet(false);
-    }
-  }, [generalLedgerSheetRefresh, refreshGeneralLedgerSheet]);
-
-  // Fetches accounts list.
-  const fetchAccounts = useQuery(['accounts-list'], () =>
-    requestFetchAccounts(),
-  );
-  // Fetches the general ledger sheet.
-  const fetchSheet = useQuery(['general-ledger', filter], (key, q) =>
-    fetchGeneralLedger({ ...transformFilterFormToQuery(q) }),
-  );
-
+  
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
     (filter) => {
@@ -99,7 +72,7 @@ function GeneralLedger({
   );
 
   return (
-    <DashboardInsider>
+    <GeneralLedgerProvider query={filter}>
       <GeneralLedgerActionsBar />
 
       <DashboardPageContent>
@@ -117,7 +90,7 @@ function GeneralLedger({
           </div>
         </div>
       </DashboardPageContent>
-    </DashboardInsider>
+    </GeneralLedgerProvider>
   );
 }
 
@@ -125,9 +98,6 @@ export default compose(
   withGeneralLedgerActions,
   withDashboardActions,
   withAccountsActions,
-  withGeneralLedger(({ generalLedgerSheetRefresh }) => ({
-    generalLedgerSheetRefresh,
-  })),
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js

@@ -18,6 +18,7 @@ import withGeneralLedger from './withGeneralLedger';
 import withGeneralLedgerActions from './withGeneralLedgerActions';
 
 import { compose } from 'utils';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 
 /**
  * General ledger - Actions bar.
@@ -28,15 +29,17 @@ function GeneralLedgerActionsBar({
 
   // #withGeneralLedgerActions
   toggleGeneralLedgerSheetFilter,
-  refreshGeneralLedgerSheet,
 }) {
+  const { sheetRefresh } = useGeneralLedgerContext();
+
   // Handle customize button click.
   const handleCustomizeClick = () => {
     toggleGeneralLedgerSheetFilter();
   };
+
   // Handle re-calculate button click.
   const handleRecalcReport = () => {
-    refreshGeneralLedgerSheet(true);
+    sheetRefresh();
   };
 
   return (

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerProvider.js

@@ -0,0 +1,32 @@
+import React, { createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useGeneralLedgerSheet, useAccounts } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const GeneralLedgerContext = createContext();
+
+function GeneralLedgerProvider({ query, ...props }) {
+  const { data: generalLedger, isFetching, refetch } = useGeneralLedgerSheet({
+    ...transformFilterFormToQuery(query),
+  });
+
+  // Accounts list.
+  const { data: accounts, isFetching: isAccountsLoading } = useAccounts();
+
+  const provider = {
+    generalLedger,
+    accounts,
+    sheetRefresh: refetch,
+    isSheetLoading: isFetching,
+    isAccountsLoading,
+  };
+  return (
+    <DashboardInsider name={'general-ledger-sheet'}>
+      <GeneralLedgerContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useGeneralLedgerContext = () => useContext(GeneralLedgerContext);
+
+export { GeneralLedgerProvider, useGeneralLedgerContext };

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -1,31 +1,28 @@
-import React, { useCallback, useMemo } from 'react';
-import moment from 'moment';
-import { defaultExpanderReducer, compose } from 'utils';
+import React, { useMemo } from 'react';
+
+import { defaultExpanderReducer } from 'utils';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import Money from 'components/Money';
 
-import withGeneralLedger from './withGeneralLedger';
 import { getForceWidth, getColumnWidth } from 'utils';
+import { useGeneralLedgerContext } from './GeneralLedgerProvider';
 
-const ROW_TYPE = {
-  CLOSING_BALANCE: 'closing_balance',
-  OPENING_BALANCE: 'opening_balance',
-  ACCOUNT: 'account_name',
-  TRANSACTION: 'transaction',
-};
-
-function GeneralLedgerTable({
+/**
+ * General ledger table.
+ */
+export default function GeneralLedgerTable({
   companyName,
-
-  generalLedgerSheetLoading,
-  generalLedgerTableRows,
-  generalLedgerQuery,
 }) {
   const { formatMessage } = useIntl();
 
+  // General ledger context.
+  const {
+    generalLedger: { tableRows, query },
+    isSheetLoading
+  } = useGeneralLedgerContext();
+
   const columns = useMemo(
     () => [
       {
@@ -75,7 +72,7 @@ function GeneralLedgerTable({
         Header: formatMessage({ id: 'credit' }),
         accessor: 'formatted_credit',
         className: 'credit',
-        width: getColumnWidth(generalLedgerTableRows, 'formatted_credit', {
+        width: getColumnWidth(tableRows, 'formatted_credit', {
           minWidth: 100,
           magicSpacing: 10,
         }),
@@ -84,7 +81,7 @@ function GeneralLedgerTable({
         Header: formatMessage({ id: 'debit' }),
         accessor: 'formatted_debit',
         className: 'debit',
-        width: getColumnWidth(generalLedgerTableRows, 'formatted_debit', {
+        width: getColumnWidth(tableRows, 'formatted_debit', {
           minWidth: 100,
           magicSpacing: 10,
         }),
@@ -93,7 +90,7 @@ function GeneralLedgerTable({
         Header: formatMessage({ id: 'amount' }),
         accessor: 'formatted_amount',
         className: 'amount',
-        width: getColumnWidth(generalLedgerTableRows, 'formatted_amount', {
+        width: getColumnWidth(tableRows, 'formatted_amount', {
           minWidth: 100,
           magicSpacing: 10,
         }),
@@ -102,19 +99,19 @@ function GeneralLedgerTable({
         Header: formatMessage({ id: 'running_balance' }),
         accessor: 'formatted_running_balance',
         className: 'running_balance',
-        width: getColumnWidth(generalLedgerTableRows, 'formatted_running_balance', {
+        width: getColumnWidth(tableRows, 'formatted_running_balance', {
           minWidth: 100,
           magicSpacing: 10,
         }),
       },
     ],
-    [formatMessage, generalLedgerTableRows],
+    [formatMessage, tableRows],
   );
 
   // Default expanded rows of general ledger table.
   const expandedRows = useMemo(
-    () => defaultExpanderReducer(generalLedgerTableRows, 1),
-    [generalLedgerTableRows],
+    () => defaultExpanderReducer(tableRows, 1),
+    [tableRows],
   );
 
   const rowClassNames = (row) => [`row-type--${row.original.rowType}`];
@@ -123,10 +120,10 @@ function GeneralLedgerTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={formatMessage({ id: 'general_ledger_sheet' })}
-      fromDate={generalLedgerQuery.from_date}
-      toDate={generalLedgerQuery.to_date}
+      fromDate={query.from_date}
+      toDate={query.to_date}
       name="general-ledger"
-      loading={generalLedgerSheetLoading}
+      loading={isSheetLoading}
       fullWidth={true}
     >
       <DataTable
@@ -135,7 +132,7 @@ function GeneralLedgerTable({
           id: 'this_report_does_not_contain_any_data_between_date_period',
         })}
         columns={columns}
-        data={generalLedgerTableRows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         expanded={expandedRows}
         virtualizedRows={true}
@@ -147,18 +144,4 @@ function GeneralLedgerTable({
       />
     </FinancialSheet>
   );
-}
-
-export default compose(
-  withGeneralLedger(
-    ({
-      generalLedgerTableRows,
-      generalLedgerSheetLoading,
-      generalLedgerQuery,
-    }) => ({
-      generalLedgerTableRows,
-      generalLedgerSheetLoading,
-      generalLedgerQuery,
-    }),
-  ),
-)(GeneralLedgerTable);
+}