From 42b6a5fb49716b10933a525529b3e6b3ce3e123d Mon Sep 17 00:00:00 2001 From: Jonnashell <35744008+Jonnashell@users.noreply.github.com> Date: Thu, 25 Sep 2025 14:21:34 +0200 Subject: [PATCH 1/5] wip --- src/pages/profile/ProfilePage.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx index 79fcca6..1952f99 100644 --- a/src/pages/profile/ProfilePage.jsx +++ b/src/pages/profile/ProfilePage.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import './style.css'; import useAuth from '../../hooks/useAuth'; import Card from '../../components/card'; @@ -17,6 +17,7 @@ const ProfilePage = () => { const { user, setUser, onPatchProfile } = useAuth(); const [isLoading, setIsLoading] = useState(null); const [isEditing, setIsEditing] = useState(false); + const navigate = useNavigate(); const [originalCurrentUser, setOriginalCurrentUser] = useState(user); // The original, before edit, state of the user we are looking at. const [tempCurrentUser, setTempCurrentUser] = useState(user); // The edited, under/after edit, state of the user we are looking at. @@ -77,6 +78,7 @@ const ProfilePage = () => { // localStorage.setItem('user', JSON.stringify(userWithoutPassword)); setUser(userWithoutPassword); } + navigate('/profile/:id/edit'); } setIsEditing((prev) => !prev); }; From 7dea0fdb597b8f0fc64bb3d6706eca23a598d8ae Mon Sep 17 00:00:00 2001 From: Jonnashell <35744008+Jonnashell@users.noreply.github.com> Date: Thu, 25 Sep 2025 14:33:44 +0200 Subject: [PATCH 2/5] Added edit route for editing profile page --- src/App.js | 2 +- src/pages/profile/ProfilePage.jsx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 7f78080..f9ede7e 100644 --- a/src/App.js +++ b/src/App.js @@ -32,7 +32,7 @@ const App = () => { /> diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx index 1952f99..ea9377a 100644 --- a/src/pages/profile/ProfilePage.jsx +++ b/src/pages/profile/ProfilePage.jsx @@ -70,15 +70,16 @@ const ProfilePage = () => { // When edit button gets toggled on/off const toggleEdit = () => { if (isEditing) { + navigate(`/profile/${pathParamId}`); tempCurrentUser.id = pathParamId || user.id; onPatchProfile(tempCurrentUser); if (!pathParamId || String(pathParamId) === String(user.id)) { const { password, ...userWithoutPassword } = tempCurrentUser; - // localStorage.setItem('user', JSON.stringify(userWithoutPassword)); setUser(userWithoutPassword); } - navigate('/profile/:id/edit'); + } else { + navigate(`/profile/${pathParamId}/edit`); } setIsEditing((prev) => !prev); }; From 3a690f9dd53877ff33976de45216ad81b5023a27 Mon Sep 17 00:00:00 2001 From: Jonnashell <35744008+Jonnashell@users.noreply.github.com> Date: Thu, 25 Sep 2025 15:38:29 +0200 Subject: [PATCH 3/5] Added /edit route for real. And fixed cohort display bug in profile page --- src/pages/profile/ProfilePage.jsx | 36 ++++++++++++++++++++----------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx index ea9377a..d1e8f2e 100644 --- a/src/pages/profile/ProfilePage.jsx +++ b/src/pages/profile/ProfilePage.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { useParams, useNavigate } from 'react-router-dom'; +import { useParams, useNavigate, useLocation } from 'react-router-dom'; import './style.css'; import useAuth from '../../hooks/useAuth'; import Card from '../../components/card'; @@ -16,7 +16,8 @@ const ProfilePage = () => { const { id: pathParamId } = useParams(); const { user, setUser, onPatchProfile } = useAuth(); const [isLoading, setIsLoading] = useState(null); - const [isEditing, setIsEditing] = useState(false); + const location = useLocation(); + const isEditing = location.pathname.endsWith('edit'); const navigate = useNavigate(); const [originalCurrentUser, setOriginalCurrentUser] = useState(user); // The original, before edit, state of the user we are looking at. @@ -24,7 +25,6 @@ const ProfilePage = () => { // Gets user by ID IFF user is trying to visit someone elses prefilepage! useEffect(() => { - setIsEditing(false); // If ID in user is equal to ID in path param, don't continue in the useEffect. // We don't want to continue as we already have the information on the user. // We also need to set the externalUser to null, as to make the conditional @@ -62,26 +62,36 @@ const ProfilePage = () => { return () => controller.abort(); }, [pathParamId, user?.id]); + useEffect(() => { + if (!isEditing) { + setTempCurrentUser(originalCurrentUser); + } + }, [isEditing, originalCurrentUser]); + // When the editable fields gets changed. const handleChange = (field, value) => { setTempCurrentUser((prev) => ({ ...prev, [field]: value })); }; - - // When edit button gets toggled on/off - const toggleEdit = () => { + const toggleEdit = async () => { if (isEditing) { - navigate(`/profile/${pathParamId}`); - tempCurrentUser.id = pathParamId || user.id; - onPatchProfile(tempCurrentUser); + try { + tempCurrentUser.id = pathParamId || user.id; + await onPatchProfile(tempCurrentUser); - if (!pathParamId || String(pathParamId) === String(user.id)) { const { password, ...userWithoutPassword } = tempCurrentUser; - setUser(userWithoutPassword); + + if (!pathParamId || String(pathParamId) === String(user.id)) { + setUser(userWithoutPassword); + } + + setOriginalCurrentUser(userWithoutPassword); + navigate(`/profile/${pathParamId}`); + } catch (err) { + console.error('Failed to save profile:', err); } } else { navigate(`/profile/${pathParamId}/edit`); } - setIsEditing((prev) => !prev); }; if (isLoading) { @@ -120,7 +130,7 @@ const ProfilePage = () => { Date: Thu, 25 Sep 2025 15:52:46 +0200 Subject: [PATCH 4/5] Fixed issue with cohort patching --- src/pages/profile/ProfilePage.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/profile/ProfilePage.jsx b/src/pages/profile/ProfilePage.jsx index 0d366c1..88cbddd 100644 --- a/src/pages/profile/ProfilePage.jsx +++ b/src/pages/profile/ProfilePage.jsx @@ -76,7 +76,9 @@ const ProfilePage = () => { if (isEditing) { try { tempCurrentUser.id = pathParamId || user.id; - await onPatchProfile(tempCurrentUser); + + const { cohort, ...userWithoutCohort } = tempCurrentUser; + await onPatchProfile(userWithoutCohort); const { password, ...userWithoutPassword } = tempCurrentUser; From 2245cd6403891eb60197256b169085b483716c4f Mon Sep 17 00:00:00 2001 From: Jonnashell <35744008+Jonnashell@users.noreply.github.com> Date: Fri, 26 Sep 2025 08:48:04 +0200 Subject: [PATCH 5/5] Profile edit route implemented with password changes from Vegard --- src/pages/profile/contactInfo/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/profile/contactInfo/index.jsx b/src/pages/profile/contactInfo/index.jsx index 9b2e8c4..b42bb9b 100644 --- a/src/pages/profile/contactInfo/index.jsx +++ b/src/pages/profile/contactInfo/index.jsx @@ -55,7 +55,7 @@ const ProfileContactInfo = ({ email, mobile, password, onChange, isEditing }) => className={getInputClass('password', isEditing, user.role)} disabled={!canEditField('password', isEditing, user.role)} /> - {passwordCondition && ( + {passwordCondition && isEditing && (
Password must contain at least: