93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
import "./styles/Layout.css";
|
|
import "./styles/extra.css";
|
|
import { useEffect, useState } from "react";
|
|
import { NavLink, Route, Routes, useNavigate } from "react-router-dom";
|
|
import Welcome from "./pages/Welcome";
|
|
import Navbar from "react-bootstrap/Navbar";
|
|
import { Container, Nav, NavbarBrand } from "react-bootstrap";
|
|
import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
|
|
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
|
|
import Dashboard from "./pages/Dashboard";
|
|
import Admin from "./pages/NewAdmin";
|
|
import Login from "./pages/Login";
|
|
import { apiClient } from "./utils/httpClients";
|
|
import { globalContext } from "./context.js";
|
|
|
|
|
|
export default function layout() {
|
|
const navigate = useNavigate();
|
|
const [state, setState] = useState({
|
|
user: null,
|
|
});
|
|
|
|
useEffect(async () => {
|
|
await updateAuthStatus();
|
|
});
|
|
|
|
async function updateAuthStatus() {
|
|
const getUserResponse = await apiClient.get("/user");
|
|
if (getUserResponse !== 200) {
|
|
setState({ user: null });
|
|
} else {
|
|
setState({ user: getUserResponse.data });
|
|
}
|
|
}
|
|
|
|
let indentityDisplay = (
|
|
<Nav>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/login" >Login</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/signup" >Sign up!</NavLink>
|
|
</li>
|
|
</Nav>
|
|
);
|
|
|
|
if (state.user) {
|
|
indentityDisplay = (
|
|
<Nav>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/" >Hi, {this.state.user.firstName}</NavLink>
|
|
</li>
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/logout" >Logout</NavLink>
|
|
</li>
|
|
</Nav>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div id="app">
|
|
<globalContext.Provider value={{ navigate: navigate }}>
|
|
<header>
|
|
<Navbar bg="light" expand="md">
|
|
<Container>
|
|
<NavbarBrand href="/">Sports Matcher</NavbarBrand>
|
|
<NavbarToggle aria-controls="navigation"></NavbarToggle>
|
|
<NavbarCollapse id="main-nav">
|
|
<Nav className="me-auto">
|
|
<li className="nav-item">
|
|
<NavLink className="nav-link" to="/" >Home</NavLink>
|
|
</li>
|
|
</Nav>
|
|
{indentityDisplay}
|
|
</NavbarCollapse>
|
|
</Container>
|
|
</Navbar>
|
|
</header>
|
|
<main>
|
|
<Routes>
|
|
<Route path="/" element={<Welcome />} />
|
|
<Route path="/dashboard" element={<Dashboard />} />
|
|
<Route path="/login" element={<Login />} />
|
|
<Route path="/admin" element={<Admin />} />
|
|
</Routes>
|
|
</main>
|
|
<footer>
|
|
|
|
</footer>
|
|
</globalContext.Provider>
|
|
</div>
|
|
);
|
|
} |