UCEM-211 : Updated the changes for tanstack and taken the recent chan…

react/example/package.json

@@ -19,8 +19,8 @@
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.14",
     "http-proxy-middleware": "^1.0.5",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "19.0.0",
+    "react-dom": "19.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": "19.0.0"
   },
   "devDependencies": {
     "gh-pages": "2.2.0",
     "microbundle-crl": "0.13.11",
-    "react-dom": "17.0.2",
+    "react-dom": "19.0.0",
     "react-scripts": "^4.0.1"
   },
   "dependencies": {
@@ -31,9 +31,9 @@
     "i18next": "19.9.2",
     "i18next-react-postprocessor": "3.0.7",
     "pdfmake": "0.1.72",
-    "react": "17.0.2",
+    "react": "19.0.0",
     "react-i18next": "11.16.2",
-    "react-query": "3.39.3",
+    "@tanstack/react-query": "^5.62.16",
     "react-redux": "7.2.8",
     "react-router-dom": "5.3.0",
     "redux": "4.1.2",

react/libraries-core/src/hooks/store.js

@@ -1,17 +1,18 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { StoreService } from "../services/molecules/Store/service";
 
 export const useStore = ({ stateCode, moduleCode, language }) => {
-  return useQuery(["store", stateCode, moduleCode, language], () => StoreService.defaultData(stateCode, moduleCode, language));
+  return useQuery({
+    queryKey: ["store", stateCode, moduleCode, language],
+    queryFn: () => StoreService.defaultData(stateCode, moduleCode, language),
+  });
 };
 
 export const useInitStore = (stateCode, enabledModules) => {
-  const { isLoading, error, isError, data } = useQuery(
-    ["initStore", stateCode, enabledModules],
-    () => StoreService.digitInitData(stateCode, enabledModules),
-    {
-      staleTime: Infinity,
-    }
-  );
+  const { isLoading, error, isError, data } = useQuery({
+    queryKey: ["initStore", stateCode, enabledModules],
+    queryFn: () => StoreService.digitInitData(stateCode, enabledModules),
+    staleTime: Infinity,
+  });
   return { isLoading, error, isError, data };
 };

react/libraries-core/src/hooks/useCustomAPIHook.js

@@ -1,4 +1,4 @@
-import { useQuery, useQueryClient } from "react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { CustomService } from "../services/elements/CustomService";
 
 /**
@@ -16,7 +16,7 @@ import { CustomService } from "../services/elements/CustomService";
     {} ,                           // privacy value 
     {                              // other configs
       enabled: privacyState,
-      cacheTime: 100,
+      gcTime: 100,
       select: (data) => {
                                     // format data
         return  _.get(data, loadData?.jsonPath, value);
@@ -33,21 +33,19 @@ import { CustomService } from "../services/elements/CustomService";
 const useCustomAPIHook = ({ url, params, body, config = {}, plainAccessRequest,changeQueryName="Random" }) => {
   const client = useQueryClient();
 
-  const { isLoading, data, isFetching } = useQuery(
-    [url,changeQueryName].filter((e) => e),
-    () => CustomService.getResponse({ url, params, body, plainAccessRequest }),
-    {
-      cacheTime:0,
-      ...config,
-    }
-  );
+  const { isLoading, data, isFetching } = useQuery({
+    queryKey: [url, changeQueryName].filter(Boolean),
+    queryFn: () => CustomService.getResponse({ url, params, body, plainAccessRequest }),
+    gcTime: 0,
+    ...config,
+  });
 
   return {
     isLoading,
     isFetching,
     data,
     revalidate: () => {
-      data && client.invalidateQueries({ queryKey: [url].filter((e) => e) });
+      data && client.invalidateQueries([{ queryKey: [url].filter((e) => e) }]);
     },
   };
 };

react/libraries-core/src/hooks/useCustomMDMS.js

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { MdmsService } from "../services/elements/MDMS";
 
 /**
@@ -26,7 +26,11 @@ import { MdmsService } from "../services/elements/MDMS";
  * @returns {Object} Returns the object of the useQuery from react-query.
  */
 const useCustomMDMS = (tenantId, moduleName, masterDetails = [], config = {}) => {
-  return useQuery([tenantId, moduleName, masterDetails], () => MdmsService.getMultipleTypesWithFilter(tenantId, moduleName, masterDetails), config);
+  return useQuery({
+    queryKey: [tenantId, moduleName, masterDetails],
+    queryFn: () => MdmsService.getMultipleTypesWithFilter(tenantId, moduleName, masterDetails),
+    ...config,
+  });
 };
 
 export default useCustomMDMS;

react/libraries-core/src/hooks/useLocalities.js

@@ -1,13 +1,16 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { getLocalities } from "../services/molecules/getLocalities";
 import { LocalityService } from "../services/elements/Localities";
 
 const useLocalities = (tenant, boundaryType = "admin", config, t) => {
-  return useQuery(["BOUNDARY_DATA", tenant, boundaryType], () => getLocalities[boundaryType.toLowerCase()](tenant), {
+  return useQuery({
+    queryKey: ["BOUNDARY_DATA", tenant, boundaryType],
+    queryFn: () => getLocalities[boundaryType.toLowerCase()](tenant),
     select: (data) => {
-      return LocalityService.get(data).map((key) => {
-        return { ...key, i18nkey: t(key.i18nkey) };
-      });
+      return LocalityService.get(data).map((key) => ({
+        ...key,
+        i18nkey: t(key.i18nkey),
+      }));
     },
     staleTime: Infinity,
     ...config,

react/libraries-core/src/hooks/useLocation.js

@@ -1,15 +1,23 @@
-import { useQuery } from 'react-query';
+import { useQuery } from "@tanstack/react-query";
 import { LocationService } from "../services/elements/Location";
 
 const useLocation = (tenantId, locationType, config = {}) => {
-    switch(locationType) {
-        case 'Locality':
-            return useQuery(["LOCALITY_DETAILS", tenantId ], () => LocationService.getLocalities(tenantId), config);   
-        case 'Ward':
-            return useQuery(["WARD_DETAILS", tenantId ], () => LocationService.getWards(tenantId), config);
-        default:
-            break
-    } 
-}
+    switch (locationType) {
+      case 'Locality':
+        return useQuery({
+          queryKey: ["LOCALITY_DETAILS", tenantId],
+          queryFn: () => LocationService.getLocalities(tenantId),
+          ...config,
+        });
+      case 'Ward':
+        return useQuery({
+          queryKey: ["WARD_DETAILS", tenantId],
+          queryFn: () => LocationService.getWards(tenantId),
+          ...config,
+        });
+      default:
+        return null; // Returning null or some default value when locationType doesn't match
+    }
+  };
 
 export default useLocation;

react/libraries-core/src/hooks/useMDMS.js

@@ -1,32 +1,55 @@
 import { MdmsService } from "../services/elements/MDMS";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 const useMDMS = (tenantId, moduleCode, type, config = {}, payload = []) => {
+
+  // Payment Gateway query function
   const usePaymentGateway = () => {
-    return useQuery("PAYMENT_GATEWAY", () => MdmsService.getPaymentGateway(tenantId, moduleCode, type), {
-      select: (data) => {
-        return data?.[moduleCode]?.[type].filter((e) => e.active).map(({ gateway }) => gateway);
-      },
+    return useQuery({
+      queryKey: ["PAYMENT_GATEWAY"],
+      queryFn: () => MdmsService.getPaymentGateway(tenantId, moduleCode, type),
+      select: (data) => data?.[moduleCode]?.[type]?.filter((e) => e.active).map(({ gateway }) => gateway),
       ...config,
     });
   };
 
+  // Receipt Key query function
   const useReceiptKey = () => {
-    return useQuery("RECEIPT_KEY", () => MdmsService.getReceiptKey(tenantId, moduleCode, type), config);
+    return useQuery({
+      queryKey: ["RECEIPT_KEY"],
+      queryFn: () => MdmsService.getReceiptKey(tenantId, moduleCode, type),
+      ...config,
+    });
   };
 
+  // Bills Genie Key query function
   const useBillsGenieKey = () => {
-    return useQuery("BILLS_GENIE_KEY", () => MdmsService.getBillsGenieKey(tenantId, moduleCode, type), config);
+    return useQuery({
+      queryKey: ["BILLS_GENIE_KEY"],
+      queryFn: () => MdmsService.getBillsGenieKey(tenantId, moduleCode, type),
+      ...config,
+    });
   };
 
+  // FSTP Plant Info query function
   const useFSTPPlantInfo = () => {
-    return useQuery("FSTP_PLANTINFO", () => MdmsService.getFSTPPlantInfo(tenantId, moduleCode, type), config);
+    return useQuery({
+      queryKey: ["FSTP_PLANTINFO"],
+      queryFn: () => MdmsService.getFSTPPlantInfo(tenantId, moduleCode, type),
+      ...config,
+    });
   };
 
+  // Default query function for other types
   const _default = () => {
-    return useQuery([tenantId, moduleCode, type], () => MdmsService.getMultipleTypes(tenantId, moduleCode, type), config);
+    return useQuery({
+      queryKey: [tenantId, moduleCode, type],
+      queryFn: () => MdmsService.getMultipleTypes(tenantId, moduleCode, type),
+      ...config,
+    });
   };
 
+  // Switch based on the `type` to return the corresponding query function
   switch (type) {
     case "PaymentGateway":
       return usePaymentGateway();

react/libraries-core/src/hooks/useStore.js

@@ -1,11 +1,13 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import StoreData from "../services/molecules/StoreData";
 
 const useStore = {
   getInitData: () =>
-    useQuery(["STORE_DATA"], () => StoreData.getInitData(), {
-      staleTime: Infinity,
-    }),
+  useQuery({
+    queryKey: ["STORE_DATA"],
+    queryFn: () => StoreData.getInitData(),
+    staleTime: Infinity,
+  }),
 };
 
 export default useStore;

react/libraries-core/src/hooks/useTenants.js

@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 const alphabeticalSortFunctionForTenantsBasedOnName = (firstEl, secondEl) =>{
     if (firstEl.name.toUpperCase() < secondEl.name.toUpperCase() ) {
@@ -10,4 +10,12 @@ const alphabeticalSortFunctionForTenantsBasedOnName = (firstEl, secondEl) =>{
         return 0
 }
 
-export const useTenants = () => useQuery(["ALL_TENANTS"], () => Digit.SessionStorage.get("initData").tenants.sort(alphabeticalSortFunctionForTenantsBasedOnName))
+export const useTenants = () => {
+    return useQuery(
+      ["ALL_TENANTS"], 
+      () => {
+        const tenants = Digit.SessionStorage.get("initData")?.tenants;
+        return tenants ? tenants.sort(alphabeticalSortFunctionForTenantsBasedOnName) : [];
+      }
+    );
+  };

react/libraries/CHANGELOG.md

@@ -0,0 +1,31 @@
+# Changelog
+
+## [1.8.5]  [26-Nov-2024]
+- added new field util to generate field id
+
+## [1.8.4] [19-Nov-2024]
+- Fixed the module stablity & new components integrated, sandbox enabled 
+
+## [1.8.3]
+- 
+
+## [1.8.2-beta.7]
+- Added select function support for mdms-v2 in useCustomMDMS hook
+
+## [1.8.2-beta.1]
+- Formatted changelog file.
+
+## [1.8.1-beta.4]
+- Enhanced to load screen even if mdms is failing
+
+## [1.8.1-beta.3]
+- other fixes.
+
+## [1.8.1-beta.2]
+- Enhanced `useCustomMdms` hook to support version 2 of MDMS API calls.
+
+## [1.8.1-beta.1]
+- Added the README file.
+
+## [1.5.23]
+- Base version.

react/libraries/README.md

@@ -52,12 +52,12 @@ const App = ({ deltaConfig, stateCode, cityCode, moduleCode }) => {
 export default App;
 ```
 
-### Changelog
+## Changelog
+
+### Summary for Version [1.8.2-beta.1] - 2024-06-05
+
+For a detailed changelog, see the [CHANGELOG.md](./CHANGELOG.md) file.
 
-```bash
-1.8.1-beta.1 Republished after merging with Master due to version issues.
-1.8.0 Released as part of workbench v1.0
-```
 
 ### Published from DIGIT Frontend 
 DIGIT Frontend Repo (https://github.com/egovernments/Digit-Frontend/tree/develop)

react/libraries/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-libraries",
-  "version": "1.8.2-beta.1",
+  "version": "1.9.1-beta.1",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.js",
@@ -14,12 +14,12 @@
     "prepublish": "yarn build"
   },
   "peerDependencies": {
-    "react": "17.0.2"
+    "react": "19.0.0"
   },
   "devDependencies": {
     "gh-pages": "2.2.0",
     "microbundle-crl":  "0.13.11",
-    "react-dom": "17.0.2",
+    "react-dom": "19.0.0",
     "react-scripts": "^4.0.1"
   },
   "dependencies": {
@@ -31,9 +31,9 @@
     "i18next": "19.9.2",
     "i18next-react-postprocessor": "3.0.7",
     "pdfmake": "0.1.72",
-    "react": "17.0.2",
+    "react": "19.0.0",
     "react-i18next": "11.16.2",
-    "react-query": "3.39.3",
+    "@tanstack/react-query": "^5.62.16",
     "react-redux": "7.2.8",
     "react-router-dom": "5.3.0",
     "redux": "4.1.2",

react/libraries/src/hooks/dss/useDashboardConfig.js

@@ -2,7 +2,10 @@ import { useQuery } from "react-query";
 import { DSSService } from "../../services/elements/DSS";
 
 const useDashoardConfig = (moduleCode) => {
-  return useQuery(`DSS_DASHBOARD_CONFIG_${moduleCode}`, () => DSSService.getDashboardConfig(moduleCode));
+  return useQuery({
+    queryKey: [`DSS_DASHBOARD_CONFIG_${moduleCode}`],
+    queryFn: () => DSSService.getDashboardConfig(moduleCode),
+  });
 };
 
 export default useDashoardConfig;