feat: Optimize connect component props with redux store.

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