fix: toggle display filter drawer of financial statements.

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

@@ -26,10 +26,10 @@ import { useProfitLossSheetContext } from './ProfitLossProvider';
  */
 function ProfitLossActionsBar({
   // #withProfitLoss
-  profitLossSheetFilter,
+  profitLossDrawerFilter,
 
   // #withProfitLossActions
-  toggleProfitLossSheetFilter,
+  toggleProfitLossFilterDrawer: toggleFilterDrawer,
 
   // #ownProps
   numberFormat,
@@ -38,7 +38,7 @@ function ProfitLossActionsBar({
   const { sheetRefetch, isLoading } = useProfitLossSheetContext();
 
   const handleFilterClick = () => {
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer();
   };
 
   const handleRecalcReport = () => {
@@ -64,14 +64,14 @@ function ProfitLossActionsBar({
           className={classNames(Classes.MINIMAL, 'button--table-views')}
           icon={<Icon icon="cog-16" iconSize={16} />}
           text={
-            profitLossSheetFilter ? (
+            profitLossDrawerFilter ? (
               <T id={'hide_customizer'} />
             ) : (
               <T id={'customize_report'} />
             )
           }
           onClick={handleFilterClick}
-          active={profitLossSheetFilter}
+          active={profitLossDrawerFilter}
         />
         <NavbarDivider />
 
@@ -122,6 +122,6 @@ function ProfitLossActionsBar({
 }
 
 export default compose(
-  withProfitLoss(({ profitLossSheetFilter }) => ({ profitLossSheetFilter })),
+  withProfitLoss(({ profitLossDrawerFilter }) => ({ profitLossDrawerFilter })),
   withProfitLossActions,
 )(ProfitLossActionsBar);

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

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import moment from 'moment';
 import { compose } from 'utils';
-import { useIntl } from 'react-intl';
 
 import ProfitLossSheetHeader from './ProfitLossSheetHeader';
 import ProfitLossSheetTable from './ProfitLossSheetTable';
@@ -20,13 +19,11 @@ import { ProfitLossSheetProvider } from './ProfitLossProvider';
  * Profit/Loss financial statement sheet.
  */
 function ProfitLossSheet({
-  // #withDashboardActions
-  changePageTitle,
-  setDashboardBackLink,
-  setSidebarShrink,
-
   // #withPreferences
   organizationName,
+
+  // #withProfitLossActions
+  toggleProfitLossFilterDrawer: toggleDisplayFilterDrawer
 }) {
   const [filter, setFilter] = useState({
     basis: 'cash',
@@ -35,24 +32,7 @@ function ProfitLossSheet({
     displayColumnsType: 'total',
     accountsFilter: 'all-accounts',
   });
-  const { formatMessage } = useIntl();
-
-  // Change page title of the dashboard.
-  useEffect(() => {
-    changePageTitle(formatMessage({ id: 'profit_loss_sheet' }));
-  }, [changePageTitle, formatMessage]);
-
-  useEffect(() => {
-    setSidebarShrink();
-    // Show the back link on dashboard topbar.
-    setDashboardBackLink(true);
-
-    return () => {
-      // Hide the back link on dashboard topbar.
-      setDashboardBackLink(false);
-    };
-  }, [setDashboardBackLink, setSidebarShrink]);
-
+ 
   // Handle submit filter.
   const handleSubmitFilter = (filter) => {
     const _filter = {
@@ -71,6 +51,11 @@ function ProfitLossSheet({
     });
   };
 
+  // Hide the filter drawer once the page unmount.
+  React.useEffect(() => () => {
+    toggleDisplayFilterDrawer(false);
+  }, [toggleDisplayFilterDrawer])
+
   return (
     <ProfitLossSheetProvider query={filter}>
       <ProfitLossActionsBar

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

@@ -19,10 +19,10 @@ function ProfitLossHeader({
   onSubmitFilter,
 
   // #withProfitLoss
-  profitLossSheetFilter,
+  profitLossDrawerFilter,
 
   // #withProfitLossActions
-  toggleProfitLossSheetFilter,
+  toggleProfitLossFilterDrawer: toggleFilterDrawer,
 }) {
   const { formatMessage } = useIntl();
 
@@ -49,21 +49,21 @@ function ProfitLossHeader({
   // Handle form submit.
   const handleSubmit = (values, actions) => {
     onSubmitFilter(values);
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer(false);
   };
 
   // Handles the cancel button click.
   const handleCancelClick = () => {
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer(false);
   };
   // Handles the drawer close action.
   const handleDrawerClose = () => {
-    toggleProfitLossSheetFilter();
+    toggleFilterDrawer(false);
   };
 
   return (
     <FinancialStatementHeader
-      isOpen={profitLossSheetFilter}
+      isOpen={profitLossDrawerFilter}
       drawerProps={{ onClose: handleDrawerClose }}
     >
       <Formik
@@ -95,8 +95,8 @@ function ProfitLossHeader({
 }
 
 export default compose(
-  withProfitLoss(({ profitLossSheetFilter }) => ({
-    profitLossSheetFilter,
+  withProfitLoss(({ profitLossDrawerFilter }) => ({
+    profitLossDrawerFilter,
   })),
   withProfitLossActions,
 )(ProfitLossHeader);

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

@@ -1,27 +1,12 @@
 import {connect} from 'react-redux';
 import {
-  getFinancialSheetFactory,
-  getFinancialSheetColumnsFactory,
-  getFinancialSheetQueryFactory,
-  getFinancialSheetTableRowsFactory,
+  getProfitLossFilterDrawer,
 } from 'store/financialStatement/financialStatements.selectors';
 
 export default (mapState) => {
   const mapStateToProps = (state, props) => {
-    const getProfitLossSheet = getFinancialSheetFactory('profitLoss');
-    const getProfitLossColumns = getFinancialSheetColumnsFactory('profitLoss');
-    const getProfitLossQuery = getFinancialSheetQueryFactory('profitLoss');
-    const getProfitLossTableRows = getFinancialSheetTableRowsFactory('profitLoss');
-
     const mapped = {
-      profitLossSheet: getProfitLossSheet(state, props),
-      profitLossColumns: getProfitLossColumns(state, props),
-      profitLossQuery: getProfitLossQuery(state, props),
-      profitLossTableRows: getProfitLossTableRows(state, props),
-
-      profitLossSheetLoading: state.financialStatements.profitLoss.loading,
-      profitLossSheetFilter: state.financialStatements.profitLoss.filter,
-      profitLossSheetRefresh: state.financialStatements.profitLoss.refresh,
+      profitLossDrawerFilter: getProfitLossFilterDrawer(state, props),
     };
     return mapState ? mapState(mapped, state, props) : mapped;
   };

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

@@ -1,13 +1,9 @@
-import {connect} from 'react-redux';
-import {
-  fetchProfitLossSheet,
-  profitLossRefresh,
-} from 'store/financialStatement/financialStatements.actions';
+import { connect } from 'react-redux';
+import { toggleProfitLossFilterDrawer } from 'store/financialStatement/financialStatements.actions';
 
 export const mapDispatchToProps = (dispatch) => ({
-  fetchProfitLossSheet: (query = {}) => dispatch(fetchProfitLossSheet({ query })),
-  toggleProfitLossSheetFilter: () => dispatch({ type: 'PROFIT_LOSS_FILTER_TOGGLE' }),
-  refreshProfitLossSheet: (refresh) => dispatch(profitLossRefresh(refresh)),
+  toggleProfitLossFilterDrawer: (toggle) =>
+    dispatch(toggleProfitLossFilterDrawer(toggle)),
 });
 
-export default connect(null, mapDispatchToProps);
+export default connect(null, mapDispatchToProps);