BUGFIX/HCMPRE-2250 : Added loader while data is loading (#2193)

BUGFIX/HCMPRE-2250 : Added loader while data is loading for the Boundary KPI
egovernments · Feb 5, 2025 · 168c43f · 168c43f
1 parent c65b8b8
commit 168c43f
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 64 deletions.
diff --git a/.../micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundaryKpi.js b/.../micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundaryKpi.js
@@ -1,11 +1,17 @@
 import React from 'react';
 import { Card } from '@egovernments/digit-ui-components';
+import { Loader } from '@egovernments/digit-ui-components';
 import { useMyContext } from '../utils/context';
 import { useTranslation } from 'react-i18next';
 import { Fragment } from 'react';
 const BoundaryKpi = ({ data, heading }) => {
   const { state: { boundaryHierarchy } } = useMyContext()
   const { t } = useTranslation();
+
+  if (!data || Object.keys(data).length === 0) {
+    return <Card className="middle-child"> {<Loader />}</Card>;
+  }
+
   return (
 
     <Card className="middle-child">

diff --git a/...-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundarySelection.js b/...-ui/web/micro-ui-internals/packages/modules/microplan/src/components/BoundarySelection.js
@@ -18,13 +18,12 @@ const BoundarySelection = ({ onSelect, props: customProps, ...props }) => {
   const [statusMap, setStatusMap] = useState({});
   const [executionCount, setExecutionCount] = useState(0);
   const [updateBoundary, setUpdateBoundary] = useState(true);
-  const [isStatusMapLoading, setIsStatusMapLoading] = useState(false); 
+  const [showPopup, setShowPopup] = useState(false);
   const handleBoundaryChange = (value) => {
     setBoundaryOptions(value?.boundaryOptions);
     setSelectedData(value?.selectedData);
   };
 
-  const [showPopup, setShowPopup] = useState(false)
 
 
   const { campaignId, microplanId, key, ...queryParams } = Digit.Hooks.useQueryParams();
@@ -52,25 +51,18 @@ const BoundarySelection = ({ onSelect, props: customProps, ...props }) => {
   //to show alert
   useEffect(() => {
     //if there are any assumptions filled show this popup by default
-    if (campaignObject?.boundaries?.length > 0) {
+    if (campaignObject?.boundaries?.length > 0 && !showPopup) {
       setShowPopup(true)
     }
   }, [campaignObject, isLoadingCampaignObject])
 
 
   useEffect(() => {
-    // Show loader before updating statusMap
-    setIsStatusMapLoading(true);
+    setStatusMap(null);
     if (selectedData && selectedData.length >= 0) {
       const newStatusMap = Digit.Utils.microplanv1.createStatusMap(selectedData, boundaryHierarchy);
       setStatusMap(newStatusMap);
-      // Hide loader after updating statusMap
-      setIsStatusMapLoading(false);
     }
-    return () => {
-      // Cleanup function to prevent state updates if component unmounts during loading
-      setIsStatusMapLoading(false);
-    };
   }, [selectedData, boundaryHierarchy]);
 
 
@@ -104,7 +96,7 @@ const BoundarySelection = ({ onSelect, props: customProps, ...props }) => {
 
   return (
     <>
-      {isStatusMapLoading ? <Loader /> : <BoundaryKpi data={statusMap} />}
+      <BoundaryKpi data={statusMap} />
       <CardNew className={"selecting-boundary-card"}>
         <Header styles={{ margin: "0rem" }}>{t(`MICROPLAN_SELECT_BOUNDARY`)}</Header>
         <p className="boundary-selection-description">{t(`MICROPLAN_SELECT_BOUNDARIES_DESCRIPTION`)}</p>
@@ -121,39 +113,41 @@ const BoundarySelection = ({ onSelect, props: customProps, ...props }) => {
           }}
         ></BoundaryWrapper>
       </CardNew>
-      {showPopup && <PopUp
-        className={"boundaries-pop-module"}
-        type={"alert"}
-        alertHeading={t("MP_WARNING_BOUNDARIES_FORM")}
-        alertMessage={t("MP_FILES_INVALIDATION_MESSAGE")}
-        // heading={t("MP_ASSUMTI")}
-        // children={[
-        //   <div>
-        //     <CardText style={{ margin: 0 }}>{t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT") + " "}</CardText>
-        //   </div>,
-        // ]}
-        onOverlayClick={() => {
-          setShowPopup(false);
-        }}
-        onClose={() => {
-          setShowPopup(false);
-        }}
-        footerChildren={[
-          <Button
-            className={"campaign-type-alert-button"}
-            type={"button"}
-            size={"large"}
-            variation={"secondary"}
-            label={t("MP_ACK")}
-            title={t("MP_ACK")}
-            onClick={() => {
-              setShowPopup(false);
-              //   setCanUpdate(true);
-            }}
-          />
-        ]}
-      // sortFooterChildren={true}
-      ></PopUp>}
+      {showPopup && (
+        <PopUp
+          className={"boundaries-pop-module"}
+          type={"alert"}
+          alertHeading={t("MP_WARNING_BOUNDARIES_FORM")}
+          alertMessage={t("MP_FILES_INVALIDATION_MESSAGE")}
+          // heading={t("MP_ASSUMTI")}
+          // children={[
+          //   <div>
+          //     <CardText style={{ margin: 0 }}>{t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_TEXT") + " "}</CardText>
+          //   </div>,
+          // ]}
+          onOverlayClick={() => {
+            setShowPopup(false);
+          }}
+          onClose={() => {
+            setShowPopup(false);
+          }}
+          footerChildren={[
+            <Button
+              className={"campaign-type-alert-button"}
+              type={"button"}
+              size={"large"}
+              variation={"secondary"}
+              label={t("MP_ACK")}
+              title={t("MP_ACK")}
+              onClick={() => {
+                setShowPopup(false);
+                //   setCanUpdate(true);
+              }}
+            />,
+          ]}
+          // sortFooterChildren={true}
+        ></PopUp>
+      )}
     </>
   );
 };

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/utils/utilities.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/utils/utilities.js
@@ -7,25 +7,13 @@ const destroySessionHelper = (currentPath, pathList, sessionName) => {
 };
 
 function createStatusMap(data, boundaryHierarchy) {
-  // Initialize an empty map to store counts of each type
-  const statusMap = {};
-  boundaryHierarchy.forEach((boundary) => {
-    statusMap[boundary.boundaryType] = 0;
-  });
-
-  if (data.length === 0) return statusMap;
-  // Iterate over each object in the array
-  data?.forEach((item) => {
-    // If the type already exists in the map, increment the count
-    if (statusMap[item.type]) {
-      statusMap[item.type]++;
-    } else {
-      // Otherwise, initialize the count for this type
-      statusMap[item.type] = 1;
-    }
-  });
-
-  return statusMap;
+  return data.reduce((statusMap, { type }) => {
+    statusMap[type] = (statusMap[type] || 0) + 1;
+    return statusMap;
+  }, boundaryHierarchy.reduce((initialMap, { boundaryType }) => {
+    initialMap[boundaryType] = 0;
+    return initialMap;
+  }, {}));
 }
 
 const formValidator = (formData, key, state, t) => {