feat: Optimize connect component props with redux store.

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