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