feat: changes to auth and redux store

ngoworldcommunity · Feb 15, 2024 · 442d17e · 442d17e
1 parent 8d7783b
commit 442d17e
Show file tree

Hide file tree

Showing 16 changed files with 247 additions and 102 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -47,6 +47,7 @@
     "react-select": "^5.7.5",
     "react-spinners": "^0.13.7",
     "react-toastify": "^9.1.1",
+    "redux-persist": "^6.0.0",
     "swiper": "^10.3.0",
     "swr": "^2.1.0",
     "url": "^0.11.0",

diff --git a/src/components/private/landing/Landing.jsx b/src/components/private/landing/Landing.jsx
@@ -1,24 +1,25 @@
 import Cookies from "js-cookie";
 import React, { useEffect, useState } from "react";
 import Marquee from "react-fast-marquee";
+import { useSelector } from "react-redux";
 import Vector from "../../../assets/pictures/Banner/Vector.png";
 import { Button } from "../../shared";
 import "./Landing.css";
 
 const Landing = () => {
   const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const user = useSelector((state) => state.user);
 
   useEffect(() => {
     const handleResize = () => {
       setWindowWidth(window.innerWidth);
     };
-
     window.addEventListener("resize", handleResize);
-
     return () => {
       window.removeEventListener("resize", handleResize);
     };
   }, []);
+
   return (
     <>
       <div className="container landing_parent">
@@ -64,7 +65,11 @@ const Landing = () => {
           </span>
         </div>
 
-        <h1>
+        <h1
+          onClick={() => {
+            console.log(user);
+          }}
+        >
           Collaborate. Connect. <span>Build.</span>
         </h1>
 

diff --git a/src/components/shared/profileCompletion/ProfileCompletion.jsx b/src/components/shared/profileCompletion/ProfileCompletion.jsx
@@ -1,19 +1,31 @@
+import Cookies from "js-cookie";
 import React, { useEffect, useState } from "react";
 import { IoMdCloseCircleOutline } from "react-icons/io";
+import { useDispatch, useSelector } from "react-redux";
 import { ProfileCompletionDetails } from "../../../constants";
+import { updateUserData } from "../../../redux/slice/userSlice";
 import { UpdateUser } from "../../../service/MilanApi";
 import { showErrorToast, showSuccessToast } from "../../../utils/Toasts";
 import Button from "../buttons/globalbutton/Button";
 import "./ProfileCompletion.scss";
 
-const ProfileCompletion = ({ setShowProfileModal, info }) => {
+const ProfileCompletion = ({
+  setShowProfileModal,
+  editProfile,
+  seteditProfile,
+}) => {
   const [missingElements, setMissingElements] = useState([]);
   const [currentStep, setcurrentStep] = useState(0);
   const [formData, setFormData] = useState({});
   const [errors, setErrors] = useState({});
+  const info = useSelector((state) => state.user);
+  const dispatch = useDispatch();
 
   useEffect(() => {
     calculateMissingElements();
+    if (editProfile) {
+      setFormData(info);
+    }
   }, [info]);
 
   const calculateMissingElements = () => {
@@ -29,10 +41,32 @@ const ProfileCompletion = ({ setShowProfileModal, info }) => {
     setMissingElements(missing);
   };
 
-  const totalSteps =
-    missingElements.length % 2 === 0
-      ? Math.ceil(missingElements.length / 2)
-      : Math.ceil(missingElements.length / 2) + 1;
+  const editProfileFields = [
+    "name",
+    "tagLine",
+    "description",
+    "city",
+    "state",
+    "address",
+    "country",
+    "pincode",
+  ];
+
+  const calculateTotalSteps = () => {
+    if (editProfile) {
+      if (editProfileFields.length % 2 === 0) {
+        return Math.ceil(editProfileFields.length / 2);
+      } else {
+        return Math.ceil(editProfileFields.length / 2) + 1;
+      }
+    } else {
+      if (missingElements.length % 2 === 0) {
+        return Math.ceil(missingElements.length / 2);
+      } else {
+        return Math.ceil(missingElements.length / 2) + 1;
+      }
+    }
+  };
 
   const validateFields = () => {
     let stepErrors = {};
@@ -60,8 +94,12 @@ const ProfileCompletion = ({ setShowProfileModal, info }) => {
   };
 
   const handleIncrementStep = () => {
-    if (validateFields() && currentStep < totalSteps)
-      setcurrentStep(currentStep + 2);
+    if (editProfile) {
+      if (currentStep < calculateTotalSteps()) setcurrentStep(currentStep + 2);
+    } else {
+      if (validateFields() && currentStep < calculateTotalSteps())
+        setcurrentStep(currentStep + 2);
+    }
   };
 
   const handleDecrementStep = () => {
@@ -80,51 +118,98 @@ const ProfileCompletion = ({ setShowProfileModal, info }) => {
       if (response?.status !== 200) {
         showErrorToast(response?.data?.message);
       } else {
+        dispatch(updateUserData(formData));
+        setFormData({});
         setShowProfileModal(false);
+        seteditProfile(false);
         showSuccessToast(response?.data?.message);
       }
     }
   };
 
+  const maxSteps = editProfile
+    ? editProfileFields.length
+    : missingElements.length;
+
   return (
     <div className="profilecompletion_overlay">
       <div className="profilecompletion_modal">
         <IoMdCloseCircleOutline
           className="crossButton"
           onClick={() => {
             setShowProfileModal(false);
+            seteditProfile(false);
+            Cookies.set("skipProfileCompletion", "true", { expires: 7 });
           }}
         />
 
         <div className="profilecompletion_header">
-          <h1>We&apos;re almost done</h1>
-          <p>
-            Please complete your profile to enjoy the full benefits of the
-            platform
-          </p>
+          <h1> {editProfile ? "Edit Profile" : `We're almost done`} </h1>
+          {!editProfile && (
+            <p>
+              Please complete your profile to enjoy the full benefits of the
+              platform
+            </p>
+          )}
         </div>
 
         <form>
-          {missingElements.slice(currentStep, currentStep + 2).map((elId) => {
-            const formElement = ProfileCompletionDetails.elements.find(
-              (element) => element.id === elId,
-            );
-
-            return (
-              <div className="profilecompletion_element" key={formElement.id}>
-                <label>{formElement?.label}</label>
-                <input
-                  type={formElement?.type}
-                  name={formElement?.id}
-                  value={formData[formElement?.id] || ""}
-                  onChange={handleChange}
-                  className="auth_input"
-                  placeholder={formElement?.placeholder}
-                />
-                {errors[formElement?.id] && <p>{errors[formElement?.id]}</p>}
-              </div>
-            );
-          })}
+          {editProfile
+            ? editProfileFields
+                .slice(currentStep, currentStep + 2)
+                .map((elId) => {
+                  const formElement = ProfileCompletionDetails.elements.find(
+                    (element) => element.id === elId,
+                  );
+                  console.log("🚀 ~ .map ~ formElement:", formElement);
+
+                  return (
+                    <div
+                      className="profilecompletion_element"
+                      key={formElement.id}
+                    >
+                      <label>{formElement?.label}</label>
+                      <input
+                        type={formElement?.type}
+                        name={formElement?.id}
+                        value={formData[formElement?.id] || ""}
+                        onChange={handleChange}
+                        className="auth_input"
+                        placeholder={formElement?.placeholder}
+                      />
+                      {errors[formElement?.id] && (
+                        <p>{errors[formElement?.id]}</p>
+                      )}
+                    </div>
+                  );
+                })
+            : missingElements
+                .slice(currentStep, currentStep + 2)
+                .map((elId) => {
+                  const formElement = ProfileCompletionDetails.elements.find(
+                    (element) => element.id === elId,
+                  );
+
+                  return (
+                    <div
+                      className="profilecompletion_element"
+                      key={formElement.id}
+                    >
+                      <label>{formElement?.label}</label>
+                      <input
+                        type={formElement?.type}
+                        name={formElement?.id}
+                        value={formData[formElement?.id] || ""}
+                        onChange={handleChange}
+                        className="auth_input"
+                        placeholder={formElement?.placeholder}
+                      />
+                      {errors[formElement?.id] && (
+                        <p>{errors[formElement?.id]}</p>
+                      )}
+                    </div>
+                  );
+                })}
         </form>
 
         <div className="profilecompletion_btndiv">
@@ -135,7 +220,7 @@ const ProfileCompletion = ({ setShowProfileModal, info }) => {
           >
             Previous
           </Button>
-          {currentStep + 2 >= missingElements.length ? (
+          {currentStep + 2 >= maxSteps ? (
             <Button variant="solid" onClickfunction={handleSubmit}>
               Finish
             </Button>

diff --git a/src/constants/ProfileCompletionDetails.js b/src/constants/ProfileCompletionDetails.js
@@ -2,6 +2,14 @@ import { z } from "zod";
 
 const ProfileCompletionDetails = {
   elements: [
+    {
+      id: "name",
+      label: "Name",
+      placeholder: "Your organization's name",
+      minimumLength: 5,
+      errorMessage: "Name must be at least 5 characters long",
+      type: "text",
+    },
     {
       id: "tagLine",
       label: "Tagline",

diff --git a/src/hooks/useAuth.js b/src/hooks/useAuth.js
@@ -1,12 +1,15 @@
 import { useState } from "react";
+import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
+import { updateUserData } from "../redux/slice/userSlice";
 import { LoginUser, RegisterUser } from "../service/MilanApi";
 import checkInternetConnection from "../utils/CheckInternetConnection";
 import { showErrorToast, showSuccessToast } from "../utils/Toasts";
 
 export function useAuth(authType) {
   const navigate = useNavigate();
   const [loading, setloading] = useState(false);
+  const dispatch = useDispatch();
 
   async function authenticateUser(credentials) {
     if (!checkInternetConnection()) {
@@ -21,6 +24,8 @@ export function useAuth(authType) {
 
     if (response?.status === 201 || response?.status === 200) {
       showSuccessToast(response?.data?.message);
+      dispatch(updateUserData(response.data.user));
+
       setTimeout(() => {
         navigate("/");
         setloading(false);

diff --git a/src/index.jsx b/src/index.jsx
@@ -2,8 +2,9 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
 import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
 import App from "./App";
-import { store } from "./store";
+import { persistor, store } from "./redux/store";
 import "./styles/index.css";
 
 let vh = window.innerHeight * 0.01;
@@ -12,7 +13,9 @@ document.documentElement.style.setProperty("--vh", `${vh}px`);
 ReactDOM.createRoot(document.getElementById("root")).render(
   <Provider store={store}>
     <HelmetProvider>
-      <App />
+      <PersistGate loading={null} persistor={persistor}>
+        <App />
+      </PersistGate>
     </HelmetProvider>
   </Provider>,
 );