React 18 version update

react/example/package.json

@@ -19,8 +19,8 @@
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "http-proxy-middleware": "^1.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-i18next": "11.16.2",
     "react-router-dom": "5.3.0",
     "react-scripts": "^4.0.1",

react/libraries-core/package.json

@@ -14,12 +14,12 @@
     "prepublish": "yarn build"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "gh-pages": "2.2.0",
     "microbundle-crl": "0.13.11",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.0.0",
     "react-scripts": "^4.0.1"
   },
   "dependencies": {
@@ -31,7 +31,7 @@
     "i18next": "19.9.2",
     "i18next-react-postprocessor": "3.0.7",
     "pdfmake": "0.1.72",
-    "react": "17.0.2",
+    "react": "^18.0.0",
     "react-i18next": "11.16.2",
     "react-query": "3.6.1",
     "react-redux": "7.2.8",

react/libraries/package.json

@@ -14,12 +14,12 @@
     "prepublish": "yarn build"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "gh-pages": "2.2.0",
     "microbundle-crl":  "0.13.11",
-    "react-dom": "17.0.2",
+    "react-dom": "^18.0.0",
     "react-scripts": "^4.0.1"
   },
   "dependencies": {
@@ -31,7 +31,7 @@
     "i18next": "19.9.2",
     "i18next-react-postprocessor": "3.0.7",
     "pdfmake": "0.1.72",
-    "react": "17.0.2",
+    "react": "^18.0.0",
     "react-i18next": "11.16.2",
     "react-query": "3.6.1",
     "react-redux": "7.2.8",

react/modules/Project/package.json

@@ -14,16 +14,16 @@
         "prepublish": "yarn build"
     },
     "peerDependencies": {
-        "react": "17.0.2",
+        "react": "^18.0.0",
         "react-router-dom": "5.3.0"
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
         "@egovernments/digit-ui-components": "0.0.2-beta.12",
         "lodash": "^4.17.21",
-        "react": "17.0.2",
+        "react": "^18.0.0",
         "react-date-range": "^1.4.0",
-        "react-dom": "17.0.2",
+        "react-dom": "^18.0.0",
         "react-hook-form": "6.15.8",
         "react-i18next": "11.16.2",
         "react-query": "3.6.1",

react/modules/core/package.json

@@ -16,8 +16,8 @@
   "dependencies": {
     "@egovernments/digit-ui-components": "0.0.2-beta.12",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-i18next": "11.16.2",
     "react-query": "3.6.1",
     "react-redux": "7.2.8",

react/modules/core/src/components/Home.js

@@ -1,5 +1,5 @@
 import {
-  BackButton,
+  BackLink,
   CitizenHomeCard,
   CitizenInfoLabel,
   Loader,
@@ -95,7 +95,7 @@ const CitizenHome = ({
         {location.pathname.includes(
           "sanitation-ui/citizen/all-services"
         ) ? null : (
-          <BackButton />
+          <BackLink />
         )}
         <div className="citizenAllServiceGrid">
           {moduleArray

react/modules/core/src/components/Search/MobileSearchApplication.js

@@ -1,5 +1,5 @@
 import {
-  BackButton,
+  BackLink,
   DetailsCard,
   Header,
   Loader,
@@ -199,7 +199,7 @@ const MobileSearchApplication = ({
 
   return (
     <React.Fragment>
-      <BackButton />
+      <BackLink />
       <div
         className="sideContent"
         style={{ marginLeft: "70%", marginTop: "-12%" }}

react/modules/core/src/components/Search/index.js

@@ -3,7 +3,7 @@ import {
   Table,
 } from "@egovernments/digit-ui-react-components";
 import {
-  BackButton,
+  BackLink,
   Loader,
   SearchForm,
   Header
@@ -197,7 +197,7 @@ const SearchApplication = ({ tenantId, t, onSubmit, data, count }) => {
     <React.Fragment>
       <div style={{ marginRight: "-70px" }}>
         {" "}
-        <BackButton />{" "}
+        <BackLink />{" "}
       </div>
       <div style={{ marginTop: "30px", marginLeft: "30px" }}>
         {" "}

react/modules/core/src/components/TopBarSideBar/SideBar/EmployeeSideBar.js

@@ -1,9 +1,10 @@
 import React, { useRef, useEffect, useState } from "react";
-import { Loader,SearchIcon } from "@egovernments/digit-ui-components";
+import { Loader, SearchIcon } from "@egovernments/digit-ui-components";
 import { useTranslation } from "react-i18next";
 import Sidebar from "./SideBar";
 
-const checkMatch = (path = "", searchCriteria = "") => path.toLowerCase().includes(searchCriteria.toLowerCase());
+const checkMatch = (path = "", searchCriteria = "") =>
+  path.toLowerCase().includes(searchCriteria.toLowerCase());
 
 const EmployeeSideBar = () => {
   const sidebarRef = useRef(null);
@@ -13,22 +14,25 @@ const EmployeeSideBar = () => {
   const [subNav, setSubNav] = useState(false);
 
   useEffect(() => {
-    if (isLoading) {
-      return <Loader />;
+    if (!isLoading && sidebarRef.current) {
+      sidebarRef.current.style.cursor = "pointer";
+      collapseNav();
     }
-    sidebarRef.current.style.cursor = "pointer";
-    collapseNav();
   }, [isLoading]);
 
   const expandNav = () => {
-    sidebarRef.current.style.width = "260px";
-    // sidebarRef.current.style.overflow = "auto";
-    setSubNav(true);
+    if (sidebarRef.current) {
+      sidebarRef.current.style.width = "260px";
+      setSubNav(true);
+    }
   };
+
   const collapseNav = () => {
-    sidebarRef.current.style.width = "60px";
-    sidebarRef.current.style.overflow = "hidden";
-    setSubNav(false);
+    if (sidebarRef.current) {
+      sidebarRef.current.style.width = "60px";
+      sidebarRef.current.style.overflow = "hidden";
+      setSubNav(false);
+    }
   };
 
   function mergeObjects(obj1, obj2) {
@@ -53,17 +57,16 @@ const EmployeeSideBar = () => {
     .filter((e) => e.url === "url")
     .forEach((item) => {
       let index = item?.path?.split(".")?.[0] || "";
-      if (search == "" && item.path !== "") {
+      if (search === "" && item.path !== "") {
         const keys = item.path.split(".");
         let hierarchicalMap = {};
 
         keys.reduce((acc, key, index) => {
           if (index === keys.length - 1) {
-            // If it's the last key, set the value to an empty object or whatever you need.
-            acc[key] = { item }; // You can set the value to any other value or object.
+            acc[key] = { item };
           } else {
             acc[key] = {};
-            return acc[key]; // Return the nested object for the next iteration.
+            return acc[key];
           }
         }, hierarchicalMap);
         mergeObjects(configEmployeeSideBar, hierarchicalMap);
@@ -76,11 +79,10 @@ const EmployeeSideBar = () => {
 
         keys.reduce((acc, key, index) => {
           if (index === keys.length - 1) {
-            // If it's the last key, set the value to an empty object or whatever you need.
-            acc[key] = { item }; // You can set the value to any other value or object.
+            acc[key] = { item };
           } else {
             acc[key] = {};
-            return acc[key]; // Return the nested object for the next iteration.
+            return acc[key];
           }
         }, hierarchicalMap);
         mergeObjects(configEmployeeSideBar, hierarchicalMap);
@@ -90,32 +92,16 @@ const EmployeeSideBar = () => {
   const splitKeyValue = (configEmployeeSideBar) => {
     const objectArray = Object.entries(configEmployeeSideBar);
 
-    // Sort the array based on the 'orderNumber' or the length of the object if 'orderNumber' is not present
-    // sort logic updated to sort the parent item by alphabetical
     objectArray.sort((a, b) => {
-      if (a[0] < b[0]) { return -1; }
-      if (a[0] > b[0]) { return 1; }
+      if (a[0] < b[0]) return -1;
+      if (a[0] > b[0]) return 1;
       return 0;
-      // const orderNumberA = a[1].item
-      //   ? a[1].item.orderNumber || Object.keys(configEmployeeSideBar).length + 1
-      //   : Object.keys(configEmployeeSideBar).length + 1;
-      // const orderNumberB = b[1].item
-      //   ? b[1].item.orderNumber || Object.keys(configEmployeeSideBar).length + 1
-      //   : Object.keys(configEmployeeSideBar).length + 1;
-      // return orderNumberA - orderNumberB;
     });
     const sortedObject = Object.fromEntries(objectArray);
     configEmployeeSideBar = sortedObject;
     return <Sidebar data={configEmployeeSideBar} />;
   };
 
-  if (isLoading) {
-    return <Loader />;
-  }
-  if (!configEmployeeSideBar) {
-    return "";
-  }
-
   const renderSearch = () => {
     return (
       <div className="">
@@ -142,6 +128,14 @@ const EmployeeSideBar = () => {
     );
   };
 
+  if (isLoading) {
+    return <Loader />;
+  }
+
+  if (!configEmployeeSideBar) {
+    return null;
+  }
+
   return (
     <div className="sidebar" ref={sidebarRef} onMouseOver={expandNav} onMouseLeave={collapseNav}>
       {renderSearch()}

react/modules/core/src/components/TopBarSideBar/TopBar.js

@@ -10,6 +10,7 @@ const TextToImg = (props) => (
     {props?.name?.[0]?.toUpperCase()}
   </span>
 );
+
 const TopBar = ({
   t,
   stateInfo,
@@ -27,21 +28,29 @@ const TopBar = ({
 }) => {
   const [profilePic, setProfilePic] = React.useState(null);
 
-  React.useEffect(async () => {
-    const tenant = Digit.ULBService.getCurrentTenantId();
-    const uuid = userDetails?.info?.uuid;
-    if (uuid) {
-      const usersResponse = await Digit.UserService.userSearch(tenant, { uuid: [uuid] }, {});
-      if (usersResponse && usersResponse.user && usersResponse.user.length) {
-        const userDetails = usersResponse.user[0];
-        const thumbs = userDetails?.photo?.split(",");
-        setProfilePic(thumbs?.at(0));
+  // Update useEffect to handle async function correctly
+  React.useEffect(() => {
+    const fetchProfilePic = async () => {
+      const tenant = Digit.ULBService.getCurrentTenantId();
+      const uuid = userDetails?.info?.uuid;
+      if (uuid) {
+        try {
+          const usersResponse = await Digit.UserService.userSearch(tenant, { uuid: [uuid] }, {});
+          if (usersResponse && usersResponse.user && usersResponse.user.length) {
+            const userDetails = usersResponse.user[0];
+            const thumbs = userDetails?.photo?.split(",");
+            setProfilePic(thumbs?.at(0));
+          }
+        } catch (error) {
+          console.error('Error fetching user profile picture:', error);
+        }
       }
-    }
-  }, [profilePic !== null, userDetails?.info?.uuid]);
+    };
+
+    fetchProfilePic();
+  }, [userDetails?.info?.uuid]); // Correct dependency array
 
   const CitizenHomePageTenantId = Digit.ULBService.getCitizenCurrentTenant(true);
-
   let history = useHistory();
   const { pathname } = useLocation();
 
@@ -98,21 +107,24 @@ const TopBar = ({
       </div>
     );
   }
+
   const loggedin = userDetails?.access_token ? true : false;
+
   return (
     <div className="topbar">
-      <div className="digit-hamburger-class">{<Hamburger  handleClick={toggleSidebar} color="#9E9E9E" />}</div>
+      <div className="digit-hamburger-class">
+        <Hamburger handleClick={toggleSidebar} color="#9E9E9E" />
+      </div>
       <img className="city" src={loggedin ? cityDetails?.logoId : stateInfo?.statelogo} />
       <span className="digit-topbar-container">
-        {loggedin &&
-          (cityDetails?.city?.ulbGrade ? (
-            <p className="ulb">
-              {t(cityDetails?.i18nKey).toUpperCase()}{" "}
-              {t(`ULBGRADE_${cityDetails?.city?.ulbGrade.toUpperCase().replace(" ", "_").replace(".", "_")}`).toUpperCase()}
-            </p>
-          ) : (
-            <img className="state" src={logoUrl} />
-          ))}
+        {loggedin && (cityDetails?.city?.ulbGrade ? (
+          <p className="ulb">
+            {t(cityDetails?.i18nKey).toUpperCase()}{" "}
+            {t(`ULBGRADE_${cityDetails?.city?.ulbGrade.toUpperCase().replace(" ", "_").replace(".", "_")}`).toUpperCase()}
+          </p>
+        ) : (
+          <img className="state" src={logoUrl} />
+        ))}
         {!loggedin && (
           <p className="ulb">
             {t(`MYCITY_${stateInfo?.code?.toUpperCase()}_LABEL`)} {t(`MYCITY_STATECODE_LABEL`)}

react/modules/core/src/pages/citizen/FAQs/FAQs.js

@@ -1,4 +1,4 @@
-import { BackButton, Header, Loader ,SearchIconSvg} from "@egovernments/digit-ui-components";
+import { BackLink, Header, Loader ,SearchIconSvg} from "@egovernments/digit-ui-components";
 import React, { Fragment } from "react";
 import { useTranslation } from "react-i18next";
 import FaqComponent from "./FaqComponent";
@@ -22,7 +22,7 @@ const FAQsSection = ({ module }) => {
   return (
     <Fragment>
       <div className="faq-page">
-        <BackButton style={{ marginLeft: "unset" }}></BackButton>
+        <BackLink style={{ marginLeft: "unset" }}></BackLink>
         <div style={{ marginBottom: "15px" }}>
           <Header styles={{ marginLeft: "0px", paddingTop: "10px", fontSize: "32px" }}>{t("FAQ_S")}</Header>
         </div>

react/modules/core/src/pages/citizen/Home/LocationSelection.js

@@ -1,4 +1,4 @@
-import { BackButton, CardHeader, CardLabelError, PageBasedInput, SearchOnRadioButtons } from "@egovernments/digit-ui-components";
+import { BackLink, CardHeader, CardLabelError, PageBasedInput, SearchOnRadioButtons } from "@egovernments/digit-ui-components";
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
@@ -51,7 +51,7 @@ const LocationSelection = () => {
     <loader />
   ) : (
     <div className="selection-card-wrapper">
-      <BackButton />
+      <BackLink />
       <PageBasedInput texts={texts} onSubmit={onSubmit} className="location-selection-container">
         <CardHeader>{t("CS_COMMON_CHOOSE_LOCATION")}</CardHeader>
         <SearchOnRadioButtons {...RadioButtonProps} placeholder={t("COMMON_TABLE_SEARCH")} />