feat: Optimize connect component props with redux store.

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

@@ -1,23 +1,34 @@
 import React, {useEffect, useMemo, useCallback, useState} from 'react';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
 import {compose} from 'utils';
-import useAsync from 'hooks/async';
-import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
-import {useIntl} from 'react-intl';
+import { useQuery } from 'react-query';
+import { useIntl } from 'react-intl';
+import moment from 'moment';
+
 import BalanceSheetHeader from './BalanceSheetHeader';
 import BalanceSheetTable from './BalanceSheetTable';
-import moment from 'moment';
+
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import BalanceSheetActionsBar from './BalanceSheetActionsBar';
 import SettingsConnect from 'connectors/Settings.connect';
 
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withBalanceSheetActions from './withBalanceSheetActions';
+import withBalanceSheetDetail from './withBalanceSheetDetail';
+
+
 function BalanceSheet({
-  fetchBalanceSheet,
+  // #withDashboard
   changePageTitle,
-  balanceSheetLoading, 
-  getBalanceSheetIndex,
-  getBalanceSheet,
+
+  // #withBalanceSheetActions
+  fetchBalanceSheet,
+  
+  // #withBalanceSheetDetail
+  balanceSheetLoading,
+
+  // #withPreferences
   organizationSettings
 }) {
   const intl = useIntl();
@@ -30,24 +41,18 @@ function BalanceSheet({
     none_zero: false,
   });
  
-  const fetchHook = useAsync(async (query = filter) => { 
-    await Promise.all([
-      fetchBalanceSheet({ ...query }),
-    ]);
-  }, false);
+  const fetchHook = useQuery(['balance-sheet', filter],
+    (key, query) => { fetchBalanceSheet({ ...query }); });
 
   // Handle fetch the data of balance sheet.
-  const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
+  const handleFetchData = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
 
   useEffect(() => {
     changePageTitle('Balance Sheet');
   }, []);
 
-  // Retrieve balance sheet index by the given filter query.
-  const balanceSheetIndex = useMemo(() => 
-    getBalanceSheetIndex(filter),
-    [filter, getBalanceSheetIndex]);
-
   // Handle re-fetch balance sheet after filter change.
   const handleFilterSubmit = useCallback((filter) => {
     const _filter = {
@@ -56,8 +61,7 @@ function BalanceSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter({ ..._filter });
-    fetchHook.execute(_filter);
-  }, [setFilter, fetchHook]);
+  }, [setFilter]);
 
   return (
     <DashboardInsider>
@@ -73,7 +77,7 @@ function BalanceSheet({
             <BalanceSheetTable
               companyName={organizationSettings.name}
               loading={balanceSheetLoading}
-              balanceSheetIndex={balanceSheetIndex}
+              balanceSheetQuery={filter}
               onFetchData={handleFetchData} />
           </div>
         </div>
@@ -83,7 +87,11 @@ function BalanceSheet({
 }
 
 export default compose(
-  DashboardConnect,
-  BalanceSheetConnect,
+  withDashboard,
+  withBalanceSheetActions,
+  withBalanceSheetDetail(({ balanceSheetLoading }) => ({
+    balanceSheetLoading,
+  })),
+  // BalanceSheetConnect,
   SettingsConnect,
 )(BalanceSheet);

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

@@ -1,23 +1,30 @@
-import React, {useMemo, useState, useCallback, useEffect} from 'react';
-import moment from 'moment';
+import React, {useMemo, useCallback } from 'react';
+import { connect } from 'react-redux';
+
 import Money from 'components/Money';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import BalanceSheetConnect from 'connectors/BalanceSheet.connect';
-import BalanceSheetTableConnect from 'connectors/BalanceSheetTable.connect';
-import {
-  compose,
-  defaultExpanderReducer,
-} from 'utils';
+
 import SettingsConnect from 'connectors/Settings.connect';
+import withBalanceSheetDetail from './withBalanceSheetDetail';
+import {
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+import { compose, defaultExpanderReducer } from 'utils';
+
 
 function BalanceSheetTable({
+  // #withPreferences
   organizationSettings,
+
+  // #withBalanceSheetDetail
   balanceSheetAccounts,
   balanceSheetColumns,
   balanceSheetQuery,
+
+  // #ownProps
   onFetchData,
-  asDate,
   loading,
 }) {
   const columns = useMemo(() => [
@@ -130,8 +137,27 @@ function BalanceSheetTable({
   );
 }
 
+const mapStateToProps = (state, props) => {
+  const { balanceSheetQuery } = props;
+  return {
+    balanceSheetIndex: getFinancialSheetIndexByQuery(
+      state.financialStatements.balanceSheet.sheets,
+      balanceSheetQuery,
+    ),
+  };
+};
+
+const withBalanceSheetTable = connect(mapStateToProps);
+
 export default compose(
-  BalanceSheetConnect,
-  BalanceSheetTableConnect,
+  withBalanceSheetTable,
+  withBalanceSheetDetail(({
+    balanceSheetAccounts,
+    balanceSheetColumns,
+    balanceSheetQuery }) => ({
+      balanceSheetAccounts,
+      balanceSheetColumns,
+      balanceSheetQuery,
+    })),
   SettingsConnect,
 )(BalanceSheetTable);

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

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import {
+  fetchBalanceSheet,
+} from 'store/financialStatement/financialStatements.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),  
+});
+
+export default connect(null, mapDispatchToProps);

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

@@ -0,0 +1,24 @@
+import { connect } from 'react-redux';
+import {
+  getFinancialSheet,
+  getFinancialSheetAccounts,
+  getFinancialSheetColumns,
+  getFinancialSheetQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { balanceSheetIndex } = props;
+    const mapped = {
+      balanceSheet: getFinancialSheet(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+      balanceSheetAccounts: getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+      balanceSheetColumns: getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+      balanceSheetQuery: getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, balanceSheetIndex),
+      balanceSheetLoading: state.financialStatements.balanceSheet.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  
+  return connect(mapStateToProps);
+}