Modify api that fetches user by id

Author: nicolelim02

backend/user-service/routes/user-routes.ts

@@ -27,7 +27,7 @@ router.patch(
 
 router.post("/", createUser);
 
-router.get("/:id", verifyAccessToken, getUser);
+router.get("/:id", getUser);
 
 router.patch("/:id", verifyAccessToken, verifyIsOwnerOrAdmin, updateUser);
 

frontend/src/components/ProfileSection/index.tsx

@@ -1,4 +1,5 @@
-import { Avatar, Box, Button, Stack, Typography } from "@mui/material";
+import { Avatar, Box, Button, Divider, Stack, Typography } from "@mui/material";
+import React from "react";
 
 type ProfileSectionProps = {
   firstName: string;
@@ -15,11 +16,17 @@ const ProfileSection: React.FC<ProfileSectionProps> = (props) => {
     <Box>
       <Box sx={{ display: "flex", flexDirection: "column" }}>
         <Box
-          sx={{ display: "flex", flexDirection: "row", alignItems: "center" }}
+          sx={(theme) => ({
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            marginTop: theme.spacing(2),
+            marginBottom: theme.spacing(2),
+          })}
         >
           <Avatar sx={{ width: 56, height: 56 }} />
           <Box sx={(theme) => ({ marginLeft: theme.spacing(2) })}>
-            <Typography fontSize={"h5.fontSize"}>
+            <Typography fontSize={"h6.fontSize"}>
               {firstName} {lastName}
             </Typography>
             <Typography>@{username}</Typography>
@@ -35,18 +42,21 @@ const ProfileSection: React.FC<ProfileSectionProps> = (props) => {
         </Typography>
       </Box>
       {isCurrentUser && (
-        <Stack
-          spacing={2}
-          sx={(theme) => ({
-            marginTop: theme.spacing(4),
-            marginBottom: theme.spacing(4),
-          })}
-        >
-          <Button variant="contained">Edit profile</Button>
-          <Button variant="contained" color="secondary">
-            Edit password
-          </Button>
-        </Stack>
+        <>
+          <Divider />
+          <Stack
+            spacing={2}
+            sx={(theme) => ({
+              marginTop: theme.spacing(4),
+              marginBottom: theme.spacing(4),
+            })}
+          >
+            <Button variant="contained">Edit profile</Button>
+            <Button variant="contained" color="secondary">
+              Edit password
+            </Button>
+          </Stack>
+        </>
       )}
     </Box>
   );

frontend/src/pages/Profile/index.tsx

@@ -16,7 +16,7 @@ type UserProfile = {
   isAdmin: boolean;
   biography?: string;
   profilePictureUrl?: string;
-  createdAt: Date;
+  createdAt: string;
 };
 
 const ProfilePage: React.FC = () => {
@@ -31,15 +31,9 @@ const ProfilePage: React.FC = () => {
   const { user } = auth;
 
   useEffect(() => {
-    // temp user token obtained from the backend to test cors
-    const accessToken =
-      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjY2ZWU2MDI1MTQzOWQ1YWRhNTNhOGIyMiIsImlhdCI6MTcyNzA4MDMzOSwiZXhwIjoxNzI3Njg1MTM5fQ.rofXQgtvcGuEkucv78MTQgqrP0XtPdQ-XPISiW9V_JM";
     userClient
-      .get(`/users/${userId}`, {
-        headers: { Authorization: `Bearer ${accessToken}` },
-      })
+      .get(`/users/${userId}`)
       .then((res) => {
-        console.log(res.data.data);
         setUserProfile(res.data.data);
       })
       .catch(() => setUserProfile(null));