refactor(profile): migrated change detection from useMemo to useEffec…

…t for cleaner comparison logic
JavidSumra · Oct 17, 2024 · 5fee85e · 5fee85e
1 parent 7fff299
commit 5fee85e
Showing 1 changed file with 14 additions and 46 deletions.
diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
@@ -1,4 +1,4 @@
-import { useState, useReducer, FormEvent, useMemo } from "react";
+import { useState, useReducer, FormEvent, useEffect } from "react";
 import { GENDER_TYPES } from "../../Common/constants";
 import { validateEmailAddress } from "../../Common/validation";
 import * as Notification from "../../Utils/Notifications.js";
@@ -117,6 +117,8 @@ export default function UserProfile() {
     isChecking: false,
     isUpdateAvailable: false,
   });
+  const [hasChanges, setHasChanges] = useState<boolean>(false);
+  const [isFieldLoaded, setIsFieldLoaded] = useState<boolean>(false);
 
   const authUser = useAuthUser();
 
@@ -172,6 +174,7 @@ export default function UserProfile() {
         type: "set_form",
         form: formData,
       });
+      setHasChanges(false);
     },
   });
 
@@ -182,51 +185,6 @@ export default function UserProfile() {
     },
   );
 
-  const hasChanges = useMemo(() => {
-    if (!userData) return false;
-
-    const fieldsToCheck: (keyof EditForm)[] = [
-      "altPhoneNumber",
-      "date_of_birth",
-      "doctor_experience_commenced_on",
-      "doctor_medical_council_registration",
-      "email",
-      "firstName",
-      "gender",
-      "lastName",
-      "phoneNumber",
-      "qualification",
-      "video_connect_link",
-      "weekly_working_hours",
-    ];
-
-    return fieldsToCheck.some((field) => {
-      if (field === "date_of_birth") {
-        return (
-          dayjs(states.form[field]).format("YYYY-MM-DD") !==
-          dayjs(userData[field]).format("YYYY-MM-DD")
-        );
-      }
-      if (field === "doctor_experience_commenced_on") {
-        const userDataYears = dayjs().diff(dayjs(userData[field]), "years");
-        return Number(states.form[field]) !== Number(userDataYears);
-      }
-      if (field === "weekly_working_hours")
-        return Number(states.form[field]) !== Number(userData[field]);
-      if (field === "firstName")
-        return states.form[field] !== userData.first_name;
-      if (field === "lastName")
-        return states.form[field] !== userData.last_name;
-      if (field === "phoneNumber")
-        return states.form[field] !== userData.phone_number;
-      if (field === "altPhoneNumber")
-        return states.form[field] !== userData.alt_phone_number;
-      if (field === "video_connect_link")
-        return states.form[field] !== userData[field] && !!states.form[field];
-      return states.form[field] !== userData[field];
-    });
-  }, [states.form, userData]);
-
   const validateNewPassword = (password: string) => {
     if (
       password.length < 8 ||
@@ -369,8 +327,18 @@ export default function UserProfile() {
       type: "set_form",
       form: { ...states.form, [event.name]: event.value },
     });
+    setIsFieldLoaded(true);
   };
 
+  useEffect(() => {
+    if (showEdit && isFieldLoaded) {
+      setHasChanges(true);
+    } else {
+      setIsFieldLoaded(false);
+      setHasChanges(false);
+    }
+  }, [handleFieldChange]);
+
   const getDate = (value: any) =>
     value && dayjs(value).isValid() && dayjs(value).toDate();