feat: Optimize connect component props with redux store.

2026-02-18 13:50:31 +00:00 · 2020-05-10 02:14:42 +02:00
parent e590a21740
commit a0653674ff
58 changed files with 660 additions and 460 deletions
--- a/client/src/components/Preferences/PreferencesPage.js
+++ b/client/src/components/Preferences/PreferencesPage.js
@@ -6,5 +6,5 @@ export default function PreferencesPage() {
    <div class="preferences-page">
      <PreferencesSidebar />
    </div>
-  )
+  );
 }
--- a/client/src/config/sidebarMenu.js
+++ b/client/src/config/sidebarMenu.js
@@ -1,3 +1,4 @@
+
 export default [
  {
    divider: true
--- a/client/src/connectors/BalanceSheet.connect.js
+++ b/client/src/connectors/BalanceSheet.connect.js
@@ -1,27 +0,0 @@
-import {connect} from 'react-redux';
-import {
-  fetchBalanceSheet,
-} from 'store/financialStatement/financialStatements.actions';
-import {
-  getFinancialSheetIndexByQuery,
-  getFinancialSheet,
-  getFinancialSheetAccounts,
-  getFinancialSheetColumns,
-  getFinancialSheetQuery,
-} from 'store/financialStatement/financialStatements.selectors';
-
-
-export const mapStateToProps = (state, props) => ({
-  getBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.balanceSheet.sheets, query),
-  getBalanceSheet: (index) => getFinancialSheet(state.financialStatements.balanceSheet.sheets, index),
-  getBalanceSheetAccounts: (index) => getFinancialSheetAccounts(state.financialStatements.balanceSheet.sheets, index),
-  getBalanceSheetColumns:(index) => getFinancialSheetColumns(state.financialStatements.balanceSheet.sheets, index),
-  getBalanceSheetQuery: (index) => getFinancialSheetQuery(state.financialStatements.balanceSheet.sheets, index),
-  balanceSheetLoading: state.financialStatements.balanceSheet.loading,
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),  
-});
-
-export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/BalanceSheetTable.connect.js
+++ b/client/src/connectors/BalanceSheetTable.connect.js
@@ -1,27 +0,0 @@
-import {connect} from 'react-redux';
-import {
-  fetchBalanceSheet,
-} from 'store/financialStatement/financialStatements.actions';
-import {
-  getFinancialSheetIndexByQuery,
-  getFinancialSheet,
-  getFinancialSheetsAccounts,
-  getFinancialSheetsColumns,
-} from 'store/financialStatement/financialStatements.selectors';
-
-
-export const mapStateToProps = (state, props) => {
-  const sheetIndex = props.balanceSheetIndex;
-
-  return {
-    balanceSheetAccounts: props.getBalanceSheetAccounts(sheetIndex),
-    balanceSheetQuery: props.getBalanceSheetQuery(sheetIndex),
-    balanceSheetColumns: props.getBalanceSheetColumns(sheetIndex),
-  };
-};
-
-export const mapDispatchToProps = (dispatch) => ({
-  
-});
-
-export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/FinancialStatements.connector.js
+++ b/client/src/connectors/FinancialStatements.connector.js
@@ -1,36 +0,0 @@
-import {connect} from 'react-redux';
-import {
-  fetchGeneralLedger,
-  fetchBalanceSheet,
-} from 'store/financialStatement/financialStatements.actions';
-import {
-  getBalanceSheetByQuery,
-  getBalanceSheetColumns,
-  getBalanceSheetIndexByQuery,
-  getBalanceSheetByIndex,
-  getBalanceSheetAssetsAccounts,
-  getBalanceSheetLiabilitiesAccounts,
-  getBalanceSheetQuery,
-} from 'store/financialStatement/financialStatements.selectors';
-
-export const mapStateToProps = (state, props) => ({
-  generalLedeger: state.financialStatements.generalLedger,
-  balanceSheets: state.financialStatements.balanceSheets,
-
-  getBalanceSheetByQuery: (query) => getBalanceSheetByQuery(state.financialStatements.balanceSheets, query),
-  getBalanceSheetColumns: (sheetIndex) => getBalanceSheetColumns(state.financialStatements.balanceSheets, sheetIndex),
-  getBalanceSheetIndexByQuery: (query) => getBalanceSheetIndexByQuery(state.financialStatements.balanceSheets, query),
-  getBalanceSheetByIndex: (sheetIndex) => getBalanceSheetByIndex(state.financialStatements.balanceSheets, sheetIndex),
-
-  getBalanceSheetAssetsAccounts: (sheetIndex) => getBalanceSheetAssetsAccounts(state.financialStatements.balanceSheets, sheetIndex),
-  getBalanceSheetLiabilitiesAccounts: (sheetIndex) => getBalanceSheetLiabilitiesAccounts(state.financialStatements.balanceSheets, sheetIndex),
-
-  getBalanceSheetQuery: (sheetIndex) => getBalanceSheetQuery(state.financialStatements.balanceSheets, sheetIndex),
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
-  fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/Journal.connect.js
+++ b/client/src/connectors/Journal.connect.js
@@ -7,6 +7,7 @@ import {
  getFinancialSheet,
 } from 'store/financialStatement/financialStatements.selectors';

+
 export const mapStateToProps = (state, props) => ({
  getJournalSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.journal.sheets, query),
  getJournalSheet: (index) => getFinancialSheet(state.financialStatements.journal.sheets, index),
--- a/client/src/connectors/ProfitLossSheet.connect.js
+++ b/client/src/connectors/ProfitLossSheet.connect.js
@@ -1,27 +0,0 @@
-import {connect} from 'react-redux';
-import {
-  fetchProfitLossSheet,
-} from 'store/financialStatement/financialStatements.actions';
-import {
-  getFinancialSheetIndexByQuery,
-  getFinancialSheet,
-  getFinancialSheetColumns,
-  getFinancialSheetQuery,
-  getFinancialSheetTableRows,
-} from 'store/financialStatement/financialStatements.selectors';
-
-export const mapStateToProps = (state, props) => ({
-  getProfitLossSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.profitLoss.sheets, query),
-  getProfitLossSheet: (index) => getFinancialSheet(state.financialStatements.profitLoss.sheets, index),
-  getProfitLossColumns: (index) => getFinancialSheetColumns(state.financialStatements.profitLoss.sheets, index),
-  getProfitLossQuery: (index) => getFinancialSheetQuery(state.financialStatements.profitLoss.sheets, index),
-  getProfitLossTableRows: (index) => getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, index),
-
-  profitLossSheetLoading: state.financialStatements.profitLoss.loading,
-});
-
-export const mapDispatchToProps = (dispatch) => ({
-  fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/ProfitLossTable.connect.js
+++ b/client/src/connectors/ProfitLossTable.connect.js
@@ -1,17 +0,0 @@
-import {connect} from 'react-redux';
-
-export const mapStateToProps = (state, props) => {
-  const sheetIndex = props.profitLossSheetIndex;
-  
-  return {
-    profitLossTableRows: props.getProfitLossTableRows(sheetIndex),
-    profitLossColumns: props.getProfitLossColumns(sheetIndex),
-    profitLossQuery: props.getProfitLossQuery(sheetIndex),
-  };
-};
-
-export const mapDispatchToProps = (dispatch) => ({
-  
-});
-
-export default connect(mapStateToProps, mapDispatchToProps);
--- a/client/src/connectors/TrialBalanceSheet.connect.js
+++ b/client/src/connectors/TrialBalanceSheet.connect.js
@@ -8,6 +8,7 @@ import {
  getFinancialSheetQuery,
 } from 'store/financialStatement/financialStatements.selectors';

+
 export const mapStateToProps = (state, props) => ({
  getTrialBalanceSheetIndex: (query) => getFinancialSheetIndexByQuery(state.financialStatements.trialBalance.sheets, query),
  getTrialBalanceAccounts: (sheetIndex) => getFinancialSheetAccounts(state.financialStatements.trialBalance.sheets, sheetIndex),
--- a/client/src/containers/Accounting/MakeJournalEntriesForm.js
+++ b/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,
--- a/client/src/containers/Accounting/MakeJournalEntriesPage.js
+++ b/client/src/containers/Accounting/MakeJournalEntriesPage.js
@@ -46,7 +46,6 @@ function MakeJournalEntriesPage({
 }

 export default compose(
-  // DashboardConnect,
  withAccountsActions,
  withManualJournalsActions,
 )(MakeJournalEntriesPage);
--- a/client/src/containers/Accounting/MakeJournalEntriesTable.js
+++ b/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);
--- a/client/src/containers/Accounting/ManualJournalActionsBar.js
+++ b/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);
--- a/client/src/containers/Accounting/ManualJournalsDataTable.js
+++ b/client/src/containers/Accounting/ManualJournalsDataTable.js
@@ -202,6 +202,9 @@ export default compose(
  withDashboardActions,
  // withViewsActions,
  withManualJournalsActions,
-  withManualJournals,
+  withManualJournals(({ manualJournals, manualJournalsLoading, }) => ({
+    manualJournals,
+    manualJournalsLoading,
+  })),
  withViewDetails,
 )(ManualJournalsDataTable);
--- a/client/src/containers/Accounting/ManualJournalsList.js
+++ b/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>

--- a/client/src/containers/Accounting/ManualJournalsViewTabs.js
+++ b/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);
--- a/client/src/containers/Accounting/withManualJournals.js
+++ b/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);
+};
--- a/client/src/containers/Accounts/AccountsActionsBar.js
+++ b/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);
--- a/client/src/containers/Accounts/AccountsChart.js
+++ b/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);
--- a/client/src/containers/Accounts/AccountsDataTable.js
+++ b/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);
--- a/client/src/containers/Accounts/AccountsViewsTabs.js
+++ b/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);
--- a/client/src/containers/Accounts/withAccounts.js
+++ b/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);
+};
--- a/client/src/containers/Dialogs/AccountFormDialog.container.js
+++ b/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,
 );
--- a/client/src/containers/Dialogs/ItemCategoryDialog.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheet.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/BalanceSheet/BalanceSheetTable.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetActions.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/BalanceSheet/withBalanceSheetDetail.js
+++ b/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);
+}
--- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js
--- a/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
+++ b/client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js
--- a/client/src/containers/FinancialStatements/Journal/Journal.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/Journal/JournalHeader.js
+++ b/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);
    },
  });

--- a/client/src/containers/FinancialStatements/Journal/JournalTable.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/Journal/withJournal.js
+++ b/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);
+};
--- a/client/src/containers/FinancialStatements/Journal/withJournalActions.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js
+++ b/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'
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js
+++ b/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);
+}
--- a/client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js
+++ b/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);
    }
  });

--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js
+++ b/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);
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js
+++ b/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);
+};
--- a/client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js
+++ b/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);
--- a/client/src/containers/Items/ItemCategoriesList.js
+++ b/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);
--- a/client/src/containers/Items/ItemCategoriesTable.js
+++ b/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);
--- a/client/src/containers/Items/ItemsActionsBar.js
+++ b/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);
--- a/client/src/containers/Items/ItemsCategoryActionsBar.js
+++ b/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);
--- a/client/src/containers/Items/ItemsDataTable.js
+++ b/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);
--- a/client/src/containers/Items/ItemsList.js
+++ b/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,
--- a/client/src/containers/Items/ItemsViewsTabs.js
+++ b/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);
--- a/client/src/containers/Items/withItemCategories.js
+++ b/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);
+};
--- a/client/src/containers/Items/withItems.js
+++ b/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);
+};
--- a/client/src/containers/Resources/withResourceDetails.js
+++ b/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);
--- a/client/src/containers/Views/ViewForm.container.js
+++ b/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(),
 );
--- a/client/src/containers/Views/ViewForm.js
+++ b/client/src/containers/Views/ViewForm.js
@@ -32,7 +32,6 @@ function ViewForm({

  viewId,
  viewMeta,
-  viewItem,

  resourceName,
  resourceColumns,
--- a/client/src/containers/Views/ViewFormPage.js
+++ b/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,