As part of the cohort manager, each user should have their personal profile page that displays their details. As a user, I would like to view other users' profile pages regardless of which cohort they are in or whether they are teachers or not.
A user with id=12 should have their profile page at the path /profile/:id
Profile pages should only be visible by logged in users. When not logged in, redirect to the login page.
In the profile page view, the users' details should not be editable and just presented as text. This page should have a button with the text "Edit" that will take the user to the edit profile page.
This button should only be visible when the user visiting this profile page is:
a teacher
the user that page belongs to
Defining the route
Add the route in App.js as a nested route inside the: <Route element={<AuthenticateUser />}>, like it has been done for the /posts route.
The route's path should be /profiles/:id
The route should instantiate the ProfilePage component.
ProfilePage component
Add the component in the /scr/components/profile folder (to be created) as ProfilePage.js
Any styles specific to this component go in a styles.css in the same folder.
Pass the loggedInUser to the component so that we know whether to display or not the Edit button.
Fetching profile content
Obtain the :id from useParams when the component ProfilePage loads and store this in state.
Inside a useEffect run a GET request via client (see utils/client.js) to get the user data for a specific user by id (API endpoint is: GET /users/:id. Store the response of the fetched user object in state and render the HTML profile page from this loaded state.
As part of the cohort manager, each user should have their personal profile page that displays their details. As a user, I would like to view other users' profile pages regardless of which cohort they are in or whether they are teachers or not.
A user with id=12 should have their profile page at the path /profile/:id
Profile pages should only be visible by logged in users. When not logged in, redirect to the login page.
In the profile page view, the users' details should not be editable and just presented as text. This page should have a button with the text "Edit" that will take the user to the edit profile page.
This button should only be visible when the user visiting this profile page is:
Defining the route
Add the route in App.js as a nested route inside the:
<Route element={<AuthenticateUser />}>, like it has been done for the/postsroute.The route's path should be
/profiles/:idThe route should instantiate the
ProfilePagecomponent.ProfilePage component
Add the component in the
/scr/components/profilefolder (to be created) asProfilePage.jsAny styles specific to this component go in a
styles.cssin the same folder.Pass the
loggedInUserto the component so that we know whether to display or not the Edit button.Fetching profile content
Obtain the
:idfromuseParamswhen the componentProfilePageloads and store this in state.Inside a
useEffectrun a GET request viaclient(seeutils/client.js) to get the user data for a specific user by id (API endpoint is:GET /users/:id. Store the response of the fetched user object in state and render the HTML profile page from this loaded state.Example wireframe for profile page: refer to the epic wirefames https://github.com/boolean-uk/team-dev-frontend-client/issues/93
NOTE: we are NOT implementing the edit profile page here; hence we can display each piece of information as text, not in an input.
*** also adding loading spinner as initial state