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

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