fix: optimizations

Author: tamalCodes

src/components/shared/profileCompletion/ProfileCompletion.jsx

@@ -2,10 +2,12 @@ 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 { ProfileElements } from "../../../constants";
 import { updateUserData } from "../../../redux/slice/userSlice";
 import { UpdateUser } from "../../../service/MilanApi";
 import { showErrorToast, showSuccessToast } from "../../../utils/Toasts";
+import getProfileFields from "../../../utils/getProfileFields";
 import Button from "../buttons/globalbutton/Button";
 import "./ProfileCompletion.scss";
 
@@ -14,96 +16,34 @@ const ProfileCompletion = ({
   editProfile,
   seteditProfile,
 }) => {
-  const [missingElements, setMissingElements] = useState([]);
-  const [currentStep, setcurrentStep] = useState(0);
+  const [currentStep, setcurrentStep] = useState(2);
+  const [currentIndex, setcurrentIndex] = 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 = () => {
-    const missing = [];
-    if (!info.tagLine) missing.push("tagLine");
-    if (!info.description) missing.push("description");
-    if (!info.city) missing.push("city");
-    if (!info.state) missing.push("state");
-    if (!info.address) missing.push("address");
-    if (!info.country) missing.push("country");
-    if (!info.pincode) missing.push("pincode");
-
-    setMissingElements(missing);
-  };
-
-  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 = {};
+  }, []);
 
-    const currentMissingElements = missingElements.slice(
-      currentStep,
-      currentStep + 2,
-    );
-
-    const formElementstoBeValidated = ProfileCompletionDetails.elements.filter(
-      (element) => currentMissingElements.includes(element.id),
-    );
-
-    formElementstoBeValidated.forEach((element) => {
-      if (
-        !formData[element.id] ||
-        element.minimumLength > formData[element.id]?.length
-      ) {
-        stepErrors[element.id] = element.errorMessage;
-      }
-    });
-
-    setErrors(stepErrors);
-    return Object.keys(stepErrors).length === 0;
-  };
+  const fields = getProfileFields(info, editProfile);
+  const totalfields = fields.length;
 
   const handleIncrementStep = () => {
-    if (editProfile) {
-      if (currentStep < calculateTotalSteps()) setcurrentStep(currentStep + 2);
-    } else {
-      if (validateFields() && currentStep < calculateTotalSteps())
-        setcurrentStep(currentStep + 2);
+    if (currentStep + 2 <= totalfields) {
+      setcurrentIndex(currentIndex + 2);
+      setcurrentStep(currentStep + 2);
     }
   };
 
   const handleDecrementStep = () => {
-    if (currentStep - 2 >= 0) setcurrentStep(currentStep - 2);
+    if (currentStep - 2 >= 2) {
+      setcurrentIndex(currentIndex - 2);
+      setcurrentStep(currentStep - 2);
+    }
   };
 
   const handleChange = (e) => {
@@ -113,24 +53,18 @@ const ProfileCompletion = ({
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    if (validateFields()) {
-      const response = await UpdateUser(formData);
-      if (response?.status !== 200) {
-        showErrorToast(response?.data?.message);
-      } else {
-        dispatch(updateUserData(formData));
-        setFormData({});
-        setShowProfileModal(false);
-        seteditProfile(false);
-        showSuccessToast(response?.data?.message);
-      }
+    const response = await UpdateUser(formData);
+    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">
@@ -154,73 +88,36 @@ const ProfileCompletion = ({
         </div>
 
         <form>
-          {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>
-                  );
-                })}
+          {fields.slice(currentIndex, currentIndex + 2).map((elId) => {
+            const formElement = ProfileElements.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}
+                />
+              </div>
+            );
+          })}
         </form>
 
         <div className="profilecompletion_btndiv">
           <Button
             variant="solid"
+            disabled={currentStep === 2}
             onClickfunction={handleDecrementStep}
-            disabled={currentStep === 0}
           >
             Previous
           </Button>
-          {currentStep + 2 >= maxSteps ? (
+          {currentStep == totalfields ? (
             <Button variant="solid" onClickfunction={handleSubmit}>
               Finish
             </Button>