Uncommented reset logic on component unmount for cleanup

src/components/Directory/UpdateContact.jsx

@@ -31,7 +31,8 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { contactTags, loading: Tagloading } = useContactTags();
-  const [IsSubmitting, setSubmitting] = useState(false);
+  const [ IsSubmitting, setSubmitting ] = useState( false );
+  const [isInitialized, setIsInitialized] = useState(false);
   const dispatch = useDispatch();
 
   const methods = useForm({
@@ -74,15 +75,6 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
     remove: removePhone,
   } = useFieldArray({ control, name: "contactPhones" });
 
-  useEffect(() => {
-    if (emailFields.length === 0) {
-      appendEmail({ label: "Work", emailAddress: "" });
-    }
-    if (phoneFields.length === 0) {
-      appendPhone({ label: "Office", phoneNumber: "" });
-    }
-  }, [emailFields.length, phoneFields.length]);
-
   const handleAddEmail = async () => {
     const emails = getValues("contactEmails");
     const lastIndex = emails.length - 1;
@@ -133,7 +125,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
     setSubmitting(true);
     await submitContact({ ...cleaned, id: existingContact.id });
     setSubmitting(false);
-    // reset()
+    
   };
 
   const handleClosed = () => {
@@ -145,7 +137,7 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
       typeof existingContact === "object" &&
       !Array.isArray(existingContact);
 
-    if (isValidContact && TagsData) {
+    if (!isInitialized &&isValidContact && TagsData) {
       reset({
         name: existingContact.name || "",
         organization: existingContact.organization || "",
@@ -157,15 +149,28 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
         projectIds: existingContact.projectIds || null,
         tags: existingContact.tags || [],
         bucketIds: existingContact.bucketIds || [],
-      });
+      } );
+      
+      if (!existingContact.contactPhones || existingContact.contactPhones.length === 0) {
+      appendPhone({ label: "Office", phoneNumber: "" });
     }
-  }, [existingContact, buckets, projects]);
+
+    if (!existingContact.contactEmails || existingContact.contactEmails.length === 0) {
+      appendEmail({ label: "Work", emailAddress: "" });
+      }
+      setIsInitialized(true)
+    }
+    
+    return()=> reset()
+  }, [ existingContact, buckets, projects ] );
+  
+
   return (
     <FormProvider {...methods}>
       <form className="p-2 p-sm-0" onSubmit={handleSubmit(onSubmit)}>
         <div className="d-flex justify-content-center align-items-center">
           <IconButton size={15} iconClass="bx bx-user-plus" color="primary" />{" "}
-          <h6 className="m-0 fw-18"> Create New Contact</h6>
+          <h6 className="m-0 fw-18"> Update Contact</h6>
         </div>
         <div className="row">
           <div className="col-md-6  text-start">
@@ -430,13 +435,14 @@ const UpdateContact = ({ submitContact, existingContact, onCLosed }) => {
         </div>
 
         <div className="d-flex justify-content-center gap-1 py-2">
-          <button className="btn btn-sm btn-primary" type="submit">
+          <button className="btn btn-sm btn-primary" type="submit" disabled={IsSubmitting}>
-            {IsSubmitting ? "Please Wait..." : "Submit"}
+            {IsSubmitting ? "Please Wait..." : "Update"}
           </button>
           <button
             className="btn btn-sm btn-secondary"
             type="button"
             onClick={handleClosed}
+            disabled={IsSubmitting}
           >
             Cancel
           </button>