fix: toggle display filter drawer of financial statements.

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummary.js

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
 
 import 'style/pages/FinancialStatements/ARAgingSummary.scss';
@@ -11,6 +11,7 @@ import ARAgingSummaryTable from './ARAgingSummaryTable';
 import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
 import { ARAgingSummaryProvider } from './ARAgingSummaryProvider';
 
+import withARAgingSummaryActions from './withARAgingSummaryActions'
 import withSettings from 'containers/Settings/withSettings';
 
 import { compose } from 'utils';
@@ -21,6 +22,9 @@ import { compose } from 'utils';
 function ReceivableAgingSummarySheet({
   // #withSettings
   organizationName,
+
+  // #withARAgingSummaryActions
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     asDate: moment().endOf('day').format('YYYY-MM-DD'),
@@ -42,6 +46,11 @@ function ReceivableAgingSummarySheet({
     setFilter({ ...filter, numberFormat });
   };
 
+  // Hide the filter drawer once the page unmount.
+  useEffect(() => () => {
+    toggleDisplayFilterDrawer(false);
+  }, [toggleDisplayFilterDrawer]);
+
   return (
     <ARAgingSummaryProvider filter={filter}>
       <ARAgingSummaryActionsBar
@@ -67,4 +76,5 @@ export default compose(
   withSettings(({ organizationSettings }) => ({
     organizationName: organizationSettings.name,
   })),
+  withARAgingSummaryActions
 )(ReceivableAgingSummarySheet);

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryActionsBar.js

@@ -17,6 +17,7 @@ import NumberFormatDropdown from 'components/NumberFormatDropdown';
 
 import { useARAgingSummaryContext } from './ARAgingSummaryProvider';
 import withARAgingSummaryActions from './withARAgingSummaryActions';
+import withARAgingSummary from './withARAgingSummary';
 
 import { compose } from 'utils';
 import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
@@ -26,10 +27,10 @@ import { safeInvoke } from '@blueprintjs/core/lib/esm/common/utils';
  */
 function ARAgingSummaryActionsBar({
   // #withReceivableAging
-  receivableAgingFilter,
+  isFilterDrawerOpen,
 
   // #withReceivableAgingActions
-  toggleFilterARAgingSummary,
+  toggleARAgingSummaryFilterDrawer: toggleDisplayFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -38,16 +39,19 @@ function ARAgingSummaryActionsBar({
   const { isARAgingFetching, refetch } = useARAgingSummaryContext();
 
   const handleFilterToggleClick = () => {
-    toggleFilterARAgingSummary();
+    toggleDisplayFilterDrawer(false);
   };
+
   // Handles re-calculate report button.
   const handleRecalcReport = () => {
     refetch();
   };
+
   // Handle number format submit.
   const handleNumberFormatSubmit = (numberFormat) => {
     safeInvoke(onNumberFormatSubmit, numberFormat);
   };
+
   return (
     <DashboardActionsBar>
       <NavbarGroup>
@@ -63,14 +67,14 @@ function ARAgingSummaryActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            receivableAgingFilter ? (
+            isFilterDrawerOpen ? (
               <T id="hide_customizer" />
             ) : (
               <T id={'customize_report'} />
             )
           }
           onClick={handleFilterToggleClick}
-          active={receivableAgingFilter}
+          active={isFilterDrawerOpen}
         />
         <NavbarDivider />
 
@@ -117,4 +121,7 @@ function ARAgingSummaryActionsBar({
 
 export default compose(
   withARAgingSummaryActions,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
+  }))
 )(ARAgingSummaryActionsBar);

client/src/containers/FinancialStatements/ARAgingSummary/ARAgingSummaryHeader.js

@@ -20,10 +20,12 @@ function ARAgingSummaryHeader({
   // #ownProps
   pageFilter,
   onSubmitFilter,
-  receivableAgingFilter,
 
   // #withReceivableAgingSummaryActions
-  toggleFilterARAgingSummary,
+  toggleARAgingSummaryFilterDrawer: toggleFilterDrawerDisplay,
+
+  // #withARAgingSummary
+  isFilterDrawerOpen
 }) {
   const validationSchema = Yup.object().shape({
     asDate: Yup.date().required().label('asDate'),
@@ -44,19 +46,20 @@ function ARAgingSummaryHeader({
     agingDaysBefore: 30,
     agingPeriods: 3,
   };
+
   // Handle form submit.
   const handleSubmit = (values, { setSubmitting }) => {
     onSubmitFilter(values);
-    toggleFilterARAgingSummary();
+    toggleFilterDrawerDisplay(false);
     setSubmitting(false);
   };
   // Handle cancel button click.
   const handleCancelClick = () => {
-    toggleFilterARAgingSummary();
+    toggleFilterDrawerDisplay(false);
   };
 
   return (
-    <FinancialStatementHeader isOpen={receivableAgingFilter}>
+    <FinancialStatementHeader isOpen={isFilterDrawerOpen}>
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -87,7 +90,7 @@ function ARAgingSummaryHeader({
 
 export default compose(
   withARAgingSummaryActions,
-  withARAgingSummary(({ receivableAgingSummaryFilter }) => ({
-    receivableAgingFilter: receivableAgingSummaryFilter,
+  withARAgingSummary(({ ARAgingSummaryFilterDrawer }) => ({
+    isFilterDrawerOpen: ARAgingSummaryFilterDrawer,
   })),
 )(ARAgingSummaryHeader);

client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummary.js

@@ -1,34 +1,12 @@
 import { connect } from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetAccountsFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
+  getARAgingSummaryFilterDrawer,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getARAgingSheet = getFinancialSheetFactory('receivableAgingSummary');
-    const getARAgingSheetColumns = getFinancialSheetColumnsFactory(
-      'receivableAgingSummary',
-    );
-    const getARAgingSheetRows = getFinancialSheetTableRowsFactory(
-      'receivableAgingSummary',
-    );
-    const {
-      loading,
-      filter,
-      refresh,
-    } = state.financialStatements.receivableAgingSummary;
-
     const mapped = {
-      receivableAgingSummarySheet: getARAgingSheet(state, props),
-      receivableAgingSummaryColumns: getARAgingSheetColumns(state, props),
-      receivableAgingSummaryRows: getARAgingSheetRows(state, props),
-      receivableAgingSummaryLoading: loading,
-      receivableAgingSummaryFilter: filter,
-      ARAgingSummaryRefresh: refresh,
+      ARAgingSummaryFilterDrawer: getARAgingSummaryFilterDrawer(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

client/src/containers/FinancialStatements/ARAgingSummary/withARAgingSummaryActions.js

@@ -1,18 +1,9 @@
 import { connect } from 'react-redux';
-import {
-  fetchReceivableAgingSummary,
-  receivableAgingSummaryRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { toggleARAgingSummaryFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 const mapActionsToProps = (dispatch) => ({
-  requestReceivableAgingSummary: (query) =>
-    dispatch(fetchReceivableAgingSummary({ query })),
-  toggleFilterARAgingSummary: () =>
-    dispatch({
-      type: 'RECEIVABLE_AGING_SUMMARY_FILTER_TOGGLE',
-    }),
-  refreshARAgingSummary: (refresh) =>
-    dispatch(receivableAgingSummaryRefresh(refresh)),
+  toggleARAgingSummaryFilterDrawer: (toggle) => 
+    dispatch(toggleARAgingSummaryFilterDrawer(toggle)),
 });
 
 export default connect(null, mapActionsToProps);