Task #211821 Redux Tool-kit in project

apps/front-end/package.json

@@ -39,7 +39,7 @@
     "react-native-safe-area-context": "^3.4.1",
     "react-native-web": "^0.17.7",
     "react-qr-reader": "3.0.0-beta-1",
-    "react-redux": "^9.1.0",
+    "react-redux": "8.0.0",
     "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.0",
     "react-zoom-pan-pinch": "^3.1.0",

apps/front-end/src/bootstrap.js

@@ -4,11 +4,13 @@ import "./index.css";
 import App from "./App";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 import reportWebVitals from "./reportWebVitals";
+import { Provider } from "react-redux";
+import store from "store/store";
 
 ReactDOM.render(
-  <React.StrictMode>
+  <Provider store={store}>
     <App />
-  </React.StrictMode>,
+  </Provider>,
   document.getElementById("root")
 );
 

apps/front-end/src/pages/front-end/FacilitatorOffline/FacilitatorOnboarding/FacilitatorOnboarding.jsx

@@ -4,6 +4,7 @@ import React, { useState, useCallback, useEffect } from "react";
 import validator from "@rjsf/validator-ajv8";
 import { get, set } from "idb-keyval";
 import moment from "moment";
+import { useDispatch, useSelector } from "react-redux";
 import {
   widgets,
   templates,
@@ -19,7 +20,11 @@ import { useNavigate } from "react-router-dom";
 
 import * as formSchemas from "./onboarding.schema";
 
-import { debounce } from "lodash";
+import {
+  fetchIpUserData,
+  selectedIpData,
+  getData,
+} from "../../../../store/Slices/ipUserInfoSlice";
 
 const {
   dateOfBirthSchema,
@@ -53,23 +58,25 @@ const FacilitatorOnboarding = () => {
 
   const [countLoad, setCountLoad] = useState(0);
 
+  const dispatch = useDispatch();
+  const ipData = useSelector(selectedIpData);
+
+  useEffect(() => {
+    dispatch(fetchIpUserData());
+  }, []);
+
   useEffect(() => {
     const fetchData = async () => {
       try {
-        console.log("Fetching data from IndexedDB...");
         let userData = await get("user_data");
-        console.log("Fetched data:", userData);
 
-        // Update form data states here
         setUserData(userData);
 
-        // Example of updating date of birth state
         if (userData?.users?.dob) {
           set_date_of_birth({
             dob: userData.users.dob,
             mobile: userData.users.mobile,
             alternative_mobile_number: userData.users.alternative_mobile_number,
-            // Add other properties as needed
           });
         }
 
@@ -86,15 +93,12 @@ const FacilitatorOnboarding = () => {
           });
         }
         if (userData?.users?.gender) {
-          // Example of updating basic details state
           setFormDataBasicDetails({
             gender: userData.users.gender,
-            marital_status: userData.extended_users?.marital_status || "", // Add other properties as needed
+            marital_status: userData.extended_users?.marital_status || "",
           });
         }
 
-        // Update other form data states in a similar way
-
         setCountLoad(2);
       } catch (error) {
         console.error("Error fetching data from IndexedDB:", error);
@@ -231,17 +235,14 @@ const FacilitatorOnboarding = () => {
     const experienceArray = Array.isArray(user_data.experience)
       ? user_data.experience
       : [];
-    console.log(experienceArray, "Experience");
     const updatedUserData = {
       ...user_data,
       experience: [...experienceArray, ...newExperiences],
     };
-    console.log(updatedUserData.experience, "After Update");
 
     await set("user_data", updatedUserData);
     setUserData(updatedUserData);
     setPage((prevPage) => prevPage + 1);
-    console.log("hi");
     handleNextScreen("jobExperience");
   };
 

apps/front-end/src/store/Slices/dataTableSlice.jsx

@@ -0,0 +1,35 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+
+export const fetchUsers = createAsyncThunk('users/fetchUsers', async () => {
+    const response = await fetch('https://dummyjson.com/users');
+    const data = await response.json();
+    return data;
+  });
+
+
+const dataTableSlice = createSlice({
+
+    name :"dataTable",
+    initialState:{data:null,status: 'idle',
+    error: null,},
+    reducers:{},
+    extraReducers: (builder) => {
+        builder
+          .addCase(fetchUsers.pending, (state) => {
+            state.status = 'loading';
+          })
+          .addCase(fetchUsers.fulfilled, (state, action) => {
+            state.status = 'succeeded';
+            state.data = action.payload;
+          })
+          .addCase(fetchUsers.rejected, (state, action) => {
+            state.status = 'failed';
+            state.error = action.error.message;
+          });
+      },
+})
+
+export const {getData} = dataTableSlice.actions
+export const selectdataTable = (state) => state?.dataTable;
+
+export default dataTableSlice.reducer

apps/front-end/src/store/Slices/ipUserInfoSlice.jsx

@@ -0,0 +1,45 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import { facilitatorRegistryService } from "@shiksha/common-lib";
+import { get, set } from "idb-keyval";
+
+export const fetchIpUserData = createAsyncThunk(
+  "ipData/fetchIpUserData",
+  async () => {
+    const result = facilitatorRegistryService.getInfo();
+    const data = await result;
+    return data;
+  }
+);
+
+const ip_ListSlice = createSlice({
+  name: "ipData",
+  initialState: {
+    data: (await get("ipData")) || null,
+    status: "idle",
+    error: null,
+  },
+
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchIpUserData.pending, (state) => {
+        state.status = "loading";
+      })
+      .addCase(fetchIpUserData.fulfilled, (state, action) => {
+        state.status = "succeeded";
+        state.data = action.payload;
+        set("ipData", action.payload).catch((error) => {
+          console.error("Error setting data:", error);
+        });
+      })
+      .addCase(fetchIpUserData.rejected, (state, action) => {
+        state.status = "failed";
+        state.error = action.error.message;
+      });
+  },
+});
+
+export const getData = ip_ListSlice.actions;
+export const selectedIpData = (state) => state?.ipData;
+
+export default ip_ListSlice.reducer;

apps/front-end/src/store/Slices/userSlice.jsx

@@ -0,0 +1,24 @@
+// userSlice.js
+import { createSlice } from '@reduxjs/toolkit';
+import { get, set } from 'idb-keyval';
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState: {data: await get("data") || {} },
+  reducers: {
+    setUser:  (state, action) => {
+      state.data = action.payload;
+       set('data', action.payload)
+    .then(() => {
+        console.log('Data set successfully');
+    })
+    .catch((error) => {
+        console.error('Error setting data:', error);
+    });
+    },
+  },
+});
+
+export const { setUser } = userSlice.actions;
+export const selectUser = (state) => state?.user?.data;
+export default userSlice.reducer;

apps/front-end/src/store/rootReducer.jsx

@@ -0,0 +1,14 @@
+// mainSlice.js
+import { combineReducers } from "@reduxjs/toolkit";
+import userReducer from "./Slices/userSlice";
+import dataTableReducer from "./Slices/dataTableSlice";
+import IpUserInfoSlice from "./Slices/ipUserInfoSlice";
+
+const rootReducer = combineReducers({
+  user: userReducer,
+  dataTable: dataTableReducer,
+  ipUserInfo: IpUserInfoSlice,
+  // Add more child slices as needed
+});
+
+export default rootReducer;

apps/front-end/src/store/store.jsx

@@ -0,0 +1,11 @@
+// store.js
+import { configureStore } from "@reduxjs/toolkit";
+// import rootReducer from './rootReducer';
+import rootReducer from "./rootReducer";
+
+const store = configureStore({
+  reducer: rootReducer,
+  // Add middleware or enhancers as needed
+});
+
+export default store;

lib/common-lib/src/components/layout/AppBar.js

@@ -12,7 +12,8 @@ import {
   InputRightAddon,
   Button,
   Modal,
-  Image
+  Image,
+  Alert
   // Divider
 } from 'native-base'
 import 'react-modern-drawer/dist/index.css'