feat: Optimize connect component props with redux store.

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossActionsBar.js

@@ -3,12 +3,7 @@ import {
   NavbarGroup,
   Button,
   Classes,
-  NavbarHeading,
   NavbarDivider,
-  Intent,
-  Popover,
-  PopoverInteractionKind,
-  Position,
 } from '@blueprintjs/core';
 import Icon from 'components/Icon';
 import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheet.js

@@ -1,22 +1,32 @@
-import React, {useState, useMemo, useCallback, useEffect} from 'react';
+import React, {useState, useCallback, useEffect} from 'react';
 import moment from 'moment';
-import useAsync from 'hooks/async';
 import {compose} from 'utils';
+import { useQuery } from 'react-query';
+
 import ProfitLossSheetHeader from './ProfitLossSheetHeader';
 import ProfitLossSheetTable from './ProfitLossSheetTable';
-import DashboardConnect from 'connectors/Dashboard.connector';
-import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
+import ProfitLossActionsBar from './ProfitLossActionsBar';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent'
-import ProfitLossActionsBar from './ProfitLossActionsBar';
+
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withProfitLossActions from './withProfitLossActions';
+import withProfitLoss from './withProfitLoss';
 import SettingsConnect from 'connectors/Settings.connect';
 
 
 function ProfitLossSheet({
+  // #withDashboard
   changePageTitle,
+
+  // #withProfitLossActions
   fetchProfitLossSheet,
-  getProfitLossSheetIndex,
+
+  // #withProfitLoss
   profitLossSheetLoading,
+
+  // #withPreferences
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -31,16 +41,8 @@ function ProfitLossSheet({
   }, [changePageTitle]);
 
   // Fetches profit/loss sheet.
-  const fetchHook = useAsync((query = filter) => {
-    return Promise.all([
-      fetchProfitLossSheet(query),
-    ]);
-  }, false);
-
-  // Retrieve profit/loss sheet index based on the given filter query.
-  const profitLossSheetIndex = useMemo(() =>
-    getProfitLossSheetIndex(filter),
-    [getProfitLossSheetIndex, filter]);
+  const fetchHook = useQuery(['profit-loss', filter],
+    (key, query) => { fetchProfitLossSheet(query); });
 
   // Handle submit filter.
   const handleSubmitFilter = useCallback((filter) => {
@@ -50,16 +52,17 @@ function ProfitLossSheet({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(_filter);
-    fetchHook.execute(_filter);
-  }, [fetchHook]);
+  }, []);
 
   // Handle fetch data of profit/loss sheet table.
-  const handleFetchData = useCallback(() => { fetchHook.execute(); }, [fetchHook]);
+  const handleFetchData = useCallback(() => {
+    fetchHook.refetch();
+  }, [fetchHook]);
 
   return (
     <DashboardInsider>
-      <ProfitLossActionsBar  />
-      
+      <ProfitLossActionsBar />
+ 
       <DashboardPageContent>
         <div class="financial-statement">
           <ProfitLossSheetHeader
@@ -69,7 +72,7 @@ function ProfitLossSheet({
           <div class="financial-statement__body">
             <ProfitLossSheetTable
               companyName={organizationSettings.name}
-              profitLossSheetIndex={profitLossSheetIndex}
+              profitLossQuery={filter}
               onFetchData={handleFetchData}
               loading={profitLossSheetLoading} />
           </div> 
@@ -80,7 +83,10 @@ function ProfitLossSheet({
 }
 
 export default compose(
-  DashboardConnect,
-  ProfitLossSheetConnect,
+  withDashboard,
+  withProfitLossActions,
+  withProfitLoss(({ profitLossSheetLoading }) => ({
+    profitLossSheetLoading,
+  })),
   SettingsConnect,
 )(ProfitLossSheet);

client/src/containers/FinancialStatements/ProfitLossSheet/ProfitLossSheetTable.js

@@ -1,18 +1,25 @@
-import React, {useState, useMemo, useCallback} from 'react';
+import React, { useMemo, useCallback } from 'react';
+import { connect } from 'react-redux';
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import ProfitLossSheetConnect from 'connectors/ProfitLossSheet.connect';
-import ProfitLossSheetTableConnect from 'connectors/ProfitLossTable.connect';
+
 import { compose, defaultExpanderReducer } from 'utils';
+import {
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+import withProfitLossDetail from './withProfitLoss';
 
 
 function ProfitLossSheetTable({
-  loading,
-  onFetchData,
+  // #withProfitLoss
   profitLossTableRows,
   profitLossQuery,
   profitLossColumns,
+
+  // #ownProps
+  loading,
+  onFetchData,
   companyName,
 }) {
   const columns = useMemo(() => [
@@ -132,7 +139,20 @@ function ProfitLossSheetTable({
   );
 }
 
+const mapStateToProps = (state, props) => ({
+  profitLossIndex: getFinancialSheetIndexByQuery(
+    state.financialStatements.profitLoss.sheets,
+    props.profitLossQuery,
+  ),
+});
+
+const withProfitLossTable = connect(mapStateToProps);
+
 export default compose(
-  ProfitLossSheetConnect,
-  ProfitLossSheetTableConnect,
+  withProfitLossTable,
+  withProfitLossDetail(({ profitLossQuery, profitLossColumns, profitLossTableRows }) => ({
+    profitLossColumns,
+    profitLossQuery,
+    profitLossTableRows,
+  })),
 )(ProfitLossSheetTable);

client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLoss.js

@@ -0,0 +1,26 @@
+import {connect} from 'react-redux';
+import {
+  getFinancialSheetIndexByQuery,
+  getFinancialSheet,
+  getFinancialSheetColumns,
+  getFinancialSheetQuery,
+  getFinancialSheetTableRows,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { profitLossIndex } = props;
+
+    const mapped = {
+      profitLossSheet: getFinancialSheet(state.financialStatements.profitLoss.sheets, profitLossIndex),
+      profitLossColumns: getFinancialSheetColumns(state.financialStatements.profitLoss.sheets, profitLossIndex),
+      profitLossQuery: getFinancialSheetQuery(state.financialStatements.profitLoss.sheets, profitLossIndex),
+      profitLossTableRows: getFinancialSheetTableRows(state.financialStatements.profitLoss.sheets, profitLossIndex),
+
+      profitLossSheetLoading: state.financialStatements.profitLoss.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+}

client/src/containers/FinancialStatements/ProfitLossSheet/withProfitLossActions.js

@@ -0,0 +1,10 @@
+import {connect} from 'react-redux';
+import {
+  fetchProfitLossSheet,
+} from 'store/financialStatement/financialStatements.actions';
+
+export const mapDispatchToProps = (dispatch) => ({
+  fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
+});
+
+export default connect(null, mapDispatchToProps);