gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-07 21:48:14 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

navbar finished

Browse source
This commit is contained in:
jveebs 2023-04-13 17:01:18 -04:00
parent edf43f30da
commit 8cbb8ee963
5 changed files with 61 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/NavBar.css
View file

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

40
src/components/NavBar.js
View file

@ -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 handleLogout= () => {
document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
window.location.href='/welcome';
}
const [name, setName] = useState(null);
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>

15
src/components/SideNav.js
View file

@ -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>

2
src/pages/Dashboard.jsx
View file

@ -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'>

34
src/utils/utils.js
View file

@ -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', {
method: 'GET',
headers: {
'x-session-key' : "b36efa01-7824-4f61-a274-63131b58d8fe",
}
})
.then(response => response.json())
.then(data => {
const name = data.name;
return name; // Return firstname
})
.catch(error => console.error(error));
export async function getName() {
try {
const response = await fetch('http://127.0.0.1:3030/userinfo', {
method: 'GET',
headers: {
'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);
}
}
export function handleLogout() {
document.cookie.split(";").forEach(function(c) { document.cookie = c.replace(/^ +/, "").replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/"); });
window.location.href='/welcome';
}