Changed layout to a be a function component.

sports-matcher/client/src/Layout.js

@@ -1,7 +1,7 @@
 import "./styles/Layout.css";
 import "./styles/extra.css";
-import React from "react";
-import { NavLink, Route, Routes } from "react-router-dom";
+import React, { 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";
@@ -9,11 +9,56 @@ import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
 import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
 import Dashboard from "./pages/Dashboard";
 import Login from "./pages/Login";
+import { apiClient } from "./utils/httpClients";
 
-export default class Layout extends React.Component {
-    render() {
-        return (
-            <div id="app">
+
+export default function layout() {
+    const navigate = useNavigate();
+    const navigationContext = React.createContext(navigate);
+    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">
+            <navigationContext.Provider value={navigate}>
                 <header>
                     <Navbar bg="light" expand="md">
                         <Container>
@@ -25,6 +70,7 @@ export default class Layout extends React.Component {
                                         <NavLink className="nav-link" to="/" >Home</NavLink>
                                     </li>
                                 </Nav>
+                                {indentityDisplay}
                             </NavbarCollapse>
                         </Container>
                     </Navbar>
@@ -39,7 +85,7 @@ export default class Layout extends React.Component {
                 <footer>
 
                 </footer>
-            </div>
-        );
-    }
+            </navigationContext.Provider>
+        </div>
+    );
 }