fix: toggle display filter drawer of financial statements.

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceActionsBar.js

@@ -22,10 +22,10 @@ import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 
 function TrialBalanceActionsBar({
   // #withTrialBalance
-  trialBalanceSheetFilter,
+  trialBalanceDrawerFilter,
 
   // #withTrialBalanceActions
-  toggleTrialBalanceFilter,
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -35,7 +35,7 @@ function TrialBalanceActionsBar({
 
   // Handle filter toggle click.
   const handleFilterToggleClick = () => {
-    toggleTrialBalanceFilter();
+    toggleFilterDrawer();
   };
 
   // Handle re-calc button click.
@@ -63,13 +63,13 @@ function TrialBalanceActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            trialBalanceSheetFilter ? (
+            trialBalanceDrawerFilter ? (
               <T id={'hide_customizer'} />
             ) : (
               <T id={'customize_report'} />
             )
           }
-          active={trialBalanceSheetFilter}
+          active={trialBalanceDrawerFilter}
           onClick={handleFilterToggleClick}
         />
         <NavbarDivider />
@@ -121,9 +121,8 @@ function TrialBalanceActionsBar({
 }
 
 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetLoading }) => ({
-    trialBalanceSheetFilter,
-    trialBalanceSheetLoading,
+  withTrialBalance(({ trialBalanceDrawerFilter }) => ({
+    trialBalanceDrawerFilter,
   })),
   withTrialBalanceActions,
 )(TrialBalanceActionsBar);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheet.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import moment from 'moment';
 
 import 'style/pages/FinancialStatements/TrialBalanceSheet.scss';
@@ -11,7 +11,6 @@ import TrialBalanceSheetTable from './TrialBalanceSheetTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import withTrialBalanceActions from './withTrialBalanceActions';
 import withSettings from 'containers/Settings/withSettings';
-import withTrialBalance from './withTrialBalance';
 
 import { compose } from 'utils';
 
@@ -21,6 +20,9 @@ import { compose } from 'utils';
 function TrialBalanceSheet({
   // #withPreferences
   organizationName,
+
+  // #withTrialBalanceSheetActions
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     fromDate: moment().startOf('year').format('YYYY-MM-DD'),
@@ -50,6 +52,11 @@ function TrialBalanceSheet({
     });
   };
 
+  // Hide the filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleFilterDrawer(false)
+  }, [toggleFilterDrawer]);
+
   return (
     <TrialBalanceSheetProvider query={filter}>
       <TrialBalanceActionsBar
@@ -73,9 +80,6 @@ function TrialBalanceSheet({
 
 export default compose(
   withTrialBalanceActions,
-  withTrialBalance(({ trialBalanceQuery }) => ({
-    trialBalanceQuery,
-  })),
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetHeader.js

@@ -13,16 +13,19 @@ import withTrialBalanceActions from './withTrialBalanceActions';
 
 import { compose } from 'utils';
 
+/**
+ * Trial balance sheet header.
+ */
 function TrialBalanceSheetHeader({
   // #ownProps
   pageFilter,
   onSubmitFilter,
 
   // #withTrialBalance
-  trialBalanceSheetFilter,
+  trialBalanceDrawerFilter,
 
   // #withTrialBalanceActions
-  toggleTrialBalanceFilter
+  toggleTrialBalanceFilterDrawer: toggleFilterDrawer,
 }) {
   const { formatMessage } = useIntl();
 
@@ -48,22 +51,22 @@ function TrialBalanceSheetHeader({
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
     setSubmitting(false);
-    toggleTrialBalanceFilter(false);
+    toggleFilterDrawer(false);
   };
 
   // Handle drawer close action.
   const handleDrawerClose = () => {
-    toggleTrialBalanceFilter(false);
+    toggleFilterDrawer(false);
   };
 
   // Handle cancel button click.
   const handleCancelClick = () => {
-    toggleTrialBalanceFilter(false);
+    toggleFilterDrawer(false);
   };
 
   return (
     <FinancialStatementHeader
-      isOpen={trialBalanceSheetFilter}
+      isOpen={trialBalanceDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -81,11 +84,7 @@ function TrialBalanceSheetHeader({
           </Tabs>
 
           <div class="financial-header-drawer__footer">
-            <Button
-              className={'mr1'}
-              intent={Intent.PRIMARY}
-              type={'submit'}
-            >
+            <Button className={'mr1'} intent={Intent.PRIMARY} type={'submit'}>
               <T id={'calculate_report'} />
             </Button>
             <Button onClick={handleCancelClick} minimal={true}>
@@ -99,9 +98,8 @@ function TrialBalanceSheetHeader({
 }
 
 export default compose(
-  withTrialBalance(({ trialBalanceSheetFilter, trialBalanceSheetRefresh }) => ({
-    trialBalanceSheetFilter,
-    trialBalanceSheetRefresh,
+  withTrialBalance(({ trialBalanceDrawerFilter }) => ({
+    trialBalanceDrawerFilter,
   })),
   withTrialBalanceActions,
 )(TrialBalanceSheetHeader);

client/src/containers/FinancialStatements/TrialBalanceSheet/TrialBalanceSheetTable.js

@@ -1,12 +1,13 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useIntl } from 'react-intl';
 
 import FinancialSheet from 'components/FinancialSheet';
 import DataTable from 'components/DataTable';
-import { CellTextSpan } from 'components/Datatable/Cells';
+
 import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
 
-import { getColumnWidth } from 'utils';
+
+import { useTrialBalanceTableColumns } from './components';
 
 /**
  * Trial Balance sheet data table.
@@ -22,42 +23,8 @@ export default function TrialBalanceSheetTable({
     isLoading
   } = useTrialBalanceSheetContext();
 
-  const columns = useMemo(
-    () => [
-      {
-        Header: formatMessage({ id: 'account_name' }),
-        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
-        className: 'name',
-        width: 160,
-        textOverview: true,
-      },
-      {
-        Header: formatMessage({ id: 'credit' }),
-        Cell: CellTextSpan,
-        accessor: 'formatted_credit',
-        className: 'credit',
-        width: getColumnWidth(tableRows, `credit`, {
-          minWidth: 95,
-        }),
-      },
-      {
-        Header: formatMessage({ id: 'debit' }),
-        Cell: CellTextSpan,
-        accessor: 'formatted_debit',
-        width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
-      },
-      {
-        Header: formatMessage({ id: 'balance' }),
-        Cell: CellTextSpan,
-        accessor: 'formatted_balance',
-        className: 'balance',
-        width: getColumnWidth(tableRows, `balance`, {
-          minWidth: 95,
-        }),
-      },
-    ],
-    [tableRows, formatMessage],
-  );
+  // Trial balance sheet table columns.
+  const columns = useTrialBalanceTableColumns();;
 
   const rowClassNames = (row) => {
     const { original } = row;

client/src/containers/FinancialStatements/TrialBalanceSheet/components.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { getColumnWidth } from 'utils';
+import { CellTextSpan } from 'components/Datatable/Cells';
+import { useTrialBalanceSheetContext } from './TrialBalanceProvider';
+
+
+/**
+ * Retrieve trial balance sheet table columns.
+ */
+export const useTrialBalanceTableColumns = () => {
+  const { formatMessage } = useIntl();
+
+  // Trial balance sheet context.
+  const {
+    trialBalanceSheet: { tableRows },
+  } = useTrialBalanceSheetContext();
+
+  return React.useMemo(
+    () => [
+      {
+        Header: formatMessage({ id: 'account_name' }),
+        accessor: (row) => (row.code ? `${row.name} - ${row.code}` : row.name),
+        className: 'name',
+        width: 160,
+        textOverview: true,
+      },
+      {
+        Header: formatMessage({ id: 'credit' }),
+        Cell: CellTextSpan,
+        accessor: 'formatted_credit',
+        className: 'credit',
+        width: getColumnWidth(tableRows, `credit`, {
+          minWidth: 95,
+        }),
+      },
+      {
+        Header: formatMessage({ id: 'debit' }),
+        Cell: CellTextSpan,
+        accessor: 'formatted_debit',
+        width: getColumnWidth(tableRows, `debit`, { minWidth: 95 }),
+      },
+      {
+        Header: formatMessage({ id: 'balance' }),
+        Cell: CellTextSpan,
+        accessor: 'formatted_balance',
+        className: 'balance',
+        width: getColumnWidth(tableRows, `balance`, {
+          minWidth: 95,
+        }),
+      },
+    ],
+    [tableRows, formatMessage],
+  );
+};

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalance.js

@@ -1,23 +1,10 @@
-import {connect} from 'react-redux';
-import {
-  getFinancialSheetFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,  
-} from 'store/financialStatement/financialStatements.selectors';
+import { connect } from 'react-redux';
+import { getTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getTrialBalance = getFinancialSheetFactory('trialBalance');
-    const getBalanceSheetQuery = getFinancialSheetQueryFactory('trialBalance');
-    const getTrialBalanceRows = getFinancialSheetTableRowsFactory('trialBalance');
-
     const mapped = {
-      trialBalance: getTrialBalance(state, props),
-      trialBalanceQuery: getBalanceSheetQuery(state, props),
-      trialBalanceTableRows: getTrialBalanceRows(state, props),
-      trialBalanceSheetLoading: state.financialStatements.trialBalance.loading,
-      trialBalanceSheetFilter: state.financialStatements.trialBalance.filter,
-      trialBalanceSheetRefresh: state.financialStatements.trialBalance.refresh,
+      trialBalanceDrawerFilter: getTrialBalanceSheetFilterDrawer(state),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/TrialBalanceSheet/withTrialBalanceActions.js

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
-import {
-  fetchTrialBalanceSheet,
-  trialBalanceRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { connect } from 'react-redux';
+import { toggleTrialBalanceSheetFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  fetchTrialBalanceSheet: (query = {}) => dispatch(fetchTrialBalanceSheet({ query })),
-  toggleTrialBalanceFilter: () => dispatch({ type: 'TRIAL_BALANCE_FILTER_TOGGLE' }),
-  refreshTrialBalance: (refresh) => dispatch(trialBalanceRefresh(refresh)),
+  toggleTrialBalanceFilterDrawer: (toggle) =>
+    dispatch(toggleTrialBalanceSheetFilterDrawer(toggle)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);