feat: Optimize connect component props with redux store.

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