User profile page

src/App.js

@@ -15,7 +15,7 @@ export default function App() {
             <Routes>
                 <Route element={<UserAuthenticated />}>
                     <Route path='/' element={<Home />} />
-                    <Route path='/profile/:uid' element={<Profile />} />
+                    <Route path='/profile' element={<Profile />} />
                 </Route>
                 <Route path='/login' element={<Login />} />
                 <Route path='/register' element={<Register />} />

src/components/Dropdown/Dropdown.js

@@ -14,6 +14,7 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import LoginIcon from '@mui/icons-material/Login';
 import HelpIcon from '@mui/icons-material/Help';
 import MessageIcon from '@mui/icons-material/Message';
+import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
 import { useEffect } from 'react';
 
 export default function Dropdown() {
@@ -53,6 +54,10 @@ export default function Dropdown() {
         }, 1500);
     }
 
+    function navigateToProfile() {
+        navigate('/profile');
+    }
+
     return (
         <React.Fragment>
             <Box
@@ -125,12 +130,20 @@ export default function Dropdown() {
                     Settings
                 </MenuItem>
                 {loggedIn ? ( // Use the 'loggedIn' state to conditionally render the Logout/Login menu item
-                    <MenuItem onClick={handleLogOut}>
-                        <ListItemIcon>
-                            <LogoutIcon fontSize='small' />
-                        </ListItemIcon>
-                        Logout
-                    </MenuItem>
+                    <>
+                        <MenuItem onClick={navigateToProfile}>
+                            <ListItemIcon>
+                                <ManageAccountsIcon fontSize='small' />
+                            </ListItemIcon>
+                            Profile
+                        </MenuItem>
+                        <MenuItem onClick={handleLogOut}>
+                            <ListItemIcon>
+                                <LogoutIcon fontSize='small' />
+                            </ListItemIcon>
+                            Logout
+                        </MenuItem>
+                    </>
                 ) : (
                     <MenuItem onClick={handleLogin}>
                         <ListItemIcon>

src/pages/Home/Home.jsx

@@ -52,11 +52,15 @@ function Home() {
     const notify = (username) => toast.success('Welcome! ' + username);
 
     useEffect(() => {
+<<<<<<< HEAD
+        if (location?.state?.loggin || localStorage.getItem('user')) {
+=======
         if (
             location.state &&
             location.state.loggin &&
             localStorage.getItem('user')
         ) {
+>>>>>>> origin/master
             notify(JSON.parse(localStorage.getItem('user')).username);
         }
     }, []);

src/pages/Profile/Profile.jsx

@@ -1,9 +1,57 @@
-import React from 'react';
-import { useParams } from 'react-router';
+import React, { useEffect, useState } from 'react';
+import { Avatar, Typography, Grid, Paper } from '@mui/material';
+import Button from '@mui/material/Button';
+import EditIcon from '@mui/icons-material/Edit';
 
 function Profile() {
-    const { uid } = useParams();
-    return <div>{uid}</div>;
+    const [userInfo, setUserInfo] = useState();
+
+    useEffect(() => {
+        if (localStorage.getItem('user')) {
+            setUserInfo(JSON.parse(localStorage.getItem('user')));
+        }
+    }, []);
+    console.log(userInfo);
+    return (
+        <Grid
+            container
+            justifyContent='center'
+            alignItems='center'
+            style={{ height: '100vh' }}
+        >
+            <Grid item xs={12} md={6}>
+                <Paper
+                    elevation={3}
+                    style={{ padding: '20px', textAlign: 'center' }}
+                >
+                    <Avatar
+                        alt='User Avatar'
+                        src='/path/to/avatar.jpg'
+                        sx={{ width: 100, height: 100, margin: '0 auto' }}
+                    />
+                    <Typography variant='h5' style={{ margin: '10px 0' }}>
+                        {userInfo?.username}
+                    </Typography>
+                    <Button variant='outlined' startIcon={<EditIcon />}>
+                        Edit
+                    </Button>
+                    <Typography variant='subtitle1'>
+                        Software Developer
+                    </Typography>
+                    <Typography variant='body1' style={{ margin: '20px 0' }}>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                        Nullam in commodo arcu.
+                    </Typography>
+                    <Typography variant='body2'>
+                        Email: {userInfo?.email}
+                    </Typography>
+                    <Typography variant='body2'>
+                        Location: New York, USA
+                    </Typography>
+                </Paper>
+            </Grid>
+        </Grid>
+    );
 }
 
 export default Profile;

src/server/.variable.env

@@ -1,2 +1,6 @@
 MONGO_DB=
+<<<<<<< HEAD
 PORT=
+=======
+PORT=
+>>>>>>> origin/master