navbar finished

src/components/NavBar.css

@@ -11,12 +11,15 @@
 .nav-brand {
     display: flex;
     align-items: center;
+}
+
+.nav-header {
     text-decoration: none;
-    color: inherit;
+    color: black;
 }
 
-.nav-brand:hover {
-    color: inherit;
+.nav-header:hover {
+    color: black;
 }
 
 .nav-login-control {

src/components/NavBar.js

@@ -4,31 +4,29 @@ import { Toolbar, Typography, Button, IconButton, Link } from "@material-ui/core
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import logo from "../assets/BudgetBuddyLogo.png"
 import "./NavBar.css"
-import {checkLogin, getFirstName} from "../utils/utils";
+import {checkLogin, getName, handleLogout} from "../utils/utils";
 import NavDropdown from 'react-bootstrap/NavDropdown';
+import { useEffect, useState } from "react";
+import { async } from "q";
 
 export default function NavBar() {
-    const handleLogin = () => {
-        window.location.href='/login';
-    }
-
-    const handleSignup = () => {
-        window.location.href='/signup';
-    }
+    const [name, setName] = useState(null);
 
-    const handleLogout= () => {
-        document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
-        window.location.href='/welcome';
+    useEffect(() => {
+        async function fetchName() {
+            const name = await getName();
+            setName(name);
         }
-
+        fetchName();
+    }, []);
 
     return (
         <Toolbar position="sticky" className="bar">
-            <Link href="/" className="nav-brand">
+            <Link href="/" className="nav-brand" underline="none">
                 <img src={logo} className="logo w-100"/>
                 <Typography 
-                    className="nav-header"
-                    variant="h5" >
+                    variant="h5"
+                    className="nav-header">
                     BudgetBuddy
                 </Typography>
             </Link>
@@ -36,17 +34,17 @@ export default function NavBar() {
                 {checkLogin()
                     ? // Logged In
                         <div>
-                            <NavDropdown title={`Logged in as ${getFirstName()}`}>
-                                <NavDropdown.Item>Profile</NavDropdown.Item>
-                                <NavDropdown.Item>My account</NavDropdown.Item>
+                            <NavDropdown title={`Logged in as ${name}`}>
+                                <NavDropdown.Item href="/settings">Settings</NavDropdown.Item>
+                                <NavDropdown.Item href="/about-us">About Us</NavDropdown.Item>
                                 <NavDropdown.Item onClick={handleLogout}>Sign Out</NavDropdown.Item>
                             </NavDropdown>
                         </div>
                     : // Logged Out
                     <span className="mx-0" style={{display: "flex"}}> 
-                        <Button  className="mx-0" onClick={handleLogin}>Login</Button>
+                        <Button  className="mx-0" href="/login">Login</Button>
                         <p style={{marginTop: "9px"}}>or</p>
-                        <Button className="mx-0" onClick={handleSignup}>Signup</Button>
+                        <Button className="mx-0" href="/signup">Signup</Button>
                     </span>
                 }
             </div>

src/components/SideNav.js

@@ -9,9 +9,21 @@ import LogoutIcon from '@mui/icons-material/Logout';
 import { Avatar, Typography } from '@material-ui/core';
 import { Link, Divider } from '@material-ui/core';
 import './SideNav.css'
+import { useState, useEffect } from 'react'
+import {getName, handleLogout} from "../utils/utils";
 
 
 export default function SideNav() {
+    const [firstName, setFirstName] = useState(null);
+
+    useEffect(() => {
+        async function fetchFirstName() {
+            const name = await getName();
+            setFirstName(name.split(" ")[0]);
+        }
+        fetchFirstName();
+    }, []);
+
     return(
         <Sidebar className="sidebar" backgroundColor='transparent' style={{border:"none"}}>
             <div className='sidebar-header'>
@@ -19,7 +31,7 @@ export default function SideNav() {
                     <Avatar />
                 </div>
                 <div className='sidebar-text'>
-                    <Typography className='sidebar-welcome' variant='h6'>Welcome, Jacob</Typography>
+                    <Typography className='sidebar-welcome' variant='h6'>Welcome, {firstName}</Typography>
                     <Typography variant='subtitle2'> Your Budget Overiew</Typography>
                 </div>
             </div>
@@ -61,6 +73,7 @@ export default function SideNav() {
                 </MenuItem>
                 */}
                 <MenuItem
+                    onClick={handleLogout}
                     icon={<LogoutIcon/>}>
                     Sign Out
                 </MenuItem>

src/pages/Dashboard.jsx

@@ -12,7 +12,7 @@ import AddIncome from '../components/AddIncome'
 export default function Dashboard() {
   return (
 		<AppProvider>
-			<div className='container'>
+			<div className='container-fluid'>
 				<h1 className='mt-3'>My Budget Planner</h1>
 				<div className='row mt-3'>
 					<div className='col-sm'>

src/utils/utils.js

@@ -16,24 +16,30 @@ function getSessionKey() {
   for (let i = 0; i < cookies.length; i++) {
     const cookie = cookies[i].trim(); // Remove any leading or trailing whitespace
     if (cookie.startsWith('session=')) {
-      console.log(cookie.substring('session='.length, cookie.length));
       return cookie.substring('session='.length, cookie.length); // Extract the value of the cookie
     }
   }
   return null;
 }
 
-export function getFirstName() {
-  fetch('http://127.0.0.1:3030/userinfo', {
+export async function getName() {
+  try {
+    const response = await fetch('http://127.0.0.1:3030/userinfo', {
       method: 'GET',
       headers: {
-      'x-session-key' : "b36efa01-7824-4f61-a274-63131b58d8fe",
+        'x-session-key': getSessionKey(),
+      },
+    });
+    const data = await response.json();
+    const firstName = data.name;
+    console.log(firstName); // Logs the first name correctly
+    return firstName;
+  } catch (error) {
+    console.error(error);
   }
-  })
-  .then(response => response.json())
-  .then(data => {
-    const name = data.name;
-    return name; // Return firstname
-  })
-  .catch(error => console.error(error));
+}
+
+export function handleLogout() {
+  document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
+  window.location.href='/welcome';
 }