Add User Dropdown

Contains:
 - Username
 - route to Profile (not implemented)
 - logout (again)

Author: RingoftheKing

Frontend/src/components/NavigationBar.jsx

@@ -2,19 +2,22 @@ import Container from 'react-bootstrap/Container';
 import Navbar from 'react-bootstrap/Navbar';
 import Button from 'react-bootstrap/esm/Button';
 import { useNavigate } from 'react-router-dom';
+import UserAvatarBox from "./user/userAvatarBox";
 
 function NavigationBar() {
     const navigate = useNavigate();
 
     // Add log out functionality 
     const handleLogout = () => {
+        sessionStorage.removeItem("jwt_token");
         navigate("/login");
     }
 
     return (
         <Navbar className='bg-light' sticky="top">
             <Container>
                 <Navbar.Brand>PeerPrep</Navbar.Brand>
+                <UserAvatarBox />
                 <Button className="ms-auto" variant="danger" onClick={handleLogout}>
                     Logout
                 </Button>

Frontend/src/components/user/EditProfile.jsx

@@ -0,0 +1 @@
+// Page where users can change their profile information, including their username, email, and password.

Frontend/src/components/user/Profile.jsx

@@ -0,0 +1 @@
+// Profile Page that can list user accomplishments and other information

Frontend/src/components/user/userAvatarBox.jsx

@@ -0,0 +1,64 @@
+import React, {useEffect, useState} from "react";
+import { useNavigate } from "react-router-dom";
+import { Dropdown, ButtonGroup } from "react-bootstrap";
+import {jwtDecode} from "jwt-decode";
+import userService from "../../services/users";
+
+
+async function getUserFromToken() {
+    const jwtToken = sessionStorage.getItem('jwt_token');
+    if (jwtToken) {
+        const decodedToken = jwtDecode(jwtToken);
+        try {
+            // decodedToken has an id field in auth-controller.js
+            // user fetched by id has a username field in user-model.js
+            const id = decodedToken.id;
+            const user = await userService.getUser(
+                decodedToken.id, {headers: {Authorization: `Bearer ${jwtToken}`}})
+            // getUser return an Object with data, message, and type
+            // The user data is nested in Object.data and hence we need a double .data to access it
+            return {id: id, username: user.data.data.username};
+        } catch (error) {
+            console.error(error);
+            return "No User";
+        }
+    }
+    return "No User";
+}
+
+function UserAvatarBox() {
+    const navigate = useNavigate();
+    const [username, setUsername] = useState("No User");
+
+    const handleLogout = () => {
+        sessionStorage.removeItem('jwt_token');
+        navigate('/login');
+    };
+
+    useEffect(() => {
+        async function fetchData() {
+            const user = await getUserFromToken();
+            console.log("User: ", user);
+            if (user) {
+                setUsername(user.username);
+                console.log(username);
+            }
+        }
+        fetchData();
+    }, []);
+
+    return (
+    <Dropdown as={ButtonGroup} className="m-2">
+        {/* Nice to have image in the future*/}
+        <Dropdown.Toggle id="dropdown-custom-1">
+            {username}
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="super-colors">
+            <Dropdown.Item eventKey="1" onClick={handleLogout}>Logout</Dropdown.Item>
+            <Dropdown.Item eventKey="2" onClick={() => navigate('/profile')}>Profile</Dropdown.Item>
+        </Dropdown.Menu>
+    </Dropdown>
+    );
+}
+
+export default UserAvatarBox;

Frontend/src/services/users.js

@@ -9,8 +9,8 @@ const createUser = async (newUser) => {
     return response;
 };
 
-const getUser = async (id) => {
-    const response = await axios.get(`${baseUrl}/${user}/${id}`);
+const getUser = async (id, jwt_token) => {
+    const response = await axios.get(`${baseUrl}/${user}/${id}`, jwt_token);
     return response;
 };