Fixed close modal & submission logic

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -72,15 +72,12 @@ const ProfilePanel = () => {
     );
     if (error) return;
 
-    setLocalData((prev) => ({
-      ...prev,
-      deleteProfileImage: false,
-    }));
     setProgress((prev) => ({ ...prev, isLoading: true }));
     setFile({
       src: URL.createObjectURL(pic),
       name: pic.name,
       size: formatBytes(pic.size),
+      delete: false,
     });
 
     //TODO - potentitally remove once image compression functions are implemented
@@ -120,19 +117,23 @@ const ProfilePanel = () => {
   // Resets picture-related states and clears interval
   const removePicture = () => {
     errors["picture"] && clearError("picture");
-    setLocalData((prev) => ({
-      ...prev,
-      deleteProfileImage: true,
-    }));
+    setFile({ delete: true });
     clearInterval(intervalRef.current); // interrupt interval if image upload is canceled prior to completing the process
     setProgress({ value: 0, isLoading: false });
   };
 
-  console.log(localData);
+  // Opens the picture update modal
+  const openPictureModal = () => {
+    setIsOpen("picture");
+    setFile({ delete: localData.deleteProfileImage });
+  };
 
   // Closes the picture update modal and resets related states
   const closePictureModal = () => {
-    // removePicture();
+    errors["picture"] && clearError("picture");
+    setFile(); //reset file
+    clearInterval(intervalRef.current); // interrupt interval if image upload is canceled prior to completing the process
+    setProgress({ value: 0, isLoading: false });
     setIsOpen("");
   };
 
@@ -142,20 +143,27 @@ const ProfilePanel = () => {
     setLocalData((prev) => ({
       ...prev,
       file: file.src,
+      deleteProfileImage: false,
     }));
     setIsOpen("");
   };
 
+  console.log(
+    localData.deleteProfileImage === false && localData.file === undefined
+  );
+
   // Handles form submission to update user profile
   const handleSaveProfile = (event) => {
     event.preventDefault();
-    // if (
-    //   localData.firstname === user.firstname &&
-    //   localData.lastname === user.lastname
-    // ) {
-    //   // TODO: Add toast/notification for unchanged profile data
-    //   return;
-    // }
+    if (
+      localData.firstname === user.firstname &&
+      localData.lastname === user.lastname &&
+      localData.deleteProfileImage === undefined &&
+      localData.file === undefined
+    ) {
+      // TODO: Add toast/notification for unchanged profile data
+      return;
+    }
 
     dispatch(update({ authToken, localData }));
     // TODO: Add toast/notification for profile update success
@@ -163,7 +171,6 @@ const ProfilePanel = () => {
 
   // Removes current profile image from UI
   const handleDeletePicture = () => {
-    // TODO - implement delete picture function
     setLocalData((prev) => ({
       ...prev,
       deleteProfileImage: true,
@@ -267,8 +274,8 @@ const ProfilePanel = () => {
               src={
                 localData?.deleteProfileImage
                   ? "/static/images/avatar/2.jpg"
-                  : file?.src
-                  ? file.src
+                  : localData?.file
+                  ? localData.file
                   : ""
               }
               sx={{ mr: "8px" }}
@@ -281,7 +288,7 @@ const ProfilePanel = () => {
             <Button
               level="tertiary"
               label="Update"
-              onClick={() => setIsOpen("picture")}
+              onClick={openPictureModal}
               sx={{
                 color: theme.palette.primary.main,
               }}
@@ -409,10 +416,12 @@ const ProfilePanel = () => {
           <ImageField
             id="update-profile-picture"
             src={
-              localData?.deleteProfileImage
+              file?.delete
                 ? ""
                 : file?.src
                 ? file.src
+                : localData?.file
+                ? localData.file
                 : user?.avatarImage
                 ? `data:image/png;base64,${user.avatarImage}`
                 : ""