OLMIS-7903: fixed duplicate code

OpenLMIS · Apr 4, 2024 · 026d887 · 026d887
1 parent 48c050b
commit 026d887
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 70 deletions.
diff --git a/src/buq/components/MOHApproval/MOHActionBarFinalApprove.jsx b/src/buq/components/MOHApproval/MOHActionBarFinalApprove.jsx
@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import Modal from '../../../admin-buq/components/Modal/Modal';
+import ActionBar from '../../../react-components/ActionBar';
+import ConfirmModalBody from '../../../react-components/ConfirmModalBody';
+import ModalErrorMessage from '../../../react-components/ModalErrorMessage';
+
+const MOHActionBarFinalApprove = ({
+    handleFinalApproveAction,
+    displayFinalApproveModal,
+    handleSetDisplayFinalApproveModal,
+    displayFinalApproveErrorModal,
+    handleSetDisplayFinalApproveErrorModal
+}) => (
+    <>
+        <Modal
+            isOpen={displayFinalApproveModal}
+            children={[
+                <ConfirmModalBody
+                    onConfirm={handleFinalApproveAction}
+                    confirmMessage={'Are you sure you want to approve this forecasting?'}
+                    onCancel={() => handleSetDisplayFinalApproveModal(false)}
+                    confirmButtonText={'Approve'}
+                />,
+            ]}
+            sourceOfFundStyle={true}
+        />
+        <ModalErrorMessage
+            isOpen={displayFinalApproveErrorModal}
+            customMessage="At least one pending approval needs to be selected"
+            onClose={() => handleSetDisplayFinalApproveErrorModal(false)}
+        />
+        <ActionBar
+            onFinalApproveAction={() => handleSetDisplayFinalApproveModal(true)}
+            finalApproveButton={true}
+            cancelButton={false}
+            totalCostInformation={false}
+            sourceOfFundButton={false}
+        />
+    </>
+)
+
+export default MOHActionBarFinalApprove
diff --git a/src/buq/components/MOHApproval/MOHApproveRegionBuq.jsx b/src/buq/components/MOHApproval/MOHApproveRegionBuq.jsx
@@ -1,36 +1,30 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { toast } from 'react-toastify';
-import InputWithSuggestionsAndValidation from '../../../react-components/inputs/input-with-suggestions-and-validation';
 import useBuqCommonFuncs from '../../../react-hooks/useBuqCommonFunctions';
 import Table from '../../../react-components/table/table';
 import ResponsiveButton from '../../../react-components/buttons/responsive-button';
 import Checkbox from '../../../react-components/inputs/checkbox';
-import ActionBar from '../../../react-components/ActionBar';
-import Modal from '../../../admin-buq/components/Modal/Modal';
-import ConfirmModalBody from '../../../react-components/ConfirmModalBody';
 import { Link } from 'react-router-dom';
 import { STORAGE_MOH_APPROVAL_PARAMS } from '../../utils/constants';
 import WebTooltip from '../../../react-components/modals/web-tooltip';
 import useGeographicZoneGroup from '../../../react-hooks/useGeographicZoneGroup';
 import useServerService from '../../../react-hooks/useServerService';
 import useLocalStorage from '../../../react-hooks/useLocalStorage';
 import useCostCalculationRegion from '../../../react-hooks/useCostCalculationRegion';
-import ModalErrorMessage from '../../../react-components/ModalErrorMessage';
 import { addThousandsSeparatorsForStrings } from '../../utils/helpers';
 import MOHSearchBuq from "./MOHSearchBuq";
+import MOHActionBarFinalApprove from "./MOHActionBarFinalApprove";
 
 const MOHApproveRegionBuq = ({ loadingModalService }) => {
   const { forecastingPeriodsParams } = useBuqCommonFuncs();
   const { geographicZoneParams } = useGeographicZoneGroup();
 
   const [group, setGroup] = useState();
   const [forecastingPeriodId, setForecastingPeriodId] = useState();
-  const [displayFinalApproveModal, setDisplayFinalApproveModal] =
-    useState(false);
   const [data, setData] = useState([]);
   const [selectedCheckbox, setSelectedCheckbox] = useState(false);
-  const [displayFinalApproveErrorModal, setDisplayFinalApproveErrorModal] =
-    useState(false);
+  const [displayFinalApproveModal, setDisplayFinalApproveModal] = useState(false);
+  const [displayFinalApproveErrorModal, setDisplayFinalApproveErrorModal] = useState(false);
 
   const buqService = useServerService('buqService');
 
@@ -206,10 +200,10 @@ const MOHApproveRegionBuq = ({ loadingModalService }) => {
     ],
     [data, selectedCheckbox]
   );
-
-    const handleSetData = (payload) => setData(payload);
     const handleSetGroup = (payload) => setGroup(payload);
     const handleSetForecastingPeriodId = (payload) => setForecastingPeriodId(payload);
+    const handleSetDisplayFinalApproveErrorModal = (payload) => setDisplayFinalApproveErrorModal(payload);
+    const handleSetDisplayFinalApproveModal = (payload) => setDisplayFinalApproveModal(payload);
 
   return (
     <>
@@ -219,7 +213,7 @@ const MOHApproveRegionBuq = ({ loadingModalService }) => {
           geographicZoneParams={geographicZoneParams}
           forecastingPeriodsParams={forecastingPeriodsParams}
           group={group}
-          handleSetGroup={handleSetData}
+          handleSetGroup={handleSetGroup}
           forecastingPeriodId={forecastingPeriodId}
           handleSetForecastingPeriodId={handleSetForecastingPeriodId}
           fetchBuqs={fetchRegionData}
@@ -231,32 +225,13 @@ const MOHApproveRegionBuq = ({ loadingModalService }) => {
           customReactTableStyle="moh-approve-buq-region"
         />
       </div>
-      <Modal
-        isOpen={displayFinalApproveModal}
-        children={[
-          <ConfirmModalBody
-            onConfirm={handleFinalApproveAction}
-            confirmMessage={
-              'Are you sure you want to approve this forecasting?'
-            }
-            onCancel={() => setDisplayFinalApproveModal(false)}
-            confirmButtonText={'Approve'}
-          />,
-        ]}
-        sourceOfFundStyle={true}
-      />
-      <ModalErrorMessage
-        isOpen={displayFinalApproveErrorModal}
-        customMessage="At least one pending approval needs to be selected"
-        onClose={() => setDisplayFinalApproveErrorModal(false)}
-      />
-      <ActionBar
-        onFinalApproveAction={() => setDisplayFinalApproveModal(true)}
-        finalApproveButton={true}
-        cancelButton={false}
-        totalCostInformation={false}
-        sourceOfFundButton={false}
-      />
+        <MOHActionBarFinalApprove
+            handleFinalApproveAction={handleFinalApproveAction}
+            displayFinalApproveModal={displayFinalApproveModal}
+            handleSetDisplayFinalApproveModal={handleSetDisplayFinalApproveModal}
+            displayFinalApproveErrorModal={displayFinalApproveErrorModal}
+            handleSetDisplayFinalApproveErrorModal={handleSetDisplayFinalApproveErrorModal}
+        />
     </>
   );
 };

diff --git a/src/buq/components/MOHApproval/MohForFinalApproval.jsx b/src/buq/components/MOHApproval/MohForFinalApproval.jsx
@@ -1,18 +1,14 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
-import InputWithSuggestionsAndValidation from '../../../react-components/inputs/input-with-suggestions-and-validation';
 import useBuqCommonFuncs from '../../../react-hooks/useBuqCommonFunctions';
-import ActionBar from '../../../react-components/ActionBar';
-import Modal from '../../../admin-buq/components/Modal/Modal';
-import ConfirmModalBody from '../../../react-components/ConfirmModalBody';
 import useGeographicZoneGroup from '../../../react-hooks/useGeographicZoneGroup';
 import useServerService from '../../../react-hooks/useServerService';
 import useCostCalculationRegion from '../../../react-hooks/useCostCalculationRegion';
-import ModalErrorMessage from '../../../react-components/ModalErrorMessage';
 import MOHFinalApprovalTable from "./MOHFinalApprovalTable";
 import useCostCalculationsForFourLevels from "../../../react-hooks/useCostCalculationsForFourLevels";
 import DetailsBlock from '../../../react-components/DetailsBlock';
 import MOHSearchBuq from "./MOHSearchBuq";
+import MOHActionBarFinalApprove from "./MOHActionBarFinalApprove";
 
 const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
     const { forecastingPeriodsParams } = useBuqCommonFuncs();
@@ -177,6 +173,10 @@ const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
     const handleSetGroup = (payload) => setGroup(payload);
     const handleSetForecastingPeriodId = (payload) => setForecastingPeriodId(payload);
 
+    const handleSetDisplayFinalApproveModal = (payload) => setDisplayFinalApproveModal(payload);
+
+    const handleSetDisplayFinalApproveErrorModal = (payload) => setDisplayFinalApproveErrorModal(payload);
+
     return (
         <>
             <h2 className="bottom-line">Consolidated Summary</h2>
@@ -185,7 +185,7 @@ const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
                     geographicZoneParams={geographicZoneParams}
                     forecastingPeriodsParams={forecastingPeriodsParams}
                     group={group}
-                    handleSetGroup={handleSetData}
+                    handleSetGroup={handleSetGroup}
                     forecastingPeriodId={forecastingPeriodId}
                     handleSetForecastingPeriodId={handleSetForecastingPeriodId}
                     fetchBuqs={fetchBuqForFinalApproval}
@@ -205,31 +205,12 @@ const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
                     />
                 </div>
             </div>
-            <Modal
-                isOpen={displayFinalApproveModal}
-                children={[
-                    <ConfirmModalBody
-                        onConfirm={handleFinalApproveAction}
-                        confirmMessage={
-                            'Are you sure you want to approve this forecasting?'
-                        }
-                        onCancel={() => setDisplayFinalApproveModal(false)}
-                        confirmButtonText={'Approve'}
-                    />,
-                ]}
-                sourceOfFundStyle={true}
-            />
-            <ModalErrorMessage
-                isOpen={displayFinalApproveErrorModal}
-                customMessage="At least one pending approval needs to be selected"
-                onClose={() => setDisplayFinalApproveErrorModal(false)}
-            />
-            <ActionBar
-                onFinalApproveAction={() => setDisplayFinalApproveModal(true)}
-                finalApproveButton={true}
-                cancelButton={false}
-                totalCostInformation={false}
-                sourceOfFundButton={false}
+            <MOHActionBarFinalApprove
+                handleFinalApproveAction={handleFinalApproveAction}
+                displayFinalApproveModal={displayFinalApproveModal}
+                handleSetDisplayFinalApproveModal={handleSetDisplayFinalApproveModal}
+                displayFinalApproveErrorModal={displayFinalApproveErrorModal}
+                handleSetDisplayFinalApproveErrorModal={handleSetDisplayFinalApproveErrorModal}
             />
         </>
     );