Create Edit Profile Page / Enable Editing According To User Permissions

[zainabch123]

A user with id=12 should have their edit profile page at the path profile/12/edit

As a user I should be able to edit the the details on my own profile page. If I am a student, I should not be able to edit my role or the cohort I am in, only teachers are allowed to do this. The password should only be editable if I am the owner of that profile page. If a student visits another student's or a teachers edit page, they should be redirected to the normal profile page for that user.

As a teacher, I need to be able to change a student into a teacher and vice-versa, or change the cohort they are in. Teachers should be able to do so by visiting the student's profile page. Teachers are allowed to visit any other user's profile/:id/edit page and submit updated data.

Only students can edit their own password

[zainabch123]

PLAN:

1. Create the route: In App.js, create new route to "profile/:id/edit" which is linked to a component called EditProfile.
2. Create EditProfile component: In the pages folder create a new folder called editProfile. In the profile folder, create a file called index.js and profile.css. In the index.js file create a function/component called EditProfile with this initial structure: const EditProfile { return ()}
3. Setting the selectedProfile: In the EditProfile component you could use a useEffect function using the id from the URL to find the user/profile and set them to s selectedProfile variable. OR you could use a Context Provider. - This involves creating a profile.js folder in the context folder. In this file set up the useContext function. E.g. const ProfileContext = useContext(); const ProfileProvider = ({children}) => { const [profile, setProfile]; return ( <ProfileContext.Provider value = {{profile, setProfile}}> {children} </ProfileContext.PRovider> )};

• To use this wrap all routes in App.js with the ProfileProvider Context.
• Then in the Profile Page component set the value of profile using a useEffect function and id of selectedUser. Now this profile should be usable in the EditProfile component as well.

4. Set up ability to Edit Profile: Change profile-sections components (in profile → profile-sections) so that they take 'editable = false' as a prop. E.g. const BasicInfoSection = ({ profile, editable = false }) => {}. Then change each TextInput to include 'disabled = !editable'. This will ensure the text inputs remain disabled unless editable is switched true.

• Also in the Profile Page component add checks to see whether currentUser is either a teacher or whose id matches the selectedProfile id. E.g. const isTeacher = currentUser.role === "teacher"; If either of these are true, enable the Edit button. Also pass this variable to other profile components as a prop. This will enable you to set 'disabled = {!editable || isTeacher} on the specific elements which ONLY teachers are allowed to edit e.g. user.role.
• If a user who fails these checks ends up on a different users edit page, redirect them to the normal profile page.

6. Deal with Input: In the EditProfile component create a useState variable to store updates user data. E.g. const [formData, setFormData] = useState ({firstName: "", lastName: "", etc.}). Create a handleInput function which will update the updatedProfile profile variable each time a user types a new value. Also create a handleSubmit function which will send the Patch API request to the server and return the updated Data and save it to the profile variable (obtained from the ProfileContext).
7. Profile page should automatically update once profile/setProfile has been updated?

[dogezen]

OK, looks good, just something to think about might be

• validations during editing
• spinners / loaders / error messages for fetch errors / indicating we are fetching