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

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

@@ -1,23 +1,32 @@
-import React, {useState, useCallback, useEffect, useMemo} from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
+import { useQuery } from 'react-query';
 import {compose} from 'utils';
-import JournalConnect from 'connectors/Journal.connect';
-import JournalHeader from 'containers/FinancialStatements/Journal/JournalHeader';
-import useAsync from 'hooks/async';
-import {useIntl} from 'react-intl';
+
 import moment from 'moment';
 import JournalTable from './JournalTable';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
+import JournalHeader from './JournalHeader';
 import JournalActionsBar from './JournalActionsBar';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import SettingsConnect from 'connectors/Settings.connect';
 
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withJournal from './withJournal';
+import withJournalActions from './withJournalActions';
+
+
 function Journal({
-  fetchJournalSheet,
-  getJournalSheet,
-  getJournalSheetIndex,
-  changePageTitle,
+  // #withJournalActions
+  requestFetchJournalSheet,
+
+  // #withDashboard
+  changePageTitle,  
+
+  // #withJournal
   journalSheetLoading,
+
+  // #withPreferences
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -30,21 +39,8 @@ function Journal({
     changePageTitle('Journal Sheet');
   }, []);
 
-  const fetchHook = useAsync((query = filter) => {
-    return Promise.all([
-      fetchJournalSheet(query),    
-    ]);
-  }, false);
-
-  // Retrieve journal sheet index by the given filter query.
-  const journalSheetIndex = useMemo(() => 
-    getJournalSheetIndex(filter),
-    [getJournalSheetIndex, filter]);
-
-  // Retrieve journal sheet by the given sheet index.
-  const journalSheet = useMemo(() => 
-    getJournalSheet(journalSheetIndex),
-    [getJournalSheet, journalSheetIndex]);
+  const fetchHook = useQuery(['journal', filter],
+    (key, query) => { requestFetchJournalSheet(query); });
 
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback((filter) => {
@@ -54,7 +50,6 @@ function Journal({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
-    fetchHook.execute(_filter);
   }, [fetchHook]);
 
   const handlePrintClick = useCallback(() => {
@@ -66,7 +61,7 @@ function Journal({
   }, []);
 
   const handleFetchData = useCallback(({ sortBy, pageIndex, pageSize }) => {
-    fetchHook.execute();
+    fetchHook.refetch();
   }, [fetchHook]);
 
   return (
@@ -85,12 +80,9 @@ function Journal({
           <div class="financial-statement__table">
             <JournalTable
               companyName={organizationSettings.name}
-              data={[
-                ...(journalSheet && journalSheet.tableRows)
-                  ? journalSheet.tableRows : []
-              ]}
+              journalQuery={filter}
               loading={journalSheetLoading}
-              onFetchData={handleFetchData} />              
+              onFetchData={handleFetchData} />
           </div>
         </div>
       </DashboardPageContent>
@@ -99,7 +91,10 @@ function Journal({
 }
 
 export default compose(
-  JournalConnect,
-  DashboardConnect,
+  withDashboard,
+  withJournalActions,
+  withJournal(({ journalSheetLoading }) => ({
+    journalSheetLoading,
+  })),
   SettingsConnect,
 )(Journal);

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

@@ -28,9 +28,9 @@ export default function JournalHeader({
       from_date: Yup.date().required(),
       to_date: Yup.date().min(Yup.ref('from_date')).required(),
     }),
-    onSubmit: (values, actions) => {
+    onSubmit: (values, { setSubmitting }) => {
       onSubmitFilter(values);
-      actions.setSubmitting(false);
+      setSubmitting(false);
     },
   });
 

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

@@ -1,18 +1,25 @@
-import React, {useState, useEffect, useCallback, useMemo} from 'react';
+import React, { useCallback, useMemo } from 'react';
+import {connect} from 'react-redux';
+import moment from 'moment';
+
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import {compose, defaultExpanderReducer} from 'utils';
-import moment from 'moment';
-import JournalConnect from 'connectors/Journal.connect';
-import {
-  getFinancialSheet,
-} from 'store/financialStatement/financialStatements.selectors';
-import {connect} from 'react-redux';
+
 import Money from 'components/Money';
+import {
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+import withJournal from './withJournal';
+
 
 function JournalSheetTable({
+  // #withJournal
+  journalSheetTableRows,
+
+  // #ownProps
   onFetchData,
-  data,
   loading,
   companyName,
 }) {
@@ -73,7 +80,7 @@ function JournalSheetTable({
   }, [onFetchData]);
 
   // Default expanded rows of general journal table.
-  const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
+  const expandedRows = useMemo(() => defaultExpanderReducer([], 1), []);
 
   return (
     <FinancialSheet
@@ -82,11 +89,11 @@ function JournalSheetTable({
       date={new Date()}
       name="journal"
       loading={loading}>
-      
+ 
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={data}
+        data={journalSheetTableRows}
         onFetchData={handleFetchData}
         noResults={"This report does not contain any data."}
         expanded={expandedRows}
@@ -95,6 +102,19 @@ function JournalSheetTable({
   );
 }
 
+
+const mapStateToProps = (state, props) => {
+  const { journalQuery } = props;
+  return {
+    journalIndex: getFinancialSheetIndexByQuery(state.financialStatements.journal.sheets, journalQuery) 
+  };
+}
+
+const withJournalTable = connect(mapStateToProps);
+
 export default compose(
-  JournalConnect,
+  withJournalTable,
+  withJournal(({ journalSheetTableRows }) => ({
+    journalSheetTableRows
+  })),
 )(JournalSheetTable);

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

@@ -0,0 +1,21 @@
+import {connect} from 'react-redux';
+import {
+  getFinancialSheetIndexByQuery,
+  getFinancialSheet,
+  getFinancialSheetTableRows,
+} from 'store/financialStatement/financialStatements.selectors';
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { journalIndex } = props;
+
+    const mapped = {
+      journalSheet: getFinancialSheet(state.financialStatements.journal.sheets, journalIndex),
+      journalSheetTableRows: getFinancialSheetTableRows(state.financialStatements.journal.sheets, journalIndex),
+      journalSheetLoading: state.financialStatements.journal.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

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

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

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

@@ -3,12 +3,7 @@ import {
   NavbarGroup,
   Button,
   Classes,
-  NavbarHeading,
   NavbarDivider,
-  Intent,
-  Popover,
-  PopoverInteractionKind,
-  Position,
 } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'

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

@@ -1,22 +1,32 @@
-import React, {useState, useMemo, useCallback, useEffect} from 'react';
+import React, {useState, useCallback, useEffect} from 'react';
 import moment from 'moment';
-import useAsync from 'hooks/async';
 import {compose} from 'utils';
+import { useQuery } from 'react-query';
+
 import ProfitLossSheetHeader from './ProfitLossSheetHeader';
 import ProfitLossSheetTable from './ProfitLossSheetTable';
-import DashboardConnect from 'connectors/Dashboard.connector';
-import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
+import ProfitLossActionsBar from './ProfitLossActionsBar';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
-import ProfitLossActionsBar from './ProfitLossActionsBar';
+
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withProfitLossActions from './withProfitLossActions';
+import withProfitLoss from './withProfitLoss';
 import SettingsConnect from 'connectors/Settings.connect';
 
 
 function ProfitLossSheet({
+  // #withDashboard
   changePageTitle,
+
+  // #withProfitLossActions
   fetchProfitLossSheet,
-  getProfitLossSheetIndex,
+
+  // #withProfitLoss
   profitLossSheetLoading,
+
+  // #withPreferences
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -31,16 +41,8 @@ function ProfitLossSheet({
   }, [changePageTitle]);
 
   // Fetches profit/loss sheet.
-  const fetchHook = useAsync((query = filter) => {
-    return Promise.all([
-      fetchProfitLossSheet(query),
-    ]);
-  }, false);
-
-  // Retrieve profit/loss sheet index based on the given filter query.
-  const profitLossSheetIndex = useMemo(() =>
-    getProfitLossSheetIndex(filter),
-    [getProfitLossSheetIndex, filter]);
+  const fetchHook = useQuery(['profit-loss', filter],
+    (key, query) => { fetchProfitLossSheet(query); });
 
   // Handle submit filter.
   const handleSubmitFilter = useCallback((filter) => {
@@ -50,16 +52,17 @@ function ProfitLossSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
-    fetchHook.execute(_filter);
-  }, [fetchHook]);
+  }, []);
 
   // Handle fetch data of profit/loss sheet table.
-  const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
+  const handleFetchData = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
 
   return (
     <DashboardInsider>
-      <ProfitLossActionsBar  />
-      
+      <ProfitLossActionsBar />
+ 
       <DashboardPageContent>
         <div class="financial-statement">
           <ProfitLossSheetHeader
@@ -69,7 +72,7 @@ function ProfitLossSheet({
           <div class="financial-statement__body">
             <ProfitLossSheetTable
               companyName={organizationSettings.name}
-              profitLossSheetIndex={profitLossSheetIndex}
+              profitLossQuery={filter}
               onFetchData={handleFetchData}
               loading={profitLossSheetLoading} />
           </div> 
@@ -80,7 +83,10 @@ function ProfitLossSheet({
 }
 
 export default compose(
-  DashboardConnect,
-  ProfitLossSheetConnect,
+  withDashboard,
+  withProfitLossActions,
+  withProfitLoss(({ profitLossSheetLoading }) => ({
+    profitLossSheetLoading,
+  })),
   SettingsConnect,
 )(ProfitLossSheet);

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

@@ -1,18 +1,25 @@
-import React, {useState, useMemo, useCallback} from 'react';
+import React, { useMemo, useCallback } from 'react';
+import { connect } from 'react-redux';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
-import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
+
 import { compose, defaultExpanderReducer } from 'utils';
+import {
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+import withProfitLossDetail from './withProfitLoss';
 
 
 function ProfitLossSheetTable({
-  loading,
-  onFetchData,
+  // #withProfitLoss
   profitLossTableRows,
   profitLossQuery,
   profitLossColumns,
+
+  // #ownProps
+  loading,
+  onFetchData,
   companyName,
 }) {
   const columns = useMemo(() => [
@@ -132,7 +139,20 @@ function ProfitLossSheetTable({
   );
 }
 
+const mapStateToProps = (state, props) => ({
+  profitLossIndex: getFinancialSheetIndexByQuery(
+    state.financialStatements.profitLoss.sheets,
+    props.profitLossQuery,
+  ),
+});
+
+const withProfitLossTable = connect(mapStateToProps);
+
 export default compose(
-  ProfitLossSheetConnect,
-  ProfitLossSheetTableConnect,
+  withProfitLossTable,
+  withProfitLossDetail(({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
+    profitLossColumns,
+    profitLossQuery,
+    profitLossTableRows,
+  })),
 )(ProfitLossSheetTable);

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

@@ -0,0 +1,26 @@
+import {connect} from 'react-redux';
+import {
+  getFinancialSheetIndexByQuery,
+  getFinancialSheet,
+  getFinancialSheetColumns,
+  getFinancialSheetQuery,
+  getFinancialSheetTableRows,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { profitLossIndex } = props;
+
+    const mapped = {
+      profitLossSheet: getFinancialSheet(state.financialStatements.profitLoss.sheets, profitLossIndex),
+      profitLossColumns: getFinancialSheetColumns(state.financialStatements.profitLoss.sheets, profitLossIndex),
+      profitLossQuery: getFinancialSheetQuery(state.financialStatements.profitLoss.sheets, profitLossIndex),
+      profitLossTableRows: getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, profitLossIndex),
+
+      profitLossSheetLoading: state.financialStatements.profitLoss.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+}

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

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

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

@@ -1,22 +1,32 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import TrialBalanceSheetHeader from "./TrialBalanceSheetHeader";
 import TrialBalanceSheetTable from './TrialBalanceSheetTable';
-import useAsync from 'hooks/async';
+import { useQuery } from 'react-query';
 import moment from 'moment';
 import {compose} from 'utils';
-import TrialBalanceSheetConnect from 'connectors/TrialBalanceSheet.connect';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
+import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
 import TrialBalanceActionsBar from './TrialBalanceActionsBar';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
-import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
+
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withTrialBalanceActions from './withTrialBalanceActions';
+import withTrialBalance from './withTrialBalance';
 import SettingsConnect from 'connectors/Settings.connect';
 
+
 function TrialBalanceSheet({
+  // #withDashboard
   changePageTitle,
+
+  // #withTrialBalanceActions
   fetchTrialBalanceSheet,
-  getTrialBalanceSheetIndex,
-  getTrialBalanceAccounts,
+
+  // #withTrialBalance
   trialBalanceSheetLoading,
+
+  // #withPreferences
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -26,24 +36,13 @@ function TrialBalanceSheet({
     none_zero: false,
   });
 
-  const fetchHook = useAsync((query = filter) => {
-    return Promise.all([
-      fetchTrialBalanceSheet(query),
-    ]);
-  }, false);
+  const fetchHook = useQuery(['trial-balance', filter],
+    (key, query) => { fetchTrialBalanceSheet(query); });
 
   // handle fetch data of trial balance table.
-  const handleFetchData = useCallback(() => { fetchHook.execute() }, [fetchHook]);
-
-  // Retrieve balance sheet index by the given filter query.
-  const trialBalanceSheetIndex = useMemo(() => 
-    getTrialBalanceSheetIndex(filter),
-    [getTrialBalanceSheetIndex, filter]);
-
-  // Retrieve balance sheet accounts bu the given sheet index.
-  const trialBalanceAccounts = useMemo(() =>
-    getTrialBalanceAccounts(trialBalanceSheetIndex),
-    [getTrialBalanceAccounts, trialBalanceSheetIndex]);
+  const handleFetchData = useCallback(() => {
+    fetchHook.refetch()
+  }, [fetchHook]);
 
   // Change page title of the dashboard.
   useEffect(() => {
@@ -57,8 +56,7 @@ function TrialBalanceSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(parsedFilter);
-    fetchHook.execute(parsedFilter);
-  }, [setFilter, fetchHook]);
+  }, [setFilter]);
 
   return (
     <DashboardInsider>
@@ -73,8 +71,7 @@ function TrialBalanceSheet({
           <div class="financial-statement__body">
             <TrialBalanceSheetTable
               companyName={organizationSettings.name}
-              trialBalanceSheetAccounts={trialBalanceAccounts}
-              trialBalanceSheetIndex={trialBalanceSheetIndex}
+              trialBalanceQuery={filter}
               onFetchData={handleFetchData}
               loading={trialBalanceSheetLoading} />
           </div>
@@ -85,7 +82,10 @@ function TrialBalanceSheet({
 }
 
 export default compose(
-  DashboardConnect,
-  TrialBalanceSheetConnect,
+  withDashboard,
+  withTrialBalanceActions,
+  withTrialBalance(({ trialBalanceSheetLoading }) => ({
+    trialBalanceSheetLoading,
+  })),
   SettingsConnect,
 )(TrialBalanceSheet);

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

@@ -1,30 +1,22 @@
 import React, {useState, useCallback, useMemo} from 'react';
-import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
+import * as Yup from 'yup';
 import {Row, Col} from 'react-grid-system';
+import FinancialStatementHeader from 'containers/FinancialStatements/FinancialStatementHeader';
 import { 
   Button,
-  FormGroup,
-  Position,
-  MenuItem,
-  RadioGroup,
-  Radio,
-  HTMLSelect,
-  Intent,
-  Popover,
 } from "@blueprintjs/core";
 import moment from 'moment';
 import {useIntl} from 'react-intl';
 import { useFormik } from 'formik';
-import * as Yup from 'yup';
-import Icon from 'components/Icon';
+
 import FinancialStatementDateRange from 'containers/FinancialStatements/FinancialStatementDateRange';
 
+
 export default function TrialBalanceSheetHeader({
   pageFilter,
   onSubmitFilter,
 }) {
   const intl = useIntl();
-
   const formik = useFormik({
     enableReinitialize: true,
     initialValues: {
@@ -36,9 +28,9 @@ export default function TrialBalanceSheetHeader({
       from_date: Yup.date().required(),
       to_date: Yup.date().min(Yup.ref('from_date')).required(),
     }),
-    onSubmit: (values, actions) => {
+    onSubmit: (values, { setSubmitting }) => {
       onSubmitFilter(values);
-      actions.setSubmitting(false);
+      setSubmitting(false);
     }
   });
 

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

@@ -1,17 +1,28 @@
 import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import { connect } from 'react-redux';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
+import {
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+import withTrialBalance from './withTrialBalance';
+
+import { compose } from 'utils';
+
+
+function TrialBalanceSheetTable({
+  // #withTrialBalanceDetail
+  trialBalanceAccounts,
+
+  // #withTrialBalanceTable
+  trialBalanceIndex,
 
-export default function TrialBalanceSheetTable({
-  trialBalanceSheetAccounts,
-  trialBalanceSheetIndex,
   onFetchData,
   loading,
   companyName,
 }) {
-  const [data, setData] = useState([]);
-
   const columns = useMemo(() => [
     {
       // Build our expander column
@@ -98,8 +109,25 @@ export default function TrialBalanceSheetTable({
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={trialBalanceSheetAccounts}
+        data={trialBalanceAccounts}
         onFetchData={handleFetchData} />
     </FinancialSheet>
   ); 
-}
+}
+
+
+const mapStateToProps = (state, props) => {
+  const { trialBalanceQuery } = props;
+  return {
+    trialBalanceIndex: getFinancialSheetIndexByQuery(state.financialStatements.trialBalance.sheets, trialBalanceQuery),
+  };
+};
+
+const withTrialBalanceTable = connect(mapStateToProps);
+
+export default compose(
+  withTrialBalanceTable,
+  withTrialBalance(({ trialBalanceAccounts }) => ({
+    trialBalanceAccounts,
+  })),
+)(TrialBalanceSheetTable);

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

@@ -0,0 +1,21 @@
+import {connect} from 'react-redux';
+import {
+  getFinancialSheetAccounts,
+  getFinancialSheetQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { trialBalanceIndex } = props;
+    const mapped = {
+      trialBalanceAccounts: getFinancialSheetAccounts(state.financialStatements.trialBalance.sheets, trialBalanceIndex),
+      trialBalanceQuery: getFinancialSheetQuery(state.financialStatements.trialBalance.sheets, trialBalanceIndex),
+
+      trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+
+  return connect(mapStateToProps);
+};

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

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