Navigation bug on profile update

src/components/header/index.js

@@ -15,22 +15,29 @@ const Header = () => {
   const contextValues = useContext(AuthContext);
   const storedUser = contextValues.user;
   const name = storedUser ? `${storedUser.firstName} ${storedUser.lastName}` : 'Unknown User';
+
   const menuRef = useRef(null);
+  const buttonRef = useRef(null);
+
   const onClickProfileIcon = () => {
-    setIsMenuVisible(!isMenuVisible);
+    setIsMenuVisible((v) => !v);
   };
 
   useEffect(() => {
     if (!isMenuVisible) return;
 
     const handleClickOutside = (event) => {
-      if (menuRef.current && !menuRef.current.contains(event.target)) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target)
+      ) {
         setIsMenuVisible(false);
       }
     };
 
     document.addEventListener('mousedown', handleClickOutside);
-
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -45,7 +52,7 @@ const Header = () => {
       <FullLogo textColour="#FFFFFF" isClickable={!!user?.firstName} />
 
       {user?.firstName && token && (
-        <div className="profile-icon" onClick={onClickProfileIcon}>
+        <div className="profile-icon" ref={buttonRef} onClick={onClickProfileIcon}>
           <ProfileCircle fullName={`${user.firstName} ${user.lastName}`} photoUrl={user.photo} />
         </div>
       )}

src/pages/profile/ProfilePage.jsx

@@ -21,7 +21,7 @@ import {
 
 const ProfilePage = () => {
   const { id: pathParamId } = useParams();
-  const { user, setUser, onPatchProfile, onCreateProfile } = useAuth();
+  const { user, setUser, onPatchProfile } = useAuth();
   const [isLoading, setIsLoading] = useState(null);
   const location = useLocation();
   const isEditing = location.pathname.endsWith('edit');
@@ -94,29 +94,21 @@ const ProfilePage = () => {
     setTempCurrentUser((prev) => ({ ...prev, [field]: value }));
   };
 
-  // const toggleEdit = async () => {
-  //   if (isEditing) {
-  //     try {
-  //       tempCurrentUser.id = pathParamId || user.id;
-
-  //       const { cohort, ...userWithoutCohort } = tempCurrentUser;
-  //       await onPatchProfile(userWithoutCohort);
-
   // When edit button gets toggled on/off
   const toggleEdit = () => {
     if (isEditing) {
       try {
         tempCurrentUser.id = pathParamId || user.id;
 
         const { cohort, ...tempCurrentUserWithoutCohort } = tempCurrentUser;
-        // if the password field is empty then patch without changing password, else patch with new password.
 
+        // If password is empty, we don't want to send it in the body.
         if (tempCurrentUser.password === '') {
-          onCreateProfile(tempCurrentUserWithoutCohort);
-        } else {
-          onPatchProfile(tempCurrentUserWithoutCohort);
+          delete tempCurrentUserWithoutCohort.password;
         }
 
+        onPatchProfile(tempCurrentUserWithoutCohort);
+
         tempCurrentUser.password = '';
 
         const { password, ...userWithoutPassword } = tempCurrentUser;