Merge pull request #29 from feliciagan/edit_profile

nicolelim02 · web-flow · commit 7ee68ca1ca56 · 2024-09-29T10:30:19.000+08:00
Edit profile
diff --git a/frontend/src/components/ChangePasswordModal/index.tsx b/frontend/src/components/ChangePasswordModal/index.tsx
@@ -1,19 +1,18 @@
 import { forwardRef, useState } from 'react';
 import { Box, Button, Stack, Typography } from '@mui/material';
 import PasswordTextField from '../PasswordTextField';
-//import { userClient } from '../../utils/api';
-//import axios from 'axios';
-//import { FAILED_PW_UPDATE_MESSAGE, SUCCESS_PW_UPDATE_MESSAGE } from '../../utils/constants';
+import { userClient } from '../../utils/api';
+import axios from 'axios';
+import { FAILED_PW_UPDATE_MESSAGE, SUCCESS_PW_UPDATE_MESSAGE } from '../../utils/constants';
 
 interface ChangePasswordModalProps {
   handleClose: () => void;
   userId: string;
-  onUpdate: (message: string, isSuccess: boolean) => void;
+  onUpdate: (isProfileEdit: boolean, message: string, isSuccess: boolean) => void;
 }
 
 const ChangePasswordModal = forwardRef<HTMLDivElement, ChangePasswordModalProps>((props, ref) => {
-  const { handleClose } = props;
-  //const { handleClose, userId, onUpdate } = props;
+  const { handleClose, userId, onUpdate } = props;
   const [currPassword, setCurrPassword] = useState<string>('');
   const [newPassword, setNewPassword] = useState<string>('');
   const [confirmPassword, setConfirmPassword] = useState<string>('');
@@ -25,8 +24,7 @@ const ChangePasswordModal = forwardRef<HTMLDivElement, ChangePasswordModalProps>
   const isUpdateDisabled = !(isCurrPasswordValid && isNewPasswordValid && isConfirmPasswordValid);
 
   const handleSubmit = async () => {
-    //TODO: test with token (only tested without)
-    /*const accessToken = localStorage.getItem("token");
+    const accessToken = localStorage.getItem("token");
 
     try {
       await userClient.patch(
@@ -42,16 +40,16 @@ const ChangePasswordModal = forwardRef<HTMLDivElement, ChangePasswordModalProps>
           },
         });
       handleClose();
-      onUpdate(SUCCESS_PW_UPDATE_MESSAGE, true);
+      onUpdate(false, SUCCESS_PW_UPDATE_MESSAGE, true);
     } catch (error) {
       if (axios.isAxiosError(error)) {
         const message =
           error.response?.data.message || FAILED_PW_UPDATE_MESSAGE;
-        onUpdate(message, false);
+        onUpdate(false, message, false);
       } else {
-        onUpdate(FAILED_PW_UPDATE_MESSAGE, false);
+        onUpdate(false, FAILED_PW_UPDATE_MESSAGE, false);
       }
-    }*/
+    }
   };
 
   return (
diff --git a/frontend/src/components/EditProfileModal/index.tsx b/frontend/src/components/EditProfileModal/index.tsx
@@ -1,21 +1,20 @@
 import { forwardRef, useState } from 'react';
 import { Box, Button, FormControl, FormHelperText, Stack, TextField, Typography } from '@mui/material';
-//import { userClient } from '../../utils/api';
-//import axios from 'axios';
-//import { FAILED_PROFILE_UPDATE_MESSAGE, SUCCESS_PROFILE_UPDATE_MESSAGE } from '../../utils/constants';
+import { userClient } from '../../utils/api';
+import axios from 'axios';
+import { FAILED_PROFILE_UPDATE_MESSAGE, SUCCESS_PROFILE_UPDATE_MESSAGE } from '../../utils/constants';
 
 interface EditProfileModalProps {
   handleClose: () => void;
   currFirstName: string;
   currLastName: string;
   currBiography?: string;
   userId: string;
-  onUpdate: (message: string, isSuccess: boolean) => void;
+  onUpdate: (isProfileEdit: boolean, message: string, isSuccess: boolean) => void;
 }
 
 const EditProfileModal = forwardRef<HTMLDivElement, EditProfileModalProps>((props, ref) => {
-  const { handleClose, currFirstName, currLastName, currBiography } = props;
-  //const { handleClose, currFirstName, currLastName, currBiography, userId, onUpdate } = props;
+  const { handleClose, currFirstName, currLastName, currBiography, userId, onUpdate } = props;
   const nameCharLimit = 50;
   const bioCharLimit = 255;
   const [newFirstName, setNewFirstName] = useState<string>(currFirstName);
@@ -38,8 +37,7 @@ const EditProfileModal = forwardRef<HTMLDivElement, EditProfileModalProps>((prop
   const isUpdateDisabled = firstNameError || lastNameError || !checkForChanges();
 
   const handleSubmit = async () => {
-    // TODO: test with token (only tested without)
-    /*const accessToken = localStorage.getItem("token");
+    const accessToken = localStorage.getItem("token");
 
     try {
       await userClient.patch(
@@ -56,17 +54,17 @@ const EditProfileModal = forwardRef<HTMLDivElement, EditProfileModalProps>((prop
             },
         });
         handleClose();
-        onUpdate(SUCCESS_PROFILE_UPDATE_MESSAGE, true);
+        onUpdate(true, SUCCESS_PROFILE_UPDATE_MESSAGE, true);
     } catch (error) {
         console.error('Error:', error);
         if (axios.isAxiosError(error)) {
           const message =
             error.response?.data.message || FAILED_PROFILE_UPDATE_MESSAGE;
-          onUpdate(message, false);
+          onUpdate(true, message, false);
         } else {
-          onUpdate(FAILED_PROFILE_UPDATE_MESSAGE, false);
+          onUpdate(true, FAILED_PROFILE_UPDATE_MESSAGE, false);
         }
-    }*/
+    }
   };
 
   return (
diff --git a/frontend/src/pages/Profile/index.tsx b/frontend/src/pages/Profile/index.tsx
@@ -30,6 +30,7 @@ const ProfilePage: React.FC = () => {
   const [changePasswordOpen, setChangePasswordOpen] = useState(false);
   const handleChangePasswordOpen = () => setChangePasswordOpen(true);
   const handleChangePasswordClose = () => setChangePasswordOpen(false);
+  const [isProfileChanged, setIsProfileChanged] = useState(false);
 
   const { userId } = useParams<{ userId: string }>();
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
@@ -49,7 +50,7 @@ const ProfilePage: React.FC = () => {
       })
       .catch(() => setUserProfile(null));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [isProfileChanged]);
 
   if (!userProfile) {
     return (
@@ -60,9 +61,12 @@ const ProfilePage: React.FC = () => {
     );
   }
 
-  const notify = (message: string, isSuccess: boolean) => {
+  const notify = (isProfileEdit: boolean, message: string, isSuccess: boolean) => {
     if (isSuccess) {
       toast.success(message);
+      if (isProfileEdit) {
+        setIsProfileChanged(true);
+      }
     } else {
       toast.error(message);
     }
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
@@ -11,7 +11,8 @@ export const FILL_ALL_FIELDS = "Please fill in all fields";
 // Question
 export const SUCCESS_QUESTION_CREATE = "Question created successfully";
 export const FAILED_QUESTION_CREATE = "Failed to create question";
-export const NO_QUESTION_CHANGES = "You have not made any changes to the question";
+export const NO_QUESTION_CHANGES =
+  "You have not made any changes to the question";
 export const SUCCESS_QUESTION_UPDATE = "Question updated successfully";
 export const FAILED_QUESTION_UPDATE = "Failed to update question";
 export const SUCCESS_QUESTION_DELETE = "Question deleted successfully";
@@ -20,7 +21,7 @@ export const SUCCESS_FILE_UPLOAD = "File uploaded successfully";
 export const FAILED_FILE_UPLOAD = "Failed to upload file";
 
 // Profile
-/*export const SUCCESS_PW_UPDATE_MESSAGE = "Password updated successfully";
+export const SUCCESS_PW_UPDATE_MESSAGE = "Password updated successfully";
 export const FAILED_PW_UPDATE_MESSAGE = "Failed to update password";
 export const SUCCESS_PROFILE_UPDATE_MESSAGE = "Profile updated successfully";
-export const FAILED_PROFILE_UPDATE_MESSAGE = "Failed to update profile";*/
+export const FAILED_PROFILE_UPDATE_MESSAGE = "Failed to update profile";
