feat: Optimize connect component props with redux store.

client/src/containers/Accounting/MakeJournalEntriesForm.js

@@ -23,12 +23,15 @@ import {compose} from 'utils';
 
 
 function MakeJournalEntriesForm({
+  // #withMedia
   requestSubmitMedia,
   requestDeleteMedia,
 
+  // #withJournalsActions
   requestMakeJournalEntries,
   requestEditManualJournal,
 
+  // #withDashboard
   changePageTitle,
   changePageSubtitle,
 
@@ -252,8 +255,6 @@ function MakeJournalEntriesForm({
 }
 
 export default compose(
-  // ManualJournalsConnect,
-  // MakeJournalEntriesConnect,
   withJournalsActions,
   withManualJournalDetail,
   withAccountsActions,

client/src/containers/Accounting/MakeJournalEntriesPage.js

@@ -46,7 +46,6 @@ function MakeJournalEntriesPage({
 }
 
 export default compose(
-  // DashboardConnect,
   withAccountsActions,
   withManualJournalsActions,
 )(MakeJournalEntriesPage);

client/src/containers/Accounting/MakeJournalEntriesTable.js

@@ -76,13 +76,16 @@ const NoteCellRenderer = (chainedComponent) => (props) => {
 /**
  * Make journal entries table component.
  */
-function MakeJournalEntriesTable({
-  formik: { errors, values, setFieldValue },
+function MakeJournalEntriesTable({  
+  // #withAccounts
   accounts,
+
+  // #ownPorps
   onClickRemoveRow,
   onClickAddNewRow,
   defaultRow,
   initialValues,
+  formik: { errors, values, setFieldValue },
 }) {
   const [rows, setRow] = useState([]);
 
@@ -226,5 +229,7 @@ function MakeJournalEntriesTable({
 }
 
 export default compose(
-  withAccounts,
+  withAccounts(({ accounts }) => ({
+    accounts,
+  })),
 )(MakeJournalEntriesTable);

client/src/containers/Accounting/ManualJournalActionsBar.js

@@ -14,10 +14,12 @@ import {
 } from '@blueprintjs/core';
 import classNames from 'classnames';
 import { useRouteMatch, useHistory } from 'react-router-dom';
+import { compose } from 'utils';
+
+import FilterDropdown from 'components/FilterDropdown';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
 import DialogConnect from 'connectors/Dialog.connector';
-import { compose } from 'utils';
-import FilterDropdown from 'components/FilterDropdown';
+import { If } from 'components';
 
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withManualJournals from 'containers/Accounting/withManualJournals';
@@ -25,10 +27,14 @@ import withManualJournalsActions from 'containers/Accounting/withManualJournalsA
 
 
 function ManualJournalActionsBar({
+  // #withResourceDetail
   resourceName = 'manual_journal',
   resourceFields,
 
+  // #withManualJournals
   manualJournalsViews,
+
+  // #withManualJournalsActions
   addManualJournalsTableQueries,
 
   onFilterChanged,
@@ -80,7 +86,9 @@ function ManualJournalActionsBar({
             rightIcon={'caret-down'}
           />
         </Popover>
+
         <NavbarDivider />
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='plus' />}
@@ -99,7 +107,7 @@ function ManualJournalActionsBar({
           />
         </Popover>
 
-        {(hasSelectedRows) && (
+        <If condition={hasSelectedRows}>
           <Button
             className={Classes.MINIMAL}
             icon={<Icon icon='trash' iconSize={15} />}
@@ -107,7 +115,8 @@ function ManualJournalActionsBar({
             intent={Intent.DANGER}
             onClick={handleBulkDelete}
           />
-        )}
+        </If>
+
         <Button
           className={Classes.MINIMAL}
           icon={<Icon icon='file-import' />}
@@ -125,7 +134,11 @@ function ManualJournalActionsBar({
 
 export default compose(
   DialogConnect,
-  withResourceDetail,
-  withManualJournals,
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
+  withManualJournals(({ manualJournalsViews }) => ({
+    manualJournalsViews,
+  })),
   withManualJournalsActions,
 )(ManualJournalActionsBar);

client/src/containers/Accounting/ManualJournalsDataTable.js

@@ -202,6 +202,9 @@ export default compose(
   withDashboardActions,
   // withViewsActions,
   withManualJournalsActions,
-  withManualJournals,
+  withManualJournals(({ manualJournals, manualJournalsLoading, }) => ({
+    manualJournals,
+    manualJournalsLoading,
+  })),
   withViewDetails,
 )(ManualJournalsDataTable);

client/src/containers/Accounting/ManualJournalsList.js

@@ -22,15 +22,17 @@ import { compose } from 'utils';
  * Manual journals table.
  */
 function ManualJournalsTable({
+  // #withDashboardActions
   changePageTitle,
 
+  // #withViewsActions
   requestFetchResourceViews,
 
+  // #withManualJournalsActions
   requestFetchManualJournalsTable,
   requestDeleteManualJournal,
   requestPublishManualJournal,
   requestDeleteBulkManualJournals,
-
   addManualJournalsTableQueries,
 }) {
   const history = useHistory();
@@ -141,8 +143,7 @@ function ManualJournalsTable({
               '/dashboard/accounting/manual-journals/:custom_view_id/custom_view',
               '/dashboard/accounting/manual-journals',
             ]}>
-            <ManualJournalsViewTabs
-              onViewChanged={handleViewChanged} />
+            
           </Route>
         </Switch>
 

client/src/containers/Accounting/ManualJournalsViewTabs.js

@@ -12,15 +12,26 @@ import { useParams } from 'react-router-dom';
 import Icon from 'components/Icon';
 import { Link } from 'react-router-dom';
 import { compose } from 'utils';
-import ManualJournalsConnect from 'connectors/ManualJournals.connect';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
 import { useUpdateEffect } from 'hooks';
 
+import withManualJournals from './withManualJournals';
+import withManualJournalsActions from './withManualJournalsActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
+
 function ManualJournalsViewTabs({
-  views,
-  setTopbarEditView,
-  customViewChanged,
+  // #withManualJournals
+  manualJournalsViews,
+  
+  // #withManualJournalsActions
   addManualJournalsTableQueries,
+
+  // #withDashboard
+  setTopbarEditView,
+
+  // #ownProps
+  customViewChanged,
   onViewChanged,
 }) {
   const history = useHistory();
@@ -49,7 +60,7 @@ function ManualJournalsViewTabs({
     });
   }, [customViewId]);
 
-  const tabs = views.map((view) => {
+  const tabs = manualJournalsViews.map((view) => {
     const baseUrl = '/dashboard/accounting/manual-journals';
     const link = (
       <Link
@@ -91,6 +102,9 @@ function ManualJournalsViewTabs({
 }
 
 export default compose(
-  ManualJournalsConnect,
-  DashboardConnect
+  withManualJournals(({ manualJournalsViews }) => ({
+    manualJournalsViews,
+  })),
+  withManualJournalsActions,
+  withDashboard 
 )(ManualJournalsViewTabs);

client/src/containers/Accounting/withManualJournals.js

@@ -4,13 +4,17 @@ import {
   getManualJournalsItems,
 } from 'store/manualJournals/manualJournals.selectors'
 
-
-const mapStateToProps = (state, props) => ({
-  manualJournals: getManualJournalsItems(state, state.manualJournals.currentViewId),
-  manualJournalsViews: getResourceViews(state, 'manual_journals'),
-  manualJournalsItems: state.manualJournals.items,
-  manualJournalsTableQuery: state.manualJournals.tableQuery,
-  manualJournalsLoading: state.manualJournals.loading,
-});
-
-export default connect(mapStateToProps);
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      manualJournals: getManualJournalsItems(state, state.manualJournals.currentViewId),
+      manualJournalsViews: getResourceViews(state, 'manual_journals'),
+      manualJournalsItems: state.manualJournals.items,
+      manualJournalsTableQuery: state.manualJournals.tableQuery,
+      manualJournalsLoading: state.manualJournals.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  
+  return connect(mapStateToProps);
+};

client/src/containers/Accounts/AccountsActionsBar.js

@@ -33,7 +33,10 @@ function AccountsActionsBar({
   openDialog,
   accountsViews,
 
+  // #withResourceDetail
   resourceFields,
+
+  // #withAccountsActions
   addAccountsTableQueries,
 
   selectedRows = [],
@@ -151,7 +154,11 @@ const withAccountsActionsBar = connect(mapStateToProps);
 export default compose(
   withAccountsActionsBar,
   DialogConnect,
-  withAccounts,
-  withResourceDetail,
+  withAccounts(({ accountsViews }) => ({
+    accountsViews,
+  })),
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
   withAccountsTableActions,
 )(AccountsActionsBar);

client/src/containers/Accounts/AccountsChart.js

@@ -64,7 +64,8 @@ function AccountsChart({
 
   // Fetch accounts list according to the given custom view id.
   const fetchAccountsHook = useQuery(['accounts-table', accountsTableQuery],
-    () => requestFetchAccountsTable());
+    () => requestFetchAccountsTable(),
+    { refetchInterval: 3000 });
 
   useEffect(() => {
     changePageTitle('Chart of Accounts');
@@ -262,6 +263,7 @@ export default compose(
   withViewsActions,
   withResourceActions,
   withDashboardActions,
-
-  withAccounts,
+  withAccounts(({ accountsTableQuery }) => ({
+    accountsTableQuery,
+  })),
 )(AccountsChart);

client/src/containers/Accounts/AccountsDataTable.js

@@ -21,14 +21,13 @@ import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withAccountsActions from 'containers/Accounts/withAccountsActions';
 import withAccounts from 'containers/Accounts/withAccounts';
 
-import {If} from 'components';
 
 function AccountsDataTable({
-  // # withAccounts  
+  // #withAccounts  
   accounts,
   accountsLoading,
   
-  // # withDialog.
+  // #withDialog.
   openDialog,
 
   // own properties
@@ -164,9 +163,6 @@ function AccountsDataTable({
 
   return (
     <LoadingIndicator loading={loading} mount={false}>
-      <If condition={loading}>
-        asdasdsadsa
-      </If>
       <DataTable
         noInitialFetch={true}
         columns={columns}
@@ -187,5 +183,8 @@ export default compose(
   DialogConnect,
   withDashboardActions,
   withAccountsActions,
-  withAccounts,
+  withAccounts(({ accountsLoading, accounts }) => ({
+    accountsLoading,
+    accounts,
+  })),
 )(AccountsDataTable);

client/src/containers/Accounts/AccountsViewsTabs.js

@@ -20,6 +20,7 @@ import withAccounts from 'containers/Accounts/withAccounts';
 import withAccountsTableActions from 'containers/Accounts/withAccountsTableActions';
 import withViewDetail from 'containers/Views/withViewDetails';
 
+
 function AccountsViewsTabs({
   // #withViewDetail
   viewId,
@@ -63,7 +64,6 @@ function AccountsViewsTabs({
     onViewChanged && onViewChanged(customViewId);
   }, [customViewId]);
 
-
   // Handle click a new view tab.
   const handleClickNewView = () => {
     setTopbarEditView(null);
@@ -115,7 +115,6 @@ function AccountsViewsTabs({
 }
 
 const mapStateToProps = (state, ownProps) => ({
-
   // Mapping view id from matched route params.
   viewId: ownProps.match.params.custom_view_id,
 });
@@ -126,7 +125,9 @@ export default compose(
   withRouter,
   withAccountsViewsTabs,
   withDashboard,
-  withAccounts,
+  withAccounts(({ accountsViews }) => ({
+    accountsViews,
+  })),
   withAccountsTableActions,
   withViewDetail
 )(AccountsViewsTabs);

client/src/containers/Accounts/withAccounts.js

@@ -6,14 +6,20 @@ import {
   getResourceViews,
 } from 'store/customViews/customViews.selectors';
 
-const mapStateToProps = (state, props) => ({
-  accountsViews: getResourceViews(state, 'accounts'),
-  accounts: getAccountsItems(state, state.accounts.currentViewId),
-  accountsTypes: state.accounts.accountsTypes,
 
-  accountsTableQuery: state.accounts.tableQuery,
-  accountsLoading: state.accounts.loading,
-  accountErrors: state.accounts.errors,
-});
-
-export default connect(mapStateToProps);
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      accountsViews: getResourceViews(state, 'accounts'),
+      accounts: getAccountsItems(state, state.accounts.currentViewId),
+      accountsTypes: state.accounts.accountsTypes,
+    
+      accountsTableQuery: state.accounts.tableQuery,
+      accountsLoading: state.accounts.loading,
+      accountErrors: state.accounts.errors,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  
+  return connect(mapStateToProps);
+};

client/src/containers/Dialogs/AccountFormDialog.container.js

@@ -24,7 +24,10 @@ export default compose(
   AccountFormDialogConnect,
   withAccountsActions,
   withAccountDetail,
-  withAccounts,
+  withAccounts(({ accountsTypes, accounts }) => ({
+    accountsTypes,
+    accounts,
+  })),
   DialogReduxConnect,
   DialogConnect,
 );

client/src/containers/Dialogs/ItemCategoryDialog.js

@@ -14,7 +14,7 @@ import * as Yup from 'yup';
 import { useIntl } from 'react-intl';
 import { useFormik } from 'formik';
 import { compose } from 'utils';
-import { useQuery } from 'react-query';
+import { useQuery, queryCache } from 'react-query';
 import classNames from 'classnames';
 
 import AppToaster from 'components/AppToaster';
@@ -73,7 +73,16 @@ function ItemCategoryDialog({
   }), []);
 
   // Formik
-  const formik = useFormik({
+  const {
+    errors,
+    values,
+    touched,
+    setFieldValue,
+    handleSubmit,
+    resetForm,
+    getFieldProps,
+    isSubmitting,
+  } = useFormik({
     enableReinitialize: true,
     initialValues: {
       ...(payload.action === 'edit' &&
@@ -85,9 +94,11 @@ function ItemCategoryDialog({
         requestEditItemCategory(payload.id, values).then(response => {
           closeDialog(name);
           AppToaster.show({
-            message: 'the_category_has_been_edited'
+            message: 'the_category_has_been_edited',
+            intent: Intent.SUCCESS,
           });
           setSubmitting(false);
+          queryCache.refetchQueries('items-categories-table', { force: true });
         }).catch((error) => {
           setSubmitting(false);
         });
@@ -96,9 +107,11 @@ function ItemCategoryDialog({
           .then((response) => {
             closeDialog(name);
             AppToaster.show({
-              message: 'the_category_has_been_submit'
+              message: 'the_category_has_been_submit',
+              intent: Intent.SUCCESS,
             });
             setSubmitting(false);
+            queryCache.refetchQueries('items-categories-table', { force: true });
           })
           .catch((error) => {
             setSubmitting(false);
@@ -106,7 +119,6 @@ function ItemCategoryDialog({
       }
     }
   });
-  const { values, errors, touched } = useMemo(() => formik, [formik]);
 
   const filterItemCategory = useCallback((query, category, _index, exactMatch) => {
     const normalizedTitle = category.name.toLowerCase();
@@ -135,13 +147,13 @@ function ItemCategoryDialog({
 
   const onChangeParentCategory = useCallback((parentCategory) => {
     setParentCategory(parentCategory);
-    formik.setFieldValue('parent_category_id', parentCategory.id);
-  }, [formik]);
+    setFieldValue('parent_category_id', parentCategory.id);
+  }, [setFieldValue]);
 
   const onDialogClosed = useCallback(() => {
-    formik.resetForm();
+    resetForm();
     closeDialog(name);
-  }, [formik, closeDialog, name]);
+  }, [resetForm, closeDialog, name]);
 
   const requiredSpan = useMemo(() => (<span class="required">*</span>), []);
   const infoIcon = useMemo(() => (<Icon icon="info-circle" iconSize={12} />), []);
@@ -161,20 +173,20 @@ function ItemCategoryDialog({
       isLoading={fetchList.isFetching}
       onClose={handleClose}
     >
-      <form onSubmit={formik.handleSubmit}>
+      <form onSubmit={handleSubmit}>
         <div className={Classes.DIALOG_BODY}>
           <FormGroup
             label={'Category Name'}
             labelInfo={requiredSpan}
             className={'form-group--category-name'}
             intent={(errors.name && touched.name) && Intent.DANGER}
-            helperText={(<ErrorMessage name="name" {...formik} />)}
+            helperText={(<ErrorMessage name="name" {...{ errors, touched }} />)}
             inline={true}
           >
             <InputGroup
               medium={true}
               intent={(errors.name && touched.name) && Intent.DANGER}
-              {...formik.getFieldProps('name')}
+              {...getFieldProps('name')}
             />
           </FormGroup>
 
@@ -187,7 +199,7 @@ function ItemCategoryDialog({
               Classes.FILL,
             )}
             inline={true}
-            helperText={(<ErrorMessage name="parent_category_id" {...formik} />)}
+            helperText={(<ErrorMessage name="parent_category_id" {...{errors, touched}} />)}
             intent={(errors.parent_category_id && touched.parent_category_id) && Intent.DANGER}
           >
             <Select
@@ -210,20 +222,21 @@ function ItemCategoryDialog({
             label={'Description'}
             className={'form-group--description'}
             intent={(errors.description && touched.description) && Intent.DANGER}
-            helperText={(<ErrorMessage name="description" {...formik} />)}
+            helperText={(<ErrorMessage name="description" {...{errors, touched}} />)}
             inline={true}
           >
             <TextArea
               growVertically={true}
               large={true}
-              {...formik.getFieldProps('description')}
+              {...getFieldProps('description')}
             />
           </FormGroup>
         </div>
+
         <div className={Classes.DIALOG_FOOTER}>
           <div className={Classes.DIALOG_FOOTER_ACTIONS}>
             <Button onClick={handleClose}>Close</Button>
-            <Button intent={Intent.PRIMARY} type='submit'>
+            <Button intent={Intent.PRIMARY} type='submit' disabled={isSubmitting}>
               {payload.action === 'edit' ? 'Edit' : 'Submit'}
             </Button>
           </div>
@@ -238,7 +251,7 @@ const mapStateToProps = (state, props) => {
   const dialogPayload = getDialogPayload(state, 'item-category-form');
 
   return {
-    name: 'account-form',
+    name: 'item-category-form',
     payload: {action: 'new', id: null, ...dialogPayload},
 
     itemCategoryId: dialogPayload?.id || null,
@@ -248,10 +261,12 @@ const mapStateToProps = (state, props) => {
 const withItemCategoryDialog = connect(mapStateToProps);
 
 export default compose( 
+  withItemCategoryDialog,
   DialogConnect,
   DialogReduxConnect,
-  withItemCategoryDialog,
   withItemCategoryDetail,
-  withItemCategories,
+  withItemCategories(({ categoriesList }) => ({
+    categoriesList
+  })),
   withItemCategoriesActions 
 )(ItemCategoryDialog);

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

client/src/containers/Items/ItemCategoriesList.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { useParams } from 'react-router-dom';
-import useAsync from 'hooks/async';
+import { useQuery } from 'react-query';
 
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemCategoriesDataTable from 'containers/Items/ItemCategoriesTable';
@@ -8,12 +8,14 @@ import ItemsCategoryActionsBar from 'containers/Items/ItemsCategoryActionsBar';
 
 import withDashboardActions from 'containers/Dashboard/withDashboard';
 import withItemCategoriesActions from 'containers/Items/withItemCategoriesActions';
-import withItemCategories from 'containers/Items/withItemCategories';
 import { compose } from 'utils';
 
 
 const ItemCategoryList = ({
+  // #withDashboardActions
   changePageTitle,
+
+  // #withItemCategoriesActions
   requestFetchItemCategories,
 }) => {
   const { id } = useParams();
@@ -25,23 +27,26 @@ const ItemCategoryList = ({
       : changePageTitle('Category List');
   }, []);
 
-  const fetchCategories = useAsync(() => {
-    return Promise.all([
-      requestFetchItemCategories(),
-    ]);
-  });
+  const fetchCategories = useQuery('items-categories-table',
+    () => { requestFetchItemCategories(); });
 
   const handleFilterChanged = useCallback(() => { 
     
   }, []);
 
+  // Handle selected rows change.
+  const handleSelectedRowsChange = useCallback((itemCategories) => {
+    setSelectedRows(itemCategories);
+  }, [setSelectedRows]);
+
   return (
     <DashboardInsider name={'item-category-list'}>
       <ItemsCategoryActionsBar
         onFilterChanged={handleFilterChanged}
         selectedRows={selectedRows} />
 
-      <ItemCategoriesDataTable />
+      <ItemCategoriesDataTable
+        onSelectedRowsChange={handleSelectedRowsChange} />
     </DashboardInsider>
   );
 };
@@ -49,5 +54,4 @@ const ItemCategoryList = ({
 export default compose(
   withDashboardActions,
   withItemCategoriesActions,
-  withItemCategories,
 )(ItemCategoryList);

client/src/containers/Items/ItemCategoriesTable.js

@@ -1,10 +1,4 @@
 import React, { useCallback, useMemo } from 'react';
-import Icon from 'components/Icon';
-import ItemsCategoryConnect from 'connectors/ItemsCategory.connect';
-import DialogConnect from 'connectors/Dialog.connector';
-import LoadingIndicator from 'components/LoadingIndicator';
-import { compose } from 'utils';
-import DataTable from 'components/DataTable';
 import {
   Button,
   Popover,
@@ -12,9 +6,19 @@ import {
   MenuItem,
   Position,
 } from '@blueprintjs/core';
+import Icon from 'components/Icon';
+import LoadingIndicator from 'components/LoadingIndicator';
+import { compose } from 'utils';
+import DataTable from 'components/DataTable';
+
+import DialogConnect from 'connectors/Dialog.connector';
+import withItemCategories from './withItemCategories';
+
 
 const ItemsCategoryList = ({
-  categories,
+  // #withItemCategories
+  categoriesList,
+
   onFetchData,
   onDeleteCategory,
   onEditCategory,
@@ -91,7 +95,7 @@ const ItemsCategoryList = ({
     <LoadingIndicator spinnerSize={30}>
       <DataTable
         columns={columns}
-        data={Object.values(categories)}
+        data={categoriesList}
         onFetchData={handelFetchData}
         manualSortBy={true}
         selectionColumn={true}
@@ -104,5 +108,7 @@ const ItemsCategoryList = ({
 
 export default compose(
   DialogConnect,
-  ItemsCategoryConnect,
+  withItemCategories(({ categoriesList }) => ({
+    categoriesList,
+  })),
 )(ItemsCategoryList);

client/src/containers/Items/ItemsActionsBar.js

@@ -28,6 +28,7 @@ const ItemsActionsBar = ({
   resourceName = 'items',
   resourceFields,
 
+  // #withItems
   itemsViews,
 
   onFilterChanged,
@@ -128,6 +129,10 @@ const ItemsActionsBar = ({
 
 export default compose(
   DialogConnect,
-  withItems,
-  withResourceDetail,
+  withItems(({ itemsViews }) => ({
+    itemsViews,
+  })),
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })),
 )(ItemsActionsBar);

client/src/containers/Items/ItemsCategoryActionsBar.js

@@ -23,16 +23,20 @@ import withDashboard from 'containers/Dashboard/withDashboard';
 
 
 const ItemsCategoryActionsBar = ({
+  // #withResourceDetail
   resourceName = 'item_category',
   resourceFields,
-
+  
+  // #withDialog
   openDialog,
+
+  // #ownProps
   onDeleteCategory,
   onFilterChanged,
   selectedRows,
 }) => {
   const onClickNewCategory = useCallback(() => {
-    openDialog('item-form', {});
+    openDialog('item-category-form', {});
   }, [openDialog]);
 
   const handleDeleteCategory = useCallback((category) => {
@@ -104,5 +108,7 @@ export default compose(
   withItemsCategoriesActionsBar,
   DialogConnect,
   withDashboard,
-  withResourceDetail 
+  withResourceDetail(({ resourceFields }) => ({
+    resourceFields,
+  })) 
 )(ItemsCategoryActionsBar);

client/src/containers/Items/ItemsDataTable.js

@@ -15,9 +15,11 @@ import Money from 'components/Money';
 import withItems from 'containers/Items/withItems';
 import LoadingIndicator from 'components/LoadingIndicator';
 
+
 const ItemsDataTable = ({
   loading,
 
+  // #withItems
   itemsTableLoading,
   itemsCurrentPage,
 
@@ -130,5 +132,8 @@ const ItemsDataTable = ({
 };
 
 export default compose(
-  withItems,
+  withItems(({ itemsCurrentPage, itemsTableLoading }) => ({
+    itemsCurrentPage,
+    itemsTableLoading,
+  })),
 )(ItemsDataTable);

client/src/containers/Items/ItemsList.js

@@ -7,10 +7,12 @@ import {
   Intent,
   Alert,
 } from '@blueprintjs/core';
-import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import { useQuery } from 'react-query';
+
+import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import ItemsActionsBar from 'containers/Items/ItemsActionsBar';
 import { compose } from 'utils';
+
 import ItemsDataTable from './ItemsDataTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 
@@ -33,15 +35,12 @@ function ItemsList({
   requestFetchResourceFields,
 
   // #withItems
-  itemsViews,
-  itemsCurrentPage,
   itemsTableQuery,
 
   // #withItemsActions
   requestDeleteItem,
   requestFetchItems,
   addItemsTableQueries,
-  changeItemsCurrentView
 }) {
   const [deleteItem, setDeleteItem] = useState(false);
   const [selectedRows, setSelectedRows] = useState([]);
@@ -121,8 +120,7 @@ function ItemsList({
 
       <ItemsActionsBar
         onFilterChanged={handleFilterChanged}
-        selectedRows={selectedRows}
-        views={itemsViews} />
+        selectedRows={selectedRows} />
 
       <DashboardPageContent>
         <Switch>
@@ -133,9 +131,8 @@ function ItemsList({
               '/dashboard/items'
             ]}>
             <ItemsViewsTabs
-              itemsViews={itemsViews}
-              onViewChanged={handleCustomViewChanged} />
-
+              onViewChanged={handleCustomViewChanged} /> 
+ 
             <ItemsDataTable
               loading={tableLoading}
               onDeleteItem={handleDeleteItem}
@@ -164,7 +161,9 @@ function ItemsList({
 }
 
 export default compose(
-  withItems,
+  withItems(({ itemsTableQuery }) => ({
+    itemsTableQuery,
+  })),
   withResourceActions,
   withDashboardActions,
   withItemsActions,

client/src/containers/Items/ItemsViewsTabs.js

@@ -18,6 +18,7 @@ import {useUpdateEffect} from 'hooks';
 import withItemsActions from 'containers/Items/withItemsActions';
 import withDashboard from 'containers/Dashboard/withDashboard';
 import withViewDetail from 'containers/Views/withViewDetails';
+import withItems from 'containers/Items/withItems';
 
 
 function ItemsViewsTabs({
@@ -25,6 +26,7 @@ function ItemsViewsTabs({
   viewId,
   viewItem,
 
+  // #withItems
   itemsViews,
 
   // #withItemsActions
@@ -121,4 +123,7 @@ export default compose(
   withDashboard,
   withItemsActions,
   withViewDetail,
+  withItems( ({ itemsViews }) => ({
+    itemsViews,
+  }))
 )(ItemsViewsTabs);

client/src/containers/Items/withItemCategories.js

@@ -1,11 +1,13 @@
 import { connect } from 'react-redux';
 
-
-export const mapStateToProps = (state, props) => {
-  return {
-    categoriesList: Object.values(state.itemCategories.categories),
-    categoriesTableLoading: state.itemCategories.loading,
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const mapped = {
+      categoriesList: Object.values(state.itemCategories.categories),
+      categoriesTableLoading: state.itemCategories.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapState;
   };
-};
-
-export default connect(mapStateToProps);
+  
+  return connect(mapStateToProps);
+};

client/src/containers/Items/withItems.js

@@ -7,20 +7,22 @@ import {
   getCurrentPageResults
 } from 'store/selectors';
 
-export const mapStateToProps = (state, props) => {
-  const viewPages = getViewPages(state.items.views, state.items.currentViewId);
-
-  return {
-    itemsViews: getResourceViews(state, 'items'),
-    itemsCurrentPage: getCurrentPageResults(
-      state.items.items,
-      viewPages,
-      state.items.currentPage,
-    ),
-    itemsBulkSelected: state.items.bulkActions,
-    itemsTableLoading: state.items.loading,
-    itemsTableQuery: state.items.tableQuery,
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const viewPages = getViewPages(state.items.views, state.items.currentViewId);
+    const mapped = {
+      itemsViews: getResourceViews(state, 'items'),
+      itemsCurrentPage: getCurrentPageResults(
+        state.items.items,
+        viewPages,
+        state.items.currentPage,
+      ),
+      itemsBulkSelected: state.items.bulkActions,
+      itemsTableLoading: state.items.loading,
+      itemsTableQuery: state.items.tableQuery,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
   };
-};
 
-export default connect(mapStateToProps);
+  return connect(mapStateToProps);
+};

client/src/containers/Resources/withResourceDetails.js

@@ -5,16 +5,15 @@ import {
   getResourceMetadata,
 } from 'store/resources/resources.reducer';
 
-export const mapStateToProps = (state, props) => {
-  const { resourceName } = props;
-
-  console.log(props, 'XX');
-
-  return {
-    resourceFields: getResourceFields(state, resourceName),
-    resourceColumns: getResourceColumns(state, resourceName),
-    resourceMetadata: getResourceMetadata(state, resourceName),
-  };
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { resourceName } = props;
+    const mapped =  {
+      resourceFields: getResourceFields(state, resourceName),
+      resourceColumns: getResourceColumns(state, resourceName),
+      resourceMetadata: getResourceMetadata(state, resourceName),
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };  
+  return connect(mapStateToProps);
 };
-
-export default connect(mapStateToProps);

client/src/containers/Views/ViewForm.container.js

@@ -1,6 +1,7 @@
 import {connect} from 'react-redux';
 import {compose} from 'utils';
-import DashboardConnect from 'connectors/Dashboard.connector';
+
+import withDashboard from 'containers/Dashboard/withDashboard';
 import withResourceDetail from 'containers/Resources/withResourceDetails';
 import withViewsActions from 'containers/Views/withViewsActions';
 import withViewsDetails from 'containers/Views/withViewDetails';
@@ -15,9 +16,9 @@ const mapStateToProps = (state, ownProps) => {
 const viewFormConnect = connect(mapStateToProps);
 
 export default compose(
-  DashboardConnect,
+  withDashboard,
   withViewsActions,
-  withViewsDetails,
+  withViewsDetails(),
   viewFormConnect,
-  withResourceDetail,
+  withResourceDetail(),
 );

client/src/containers/Views/ViewForm.js

@@ -32,7 +32,6 @@ function ViewForm({
 
   viewId,
   viewMeta,
-  viewItem,
 
   resourceName,
   resourceColumns,

client/src/containers/Views/ViewFormPage.js

@@ -5,13 +5,16 @@ import { Intent, Alert } from '@blueprintjs/core';
 import DashboardInsider from 'components/Dashboard/DashboardInsider';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import ViewForm from 'containers/Views/ViewForm';
-import withResourcesActions from 'containers/Resources/withResourcesActions';
-import withViewsActions from 'containers/Views/withViewsActions';
-import withDashboard from 'containers/Dashboard/withDashboard';
+
 import AppToaster from 'components/AppToaster';
 import {compose} from 'utils';
 import { If } from 'components';
 
+import withResourcesActions from 'containers/Resources/withResourcesActions';
+import withViewsActions from 'containers/Views/withViewsActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+
+
 // @flow
 function ViewFormPage({
   changePageTitle,