fix: financial statements.

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedger.js

@@ -1,24 +1,33 @@
 import React, { useEffect, useCallback, useState, useMemo } from 'react';
 import moment from 'moment';
 import GeneralLedgerTable from 'containers/FinancialStatements/GeneralLedger/GeneralLedgerTable';
-import useAsync from 'hooks/async';
-import DashboardConnect from 'connectors/Dashboard.connector';
-import GeneralLedgerConnect from 'connectors/GeneralLedgerSheet.connect';
+import { useQuery } from 'react-query';
+
 import GeneralLedgerHeader from './GeneralLedgerHeader';
+
 import {compose} from 'utils';
+
 import DashboardInsider from 'components/Dashboard/DashboardInsider'
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import GeneralLedgerActionsBar from './GeneralLedgerActionsBar';
-import AccountsConnect from 'connectors/Accounts.connector';
-import SettingsConnect from 'connectors/Settings.connect';
+
+import withGeneralLedgerActions from './withGeneralLedgerActions';
+import withDashboard from 'containers/Dashboard/withDashboard';
+import withAccountsActions from 'containers/Accounts/withAccountsActions';
+import withSettings from 'containers/Settings/withSettings';
+
 
 function GeneralLedger({
+  // #withDashboard
   changePageTitle,
-  getGeneralLedgerSheetIndex,
-  getGeneralLedgerSheet,
+
+  // #withGeneralLedgerActions
   fetchGeneralLedger,
-  generalLedgerSheetLoading,
+  
+  // #withAccountsActions
   requestFetchAccounts,
+
+  // #withSettings
   organizationSettings,
 }) {
   const [filter, setFilter] = useState({
@@ -27,34 +36,32 @@ function GeneralLedger({
     basis: 'accural',
     none_zero: true,
   });
+  const [refetch, setRefetch] = useState(false);
 
   // Change page title of the dashboard.
   useEffect(() => {
     changePageTitle('General Ledger');
   }, []);
 
-  const fetchHook = useAsync(() => {
-    return Promise.all([
-      requestFetchAccounts(),
-    ]);
-  });
+  const fetchAccounts = useQuery(['accounts-list'],
+    () => requestFetchAccounts());
 
-  const fetchSheet = useAsync((query = filter) => {
-    return Promise.all([
-      fetchGeneralLedger(query),
-    ]);
-  }, false);
+  const fetchSheet = useQuery(['general-ledger', filter],
+    (key, query) => fetchGeneralLedger(query),
+    { manual: true });
 
-  const generalLedgerSheetIndex = useMemo(() => 
-    getGeneralLedgerSheetIndex(filter),
-    [getGeneralLedgerSheetIndex, filter]);
-
-  const generalLedgerSheet = useMemo(() =>
-    getGeneralLedgerSheet(generalLedgerSheetIndex),
-    [generalLedgerSheetIndex, getGeneralLedgerSheet])
+  // Refetch general ledger sheet effect.
+  useEffect(() => {
+    if (refetch) {
+      fetchSheet.refetch({ force: true });
+      setRefetch(false);
+    }
+  }, [fetchSheet, refetch]);
 
   // Handle fetch data of trial balance table.
-  const handleFetchData = useCallback(() => { fetchSheet.execute() }, [fetchSheet]);
+  const handleFetchData = useCallback(() => {
+    setRefetch(true);
+  }, []);
   
   // Handle financial statement filter change.
   const handleFilterSubmit = useCallback((filter) => {
@@ -64,14 +71,15 @@ function GeneralLedger({
       to_date: moment(filter.to_date).format('YYYY-MM-DD'),
     };
     setFilter(parsedFilter);
-    fetchSheet.execute(parsedFilter);
-  }, [setFilter, fetchSheet]);
+    setRefetch(true);
+  }, [setFilter]);
 
   const handleFilterChanged = () => {};
 
   return (
     <DashboardInsider>
-      <GeneralLedgerActionsBar onFilterChanged={handleFilterChanged} />
+      <GeneralLedgerActionsBar
+        onFilterChanged={handleFilterChanged} />
 
       <DashboardPageContent>
         <div class="financial-statement financial-statement--general-ledger">
@@ -82,11 +90,7 @@ function GeneralLedger({
           <div class="financial-statement__table">
             <GeneralLedgerTable
               companyName={organizationSettings.name}
-              loading={generalLedgerSheetLoading}
-              data={[
-                ... (generalLedgerSheet) ?
-                  generalLedgerSheet.tableRows : [],
-              ]}
+              generalLedgerQuery={filter}
               onFetchData={handleFetchData} />
           </div>
         </div>
@@ -96,8 +100,8 @@ function GeneralLedger({
 }
 
 export default compose(
-  DashboardConnect,
-  AccountsConnect,
-  GeneralLedgerConnect,
-  SettingsConnect,
+  withGeneralLedgerActions,
+  withDashboard,
+  withAccountsActions,
+  withSettings,
 )(GeneralLedger);

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerActionsBar.js

@@ -15,10 +15,12 @@ import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar'
 import classNames from 'classnames';
 import FilterDropdown from 'components/FilterDropdown';
 
+/**
+ * General ledger actions bar.
+ */
 export default function GeneralLedgerActionsBar({
 
 }) {
-
   const filterDropdown = FilterDropdown({
     fields: [],
     onFilterChange: (filterConditions) => {

client/src/containers/FinancialStatements/GeneralLedger/GeneralLedgerTable.js

@@ -1,11 +1,19 @@
 import React, {useEffect, useState, useCallback, useMemo} from 'react';
+import moment from 'moment';
+import { connect } from 'react-redux';
+import {
+  defaultExpanderReducer,
+  compose
+} from 'utils';
+
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
 import Money from 'components/Money';
-import moment from 'moment';
+
 import {
-  defaultExpanderReducer,
-} from 'utils';
+  getFinancialSheetIndexByQuery,
+} from 'store/financialStatement/financialStatements.selectors';
+import withGeneralLedger from './withGeneralLedger';
 
 
 const ROW_TYPE = {
@@ -13,13 +21,15 @@ const ROW_TYPE = {
   OPENING_BALANCE: 'opening_balance',
   ACCOUNT: 'account_name',
   TRANSACTION: 'transaction',
-}
+};
 
-export default function GeneralLedgerTable({
+function GeneralLedgerTable({
   companyName,
   onFetchData,
-  loading,
-  data,
+
+  generalLedgerSheetLoading,
+  generalLedgerTableRows,
+  generalLedgerQuery,
 }) {
   // Account name column accessor.
   const accountNameAccessor = useCallback((row) => {
@@ -141,20 +151,23 @@ export default function GeneralLedgerTable({
   }, [onFetchData]);
 
   // Default expanded rows of general ledger table.
-  const expandedRows = useMemo(() => defaultExpanderReducer(data, 1), [data]);
+  const expandedRows = useMemo(
+    () => defaultExpanderReducer(generalLedgerTableRows, 1),
+    [generalLedgerTableRows]);
 
   return (
     <FinancialSheet
       companyName={companyName}
       sheetType={'General Ledger Sheet'}
-      date={new Date()}
+      fromDate={generalLedgerQuery.from_date}
+      toDate={generalLedgerQuery.to_date}
       name="general-ledger"
-      loading={loading}>
+      loading={generalLedgerSheetLoading}>
 
       <DataTable
         className="bigcapital-datatable--financial-report"
         columns={columns}
-        data={data}
+        data={generalLedgerTableRows}
         onFetchData={handleFetchData}
         expanded={expandedRows}
         virtualizedRows={true}
@@ -162,4 +175,30 @@ export default function GeneralLedgerTable({
         fixedSizeHeight={1000}  />
     </FinancialSheet>
   ); 
-}
+}
+
+const mapStateToProps = (state, props) => {
+  const { generalLedgerQuery } = props;
+
+  return {
+    generalLedgerIndex: getFinancialSheetIndexByQuery(
+      state.financialStatements.generalLedger.sheets,
+      generalLedgerQuery,
+    ),
+  };
+};
+
+const withGeneralLedgerTable = connect(mapStateToProps);
+
+export default compose(
+  withGeneralLedgerTable,
+  withGeneralLedger(({
+    generalLedgerTableRows,
+    generalLedgerSheetLoading,
+    generalLedgerQuery,
+  }) => ({
+    generalLedgerTableRows,
+    generalLedgerSheetLoading,
+    generalLedgerQuery
+  })),
+)(GeneralLedgerTable);

client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedger.js

@@ -0,0 +1,31 @@
+import {connect} from 'react-redux';
+import {
+  getFinancialSheet,
+  getFinancialSheetQuery,
+  getFinancialSheetTableRows,
+} from 'store/financialStatement/financialStatements.selectors';
+
+
+export default (mapState) => {
+  const mapStateToProps = (state, props) => {
+    const { generalLedgerIndex } = props;
+
+    const mapped = {
+      generalLedgerSheet: getFinancialSheet(
+        state.financialStatements.generalLedger.sheets,
+        generalLedgerIndex,
+      ),
+      generalLedgerTableRows: getFinancialSheetTableRows(
+        state.financialStatements.generalLedger.sheets,
+        generalLedgerIndex,
+      ),
+      generalLedgerQuery: getFinancialSheetQuery(
+        state.financialStatements.generalLedger.sheets,
+        generalLedgerIndex,
+      ),
+      generalLedgerSheetLoading: state.financialStatements.generalLedger.loading,
+    };
+    return mapState ? mapState(mapped, state, props) : mapped;
+  };
+  return connect(mapStateToProps);
+};

client/src/containers/FinancialStatements/GeneralLedger/withGeneralLedgerActions.js

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