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

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js

@@ -1,27 +1,23 @@
-import React, { useEffect, useCallback, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { compose } from 'utils';
-import { useQuery } from 'react-query';
+
 import moment from 'moment';
 import { useIntl } from 'react-intl';
-import { queryCache } from 'react-query';
 
 import 'style/pages/FinancialStatements/BalanceSheet.scss';
 
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
-
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
+
 import { FinancialStatement } from 'components';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withSettings from 'containers/Settings/withSettings';
-import withBalanceSheetActions from './withBalanceSheetActions';
-import withBalanceSheetDetail from './withBalanceSheetDetail';
 
-import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
+import { BalanceSheetProvider } from './BalanceSheetProvider';
 
 /**
  * Balance sheet.
@@ -32,13 +28,6 @@ function BalanceSheet({
   setDashboardBackLink,
   setSidebarShrink,
 
-  // #withBalanceSheetActions
-  fetchBalanceSheet,
-  refreshBalanceSheet,
-
-  // #withBalanceSheetDetail
-  balanceSheetRefresh,
-
   // #withPreferences
   organizationName,
 }) {
@@ -51,26 +40,12 @@ function BalanceSheet({
     displayColumnsType: 'total',
     accountsFilter: 'all-accounts',
   });
-  // Fetches the balance sheet.
-  const fetchHook = useQuery(['balance-sheet', filter], (key, query) =>
-    fetchBalanceSheet({
-      ...transformFilterFormToQuery(query),
-    }),
-  );
 
   useEffect(() => {
     setSidebarShrink();
     changePageTitle(formatMessage({ id: 'balance_sheet' }));
   }, [changePageTitle, formatMessage, setSidebarShrink]);
 
-  // Observes the balance sheet refresh to invalid the query to refresh it.
-  useEffect(() => {
-    if (balanceSheetRefresh) {
-      queryCache.invalidateQueries('balance-sheet');
-      refreshBalanceSheet(false);
-    }
-  }, [balanceSheetRefresh, refreshBalanceSheet]);
-
   useEffect(() => {
     // Show the back link on dashboard topbar.
     setDashboardBackLink(true);
@@ -89,7 +64,6 @@ function BalanceSheet({
       toDate: moment(filter.toDate).format('YYYY-MM-DD'),
     };
     setFilter({ ..._filter });
-    refreshBalanceSheet(true);
   };
 
   const handleNumberFormatSubmit = (values) => {
@@ -97,11 +71,10 @@ function BalanceSheet({
       ...filter,
       numberFormat: values,
     });
-    refreshBalanceSheet(true);
   };
 
   return (
-    <DashboardInsider>
+    <BalanceSheetProvider query={filter}>
       <BalanceSheetActionsBar
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
@@ -117,16 +90,12 @@ function BalanceSheet({
           </div>
         </FinancialStatement>
       </DashboardPageContent>
-    </DashboardInsider>
+    </BalanceSheetProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
-  withBalanceSheetActions,
-  withBalanceSheetDetail(({ balanceSheetRefresh }) => ({
-    balanceSheetRefresh,
-  })),
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetActionsBar.js

@@ -18,32 +18,34 @@ import NumberFormatDropdown from 'components/NumberFormatDropdown';
 import { compose, saveInvoke } from 'utils';
 import withBalanceSheetDetail from './withBalanceSheetDetail';
 import withBalanceSheetActions from './withBalanceSheetActions';
-import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
 
 function BalanceSheetActionsBar({
   // #withBalanceSheetDetail
   balanceSheetFilter,
-  balanceSheetLoading,
 
   // #withBalanceSheetActions
   toggleBalanceSheetFilter,
-  refreshBalanceSheet,
 
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
 }) {
+  const { isLoading, refetchBalanceSheet } = useBalanceSheetContext();
+
+  // Handle filter toggle click.
   const handleFilterToggleClick = () => {
     toggleBalanceSheetFilter();
   };
 
   // Handle recalculate the report button.
   const handleRecalcReport = () => {
-    refreshBalanceSheet(true);
+    refetchBalanceSheet();
   };
 
+  // Handle number format form submit.
   const handleNumberFormatSubmit = (values) => {
-    safeInvoke(onNumberFormatSubmit, values);
+    saveInvoke(onNumberFormatSubmit, values);
   };
 
   return (
@@ -77,7 +79,7 @@ function BalanceSheetActionsBar({
             <NumberFormatDropdown
               numberFormat={numberFormat}
               onSubmit={handleNumberFormatSubmit}
-              submitDisabled={balanceSheetLoading}
+              submitDisabled={isLoading}
             />
           }
           minimal={true}

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetProvider.js

@@ -0,0 +1,27 @@
+import React, { createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useBalanceSheet } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const BalanceSheetContext = createContext();
+
+function BalanceSheetProvider({ query, ...props }) {
+  const { data: balanceSheet, isFetching, refetch } = useBalanceSheet({
+    ...transformFilterFormToQuery(query),
+  });
+
+  const provider = {
+    balanceSheet,
+    isLoading: isFetching,
+    refetchBalanceSheet: refetch
+  };
+  return (
+    <DashboardInsider name={'balance-sheet'}>
+      <BalanceSheetContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useBalanceSheetContext = () => useContext(BalanceSheetContext);
+
+export { BalanceSheetProvider, useBalanceSheetContext };

client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js

@@ -5,27 +5,26 @@ import classNames from 'classnames';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { CellTextSpan } from 'components/Datatable/Cells';
+import { useBalanceSheetContext } from './BalanceSheetProvider';
 
-import withBalanceSheetDetail from './withBalanceSheetDetail';
-
-import { compose, defaultExpanderReducer, getColumnWidth } from 'utils';
+import { defaultExpanderReducer, getColumnWidth } from 'utils';
 
 /**
  * Balance sheet table.
  */
-function BalanceSheetTable({
-  // #withBalanceSheetDetail
-  balanceSheetTableRows,
-  balanceSheetColumns,
-  balanceSheetQuery,
-  balanceSheetLoading,
-
+export default function BalanceSheetTable({
   // #ownProps
   companyName,
 }) {
   const { formatMessage } = useIntl();
 
-  const columns = useMemo(
+  // Balance sheet context.
+  const {
+    balanceSheet: { tableRows, columns, query },
+    isLoading,
+  } = useBalanceSheetContext();
+
+  const tableColumns = useMemo(
     () => [
       {
         Header: formatMessage({ id: 'account_name' }),
@@ -34,7 +33,7 @@ function BalanceSheetTable({
         textOverview: true,
         width: 240,
       },
-      ...(balanceSheetQuery.display_columns_type === 'total'
+      ...(query.display_columns_type === 'total'
         ? [
             {
               Header: formatMessage({ id: 'total' }),
@@ -45,29 +44,26 @@ function BalanceSheetTable({
             },
           ]
         : []),
-      ...(balanceSheetQuery.display_columns_type === 'date_periods'
-        ? balanceSheetColumns.map((column, index) => ({
+      ...(query.display_columns_type === 'date_periods'
+        ? columns.map((column, index) => ({
             id: `date_period_${index}`,
             Header: column,
             Cell: CellTextSpan,
             accessor: `total_periods[${index}].formatted_amount`,
             className: classNames('total-period', `total-periods-${index}`),
             width: getColumnWidth(
-              balanceSheetTableRows,
+              tableRows,
               `total_periods.${index}.formatted_amount`,
               { minWidth: 100 },
             ),
           }))
         : []),
     ],
-    [balanceSheetQuery, balanceSheetColumns, balanceSheetTableRows, formatMessage],
+    [query, columns, tableRows, formatMessage],
   );
 
   // Calculates the default expanded rows of balance sheet table.
-  const expandedRows = useMemo(
-    () => defaultExpanderReducer(balanceSheetTableRows, 4),
-    [balanceSheetTableRows],
-  );
+  const expandedRows = useMemo(() => defaultExpanderReducer(tableRows, 4), [tableRows]);
 
   const rowClassNames = useCallback((row) => {
     const { original } = row;
@@ -88,15 +84,15 @@ function BalanceSheetTable({
       name="balance-sheet"
       companyName={companyName}
       sheetType={formatMessage({ id: 'balance_sheet' })}
-      fromDate={balanceSheetQuery.from_date}
-      toDate={balanceSheetQuery.to_date}
-      basis={balanceSheetQuery.basis}
-      loading={balanceSheetLoading}
+      fromDate={query.from_date}
+      toDate={query.to_date}
+      basis={query.basis}
+      loading={isLoading}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
-        columns={columns}
-        data={balanceSheetTableRows}
+        columns={tableColumns}
+        data={tableRows}
         rowClassNames={rowClassNames}
         noInitialFetch={true}
         expandable={true}
@@ -108,19 +104,3 @@ function BalanceSheetTable({
     </FinancialSheet>
   );
 }
-
-export default compose(
-  withBalanceSheetDetail(
-    ({
-      balanceSheetTableRows,
-      balanceSheetColumns,
-      balanceSheetQuery,
-      balanceSheetLoading,
-    }) => ({
-      balanceSheetTableRows,
-      balanceSheetColumns,
-      balanceSheetQuery,
-      balanceSheetLoading,
-    }),
-  ),
-)(BalanceSheetTable);

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);
+}

client/src/containers/FinancialStatements/Journal/Journal.js

@@ -1,8 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
-import { useQuery } from 'react-query';
 import moment from 'moment';
 import { useIntl } from 'react-intl';
-import { queryCache } from 'react-query';
 
 import { compose } from 'utils';
 import JournalTable from './JournalTable';
@@ -10,9 +8,9 @@ import JournalTable from './JournalTable';
 import JournalHeader from './JournalHeader';
 import JournalActionsBar from './JournalActionsBar';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import withSettings from 'containers/Settings/withSettings';
+import { JournalSheetProvider } from './JournalProvider';
 
+import withSettings from 'containers/Settings/withSettings';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withJournalActions from './withJournalActions';
 import withJournal from './withJournal';
@@ -21,14 +19,10 @@ import { transformFilterFormToQuery } from 'containers/FinancialStatements/commo
 
 import 'style/pages/FinancialStatements/Journal.scss';
 
+/**
+ * Journal sheet.
+ */
 function Journal({
-  // #withJournalActions
-  requestFetchJournalSheet,
-  refreshJournalSheet,
-
-  // #withJournal
-  journalSheetRefresh,
-
   // #withDashboardActions
   changePageTitle,
   setDashboardBackLink,
@@ -44,12 +38,6 @@ function Journal({
   });
   const { formatMessage } = useIntl();
 
-  const fetchJournalSheet = useQuery(['journal-sheet', filter], (key, query) =>
-    requestFetchJournalSheet({
-      ...transformFilterFormToQuery(filter),
-    }),
-  );
-
   useEffect(() => {
     changePageTitle(formatMessage({ id: 'journal_sheet' }));
   }, [changePageTitle, formatMessage]);
@@ -65,13 +53,6 @@ function Journal({
     };
   }, [setDashboardBackLink, setSidebarShrink]);
 
-  useEffect(() => {
-    if (journalSheetRefresh) {
-      queryCache.invalidateQueries('journal-sheet');
-      refreshJournalSheet(false);
-    }
-  }, [journalSheetRefresh, refreshJournalSheet]);
-
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback(
     (filter) => {
@@ -81,12 +62,12 @@ function Journal({
         toDate: moment(filter.toDate).format('YYYY-MM-DD'),
       };
       setFilter(_filter);
-      queryCache.invalidateQueries('journal-sheet');
     },
     [setFilter],
   );
+
   return (
-    <DashboardInsider>
+    <JournalSheetProvider query={filter}>
       <JournalActionsBar />
 
       <DashboardPageContent>
@@ -95,7 +76,6 @@ function Journal({
             onSubmitFilter={handleFilterSubmit}
             pageFilter={filter}
           />
-
           <div class="financial-statement__body">
             <JournalTable
               companyName={organizationName}
@@ -104,7 +84,7 @@ function Journal({
           </div>
         </div>
       </DashboardPageContent>
-    </DashboardInsider>
+    </JournalSheetProvider>
   );
 }
 

client/src/containers/FinancialStatements/Journal/JournalActionsBar.js

@@ -17,6 +17,7 @@ import withJournalActions from './withJournalActions';
 import withJournal from './withJournal';
 
 import { compose } from 'utils';
+import { useJournalSheetContext } from './JournalProvider';
 
 /**
  * Journal sheeet - Actions bar.
@@ -27,14 +28,17 @@ function JournalActionsBar({
 
   // #withJournalActions
   toggleJournalSheetFilter,
-  refreshJournalSheet,
 }) {
+  const { refetchSheet } = useJournalSheetContext();
+
+  // Handle filter toggle click.
   const handleFilterToggleClick = () => {
     toggleJournalSheetFilter();
   };
 
+  // Handle re-calc the report.
   const handleRecalcReport = () => {
-    refreshJournalSheet(true);
+    refetchSheet();
   };
 
   return (

client/src/containers/FinancialStatements/Journal/JournalProvider.js

@@ -0,0 +1,31 @@
+import React, { createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useJournalSheet } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const JournalSheetContext = createContext();
+
+/**
+ * Journal sheet provider.
+ */
+function JournalSheetProvider({ query, ...props }) {
+  const { data: journalSheet, isFetching, refetch } = useJournalSheet({
+    ...transformFilterFormToQuery(query)
+  });
+
+  const provider = {
+    journalSheet,
+    isLoading: isFetching,
+    refetchSheet: refetch
+  };
+
+  return (
+    <DashboardInsider name={'balance-sheet'}>
+      <JournalSheetContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useJournalSheetContext = () => useContext(JournalSheetContext);
+
+export { JournalSheetProvider, useJournalSheetContext };

client/src/containers/FinancialStatements/Journal/JournalTable.js

@@ -4,24 +4,23 @@ import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import Money from 'components/Money';
+import { useJournalSheetContext } from './JournalProvider';
 
-import withJournal from './withJournal';
-
-import { compose, defaultExpanderReducer, getForceWidth } from 'utils';
-
-function JournalSheetTable({
-  // #withJournal
-  journalSheetTableRows,
-  journalSheetLoading,
-  journalSheetQuery,
+import { defaultExpanderReducer, getForceWidth } from 'utils';
 
+export default function JournalSheetTable({
   // #ownProps
   onFetchData,
   companyName,
 }) {
   const { formatMessage } = useIntl();
 
+  // Journal sheet context.
+  const {
+    journalSheet: { tableRows, query },
+    isLoading
+  } = useJournalSheetContext();
+
   const columns = useMemo(
     () => [
       {
@@ -101,17 +100,17 @@ function JournalSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={formatMessage({ id: 'journal_sheet' })}
-      fromDate={journalSheetQuery.from_date}
-      toDate={journalSheetQuery.to_date}
+      fromDate={query.from_date}
+      toDate={query.to_date}
       name="journal"
-      loading={journalSheetLoading}
+      loading={isLoading}
       // minimal={true}
       fullWidth={true}
       >
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={journalSheetTableRows}
+        data={tableRows}
         rowClassNames={rowClassNames}
         onFetchData={handleFetchData}
         noResults={formatMessage({
@@ -122,14 +121,4 @@ function JournalSheetTable({
       />
     </FinancialSheet>
   );
-}
-
-export default compose(
-  withJournal(
-    ({ journalSheetTableRows, journalSheetLoading, journalSheetQuery }) => ({
-      journalSheetTableRows,
-      journalSheetLoading,
-      journalSheetQuery,
-    }),
-  ),
-)(JournalSheetTable);
+}

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js

@@ -19,26 +19,30 @@ import withProfitLossActions from './withProfitLossActions';
 import withProfitLoss from './withProfitLoss';
 
 import { compose, saveInvoke } from 'utils';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
 
+/**
+ * Profit/Loss sheet actions bar.
+ */
 function ProfitLossActionsBar({
   // #withProfitLoss
   profitLossSheetFilter,
-  profitLossSheetLoading,
 
   // #withProfitLossActions
   toggleProfitLossSheetFilter,
-  refreshProfitLossSheet,
 
   // #ownProps
   numberFormat,
   onNumberFormatSubmit,
 }) {
+  const { sheetRefetch, isLoading } = useProfitLossSheetContext();
+
   const handleFilterClick = () => {
     toggleProfitLossSheetFilter();
   };
 
   const handleRecalcReport = () => {
-    refreshProfitLossSheet(true);
+    sheetRefetch();
   };
   // Handle number format submit.
   const handleNumberFormatSubmit = (values) => {
@@ -76,7 +80,7 @@ function ProfitLossActionsBar({
             <NumberFormatDropdown
               numberFormat={numberFormat}
               onSubmit={handleNumberFormatSubmit}
-              submitDisabled={profitLossSheetLoading}
+              submitDisabled={isLoading}
             />
           }
           minimal={true}

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossProvider.js

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
+import { useProfitLossSheet } from 'hooks/query';
+import { transformFilterFormToQuery } from '../common';
+
+const ProfitLossSheetContext = createContext();
+
+function ProfitLossSheetProvider({ query, ...props }) {
+  const { data: profitLossSheet, isFetching, refetch } = useProfitLossSheet({
+    ...transformFilterFormToQuery(query),
+  });
+
+  const provider = {
+    profitLossSheet,
+    isLoading: isFetching,
+    sheetRefetch: refetch,
+  };
+
+  return (
+    <DashboardInsider>
+      <ProfitLossSheetContext.Provider value={provider} {...props} />
+    </DashboardInsider>
+  );
+}
+
+const useProfitLossSheetContext = () => useContext(ProfitLossSheetContext);
+
+export { useProfitLossSheetContext, ProfitLossSheetProvider };

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -1,25 +1,20 @@
-import React, {useState, useCallback, useEffect} from 'react';
+import React, { useState, useEffect } from 'react';
 import moment from 'moment';
-import {compose} from 'utils';
-import { useQuery } from 'react-query';
+import { compose } from 'utils';
 import { useIntl } from 'react-intl';
-import { queryCache } from 'react-query';
 
 import ProfitLossSheetHeader from './ProfitLossSheetHeader';
 import ProfitLossSheetTable from './ProfitLossSheetTable';
 import ProfitLossActionsBar from './ProfitLossActionsBar';
 
-import DashboardInsider from 'components/Dashboard/DashboardInsider'
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 import withProfitLossActions from './withProfitLossActions';
-import withProfitLoss from './withProfitLoss';
 import withSettings from 'containers/Settings/withSettings';
 
-import { transformFilterFormToQuery } from 'containers/FinancialStatements/common';
-
 import 'style/pages/FinancialStatements/ProfitLossSheet.scss';
+import { ProfitLossSheetProvider } from './ProfitLossProvider';
 
 /**
  * Profit/Loss financial statement sheet.
@@ -29,13 +24,6 @@ function ProfitLossSheet({
   changePageTitle,
   setDashboardBackLink,
   setSidebarShrink,
-  
-  // #withProfitLoss
-  profitLossSheetRefresh,
-
-  // #withProfitLossActions
-  fetchProfitLossSheet,
-  refreshProfitLossSheet,
 
   // #withPreferences
   organizationName,
@@ -54,16 +42,8 @@ function ProfitLossSheet({
     changePageTitle(formatMessage({ id: 'profit_loss_sheet' }));
   }, [changePageTitle, formatMessage]);
 
-  // Observes the P&L sheet refresh to invalid the query to refresh it.
   useEffect(() => {
-    if (profitLossSheetRefresh) {
-      refreshProfitLossSheet(false);
-      queryCache.invalidateQueries('profit-loss-sheet');
-    }
-  }, [profitLossSheetRefresh, refreshProfitLossSheet]);
-
-  useEffect(() => {
-    setSidebarShrink()
+    setSidebarShrink();
     // Show the back link on dashboard topbar.
     setDashboardBackLink(true);
 
@@ -71,12 +51,7 @@ function ProfitLossSheet({
       // Hide the back link on dashboard topbar.
       setDashboardBackLink(false);
     };
-  },[setDashboardBackLink,setSidebarShrink]);
-
-  // Fetches profit/loss sheet.
-  const fetchSheetHook = useQuery(['profit-loss-sheet', filter],
-    (key, query) => fetchProfitLossSheet({ ...transformFilterFormToQuery(query) }),
-    { manual: true });
+  }, [setDashboardBackLink, setSidebarShrink]);
 
   // Handle submit filter.
   const handleSubmitFilter = (filter) => {
@@ -87,6 +62,7 @@ function ProfitLossSheet({
     };
     setFilter(_filter);
   };
+
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     setFilter({
@@ -96,34 +72,34 @@ function ProfitLossSheet({
   };
 
   return (
-    <DashboardInsider>
+    <ProfitLossSheetProvider query={filter}>
       <ProfitLossActionsBar
         numberFormat={filter.numberFormat}
         onNumberFormatSubmit={handleNumberFormatSubmit}
       />
- 
+
       <DashboardPageContent>
         <div class="financial-statement">
           <ProfitLossSheetHeader
             pageFilter={filter}
-            onSubmitFilter={handleSubmitFilter} />
+            onSubmitFilter={handleSubmitFilter}
+          />
 
           <div class="financial-statement__body">
             <ProfitLossSheetTable
               companyName={organizationName}
-              profitLossQuery={filter} />
+            />
           </div>
         </div>
       </DashboardPageContent>
-    </DashboardInsider>
+    </ProfitLossSheetProvider>
   );
 }
 
 export default compose(
   withDashboardActions,
   withProfitLossActions,
-  withProfitLoss(({ profitLossSheetRefresh }) => ({ profitLossSheetRefresh })),
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),
-)(ProfitLossSheet);
+)(ProfitLossSheet);

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -5,22 +5,22 @@ import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import { CellTextSpan } from 'components/Datatable/Cells';
 
-import { compose, defaultExpanderReducer, getColumnWidth } from 'utils';
-import withProfitLossDetail from './withProfitLoss';
-
-function ProfitLossSheetTable({
-  // #withProfitLoss
-  profitLossTableRows,
-  profitLossQuery,
-  profitLossColumns,
-  profitLossSheetLoading,
+import { defaultExpanderReducer, getColumnWidth } from 'utils';
+import { useProfitLossSheetContext } from './ProfitLossProvider';
 
+export default function ProfitLossSheetTable({
   // #ownProps
   companyName,
 }) {
   const { formatMessage } = useIntl();
 
-  const columns = useMemo(
+  // Profit/Loss sheet context.
+  const {
+    profitLossSheet: { tableRows, query, columns },
+    isLoading
+  } = useProfitLossSheetContext();
+
+  const tableColumns = useMemo(
     () => [
       {
         Header: formatMessage({ id: 'account' }),
@@ -29,7 +29,7 @@ function ProfitLossSheetTable({
         textOverview: true,
         width: 240,
       },
-      ...(profitLossQuery.display_columns_type === 'total'
+      ...(query.display_columns_type === 'total'
         ? [
             {
               Header: formatMessage({ id: 'total' }),
@@ -40,14 +40,14 @@ function ProfitLossSheetTable({
             },
           ]
         : []),
-      ...(profitLossQuery.display_columns_type === 'date_periods'
-        ? profitLossColumns.map((column, index) => ({
+      ...(query.display_columns_type === 'date_periods'
+        ? columns.map((column, index) => ({
             id: `date_period_${index}`,
             Header: column,
             Cell: CellTextSpan,
             accessor: `total_periods[${index}].formatted_amount`,
             width: getColumnWidth(
-              profitLossTableRows,
+              tableRows,
               `total_periods.${index}.formatted_amount`,
               { minWidth: 100 },
             ),
@@ -56,17 +56,17 @@ function ProfitLossSheetTable({
         : []),
     ],
     [
-      profitLossQuery.display_columns_type,
-      profitLossTableRows,
-      profitLossColumns,
+      query.display_columns_type,
+      tableRows,
+      columns,
       formatMessage,
     ],
   );
 
   // Retrieve default expanded rows of balance sheet.
   const expandedRows = useMemo(
-    () => defaultExpanderReducer(profitLossTableRows, 3),
-    [profitLossTableRows],
+    () => defaultExpanderReducer(tableRows, 3),
+    [tableRows],
   );
 
   // Retrieve conditional datatable row classnames.
@@ -86,16 +86,16 @@ function ProfitLossSheetTable({
     <FinancialSheet
       companyName={companyName}
       sheetType={<T id={'profit_loss_sheet'} />}
-      fromDate={profitLossQuery.from_date}
-      toDate={profitLossQuery.to_date}
+      fromDate={query.from_date}
+      toDate={query.to_date}
       name="profit-loss-sheet"
-      loading={profitLossSheetLoading}
-      basis={profitLossQuery.basis}
+      loading={isLoading}
+      basis={query.basis}
     >
       <DataTable
         className="bigcapital-datatable--financial-report"
-        columns={columns}
-        data={profitLossTableRows}
+        columns={tableColumns}
+        data={tableRows}
         noInitialFetch={true}
         expanded={expandedRows}
         rowClassNames={rowClassNames}
@@ -107,19 +107,3 @@ function ProfitLossSheetTable({
     </FinancialSheet>
   );
 }
-
-export default compose(
-  withProfitLossDetail(
-    ({
-      profitLossQuery,
-      profitLossColumns,
-      profitLossTableRows,
-      profitLossSheetLoading,
-    }) => ({
-      profitLossColumns,
-      profitLossQuery,
-      profitLossTableRows,
-      profitLossSheetLoading,
-    }),
-  ),
-)(ProfitLossSheetTable);

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);

client/src/containers/FinancialStatements/reducers.js

@@ -0,0 +1,228 @@
+import { chain } from 'lodash';
+import moment from 'moment';
+
+export const balanceSheetRowsReducer = (accounts) => {
+  return accounts.map((account) => {
+    return {
+      ...account,
+      children: balanceSheetRowsReducer([
+        ...(account.children ? account.children : []),
+        ...(account.total && account.children && account.children.length > 0
+          ? [
+              {
+                name: `Total ${account.name}`,
+                row_types: ['total-row', account.section_type],
+                total: { ...account.total },
+                ...(account.total_periods && {
+                  total_periods: account.total_periods,
+                }),
+              },
+            ]
+          : []),
+      ]),
+    };
+  });
+};
+
+export const trialBalanceSheetReducer = (sheet) => {
+  const results = [];
+
+  if (sheet.accounts) {
+    sheet.accounts.forEach((account) => {
+      results.push(account);
+    });
+  }
+  if (sheet.total) {
+    results.push({
+      rowType: 'total',
+      ...sheet.total,
+    });
+  }
+  return results;
+};
+
+export const profitLossSheetReducer = (profitLoss) => {
+  const results = [];
+
+  if (profitLoss.income) {
+    results.push({
+      name: 'Income',
+      total: profitLoss.income.total,
+      children: [
+        ...profitLoss.income.accounts,
+        {
+          name: 'Total Income',
+          total: profitLoss.income.total,
+          total_periods: profitLoss.income.total_periods,
+          rowTypes: ['income_total', 'section_total', 'total'],
+        },
+      ],
+      total_periods: profitLoss.income.total_periods,
+    });
+  }
+  if (profitLoss.cost_of_sales) {
+    results.push({
+      name: 'Cost of sales',
+      total: profitLoss.cost_of_sales.total,
+      children: [
+        ...profitLoss.cost_of_sales.accounts,
+        {
+          name: 'Total cost of sales',
+          total: profitLoss.cost_of_sales.total,
+          total_periods: profitLoss.cost_of_sales.total_periods,
+          rowTypes: ['cogs_total', 'section_total', 'total'],
+        },
+      ],
+      total_periods: profitLoss.cost_of_sales.total_periods,
+    });
+  }
+  if (profitLoss.gross_profit) {
+    results.push({
+      name: 'Gross profit',
+      total: profitLoss.gross_profit.total,
+      total_periods: profitLoss.gross_profit.total_periods,
+      rowTypes: ['gross_total', 'section_total', 'total'],
+    });
+  }
+  if (profitLoss.expenses) {
+    results.push({
+      name: 'Expenses',
+      total: profitLoss.expenses.total,
+      children: [
+        ...profitLoss.expenses.accounts,
+        {
+          name: 'Total Expenses',
+          total: profitLoss.expenses.total,
+          total_periods: profitLoss.expenses.total_periods,
+          rowTypes: ['expenses_total', 'section_total', 'total'],
+        },
+      ],
+      total_periods: profitLoss.expenses.total_periods,
+    });
+  }
+  if (profitLoss.operating_profit) {
+    results.push({
+      name: 'Net Operating income',
+      total: profitLoss.operating_profit.total,
+      total_periods: profitLoss.income.total_periods,
+      rowTypes: ['net_operating_total', 'section_total', 'total'],
+    });
+  }
+  if (profitLoss.other_income) {
+    results.push({
+      name: 'Other Income',
+      total: profitLoss.other_income.total,
+      total_periods: profitLoss.other_income.total_periods,
+      children: [
+        ...profitLoss.other_income.accounts,
+        {
+          name: 'Total other income',
+          total: profitLoss.other_income.total,
+          total_periods: profitLoss.other_income.total_periods,
+          rowTypes: ['expenses_total', 'section_total', 'total'],
+        },
+      ],
+    });
+  }
+  if (profitLoss.other_expenses) {
+    results.push({
+      name: 'Other expenses',
+      total: profitLoss.other_expenses.total,
+      total_periods: profitLoss.other_expenses.total_periods,
+      children: [
+        ...profitLoss.other_expenses.accounts,
+        {
+          name: 'Total other expenses',
+          total: profitLoss.other_expenses.total,
+          total_periods: profitLoss.other_expenses.total_periods,
+          rowTypes: ['expenses_total', 'section_total', 'total'],
+        },
+      ],
+    });
+  }
+  if (profitLoss.net_income) {
+    results.push({
+      name: 'Net Income',
+      total: profitLoss.net_income.total,
+      total_periods: profitLoss.net_income.total_periods,
+      rowTypes: ['net_income_total', 'section_total', 'total'],
+    });
+  }
+  return results;
+};
+
+export const journalTableRowsReducer = (journal) => {
+  const TYPES = {
+    ENTRY: 'ENTRY',
+    TOTAL_ENTRIES: 'TOTAL_ENTRIES',
+    EMPTY_ROW: 'EMPTY_ROW',
+  };
+
+  const entriesMapper = (transaction) => {
+    return transaction.entries.map((entry, index) => ({
+      ...(index === 0
+        ? {
+            date: transaction.date,
+            reference_type: transaction.reference_type,
+            reference_id: transaction.reference_id,
+            reference_type_formatted: transaction.reference_type_formatted,
+          }
+        : {}),
+      rowType: TYPES.ENTRY,
+      ...entry,
+    }));
+  };
+
+  return chain(journal)
+    .map((transaction) => {
+      const entries = entriesMapper(transaction);
+
+      return [
+        ...entries,
+        {
+          rowType: TYPES.TOTAL_ENTRIES,
+          currency_code: transaction.currency_code,
+          credit: transaction.credit,
+          debit: transaction.debit,
+          formatted_credit: transaction.formatted_credit,
+          formatted_debit: transaction.formatted_debit,
+        },
+        {
+          rowType: TYPES.EMPTY_ROW,
+        },
+      ];
+    })
+    .flatten()
+    .value();
+};
+
+export const generalLedgerTableRowsReducer = (accounts) => {
+  return chain(accounts)
+    .map((account) => {
+      return {
+        name: '',
+        code: account.code,
+        rowType: 'ACCOUNT_ROW',
+        date: account.name,
+        children: [
+          {
+            ...account.opening_balance,
+            name: 'Opening balance',
+            rowType: 'OPENING_BALANCE',
+          },
+          ...account.transactions.map((transaction) => ({
+            ...transaction,
+            name: account.name,
+            code: account.code,
+            date: moment(transaction.date).format('DD MMM YYYY'),
+          })),
+          {
+            ...account.closing_balance,
+            name: 'Closing balance',
+            rowType: 'CLOSING_BALANCE',
+          },
+        ],
+      };
+    })
+    .value();
+};