Implement checking logged in user tests, Navbar user info component etc.

src/App.tsx

@@ -3,6 +3,7 @@ import { BrowserRouter, Routes, Route } from "react-router-dom";
 
 import Navbar from "./components/Navbar.tsx";
 import NavbarButton from "./components/NavbarButton.tsx";
+import NavbarUserInfo from "./components/NavbarUserInfo.tsx";
 
 import Home from "./pages/Home.tsx";
 import Login from "./pages/Login.tsx";
@@ -17,13 +18,31 @@ export default function App() {
   const usernameStorageHandler = usernameStorageHandlerInit();
   const authTokenStorageHandler = authTokenStorageHandlerInit();
 
+  function testUserButton() {
+    return usernameStorageHandler.usernameValue ? "" : "Test User";
+  }
+
   return (
     <>
       <BrowserRouter>
         <Navbar>
           <NavbarButton>Home</NavbarButton>
-          <NavbarButton>Login</NavbarButton>
           <NavbarButton>About</NavbarButton>
+          {usernameStorageHandler.usernameValue ? (
+            <NavbarUserInfo
+              username={"Logged in as " + usernameStorageHandler.usernameValue}
+            ></NavbarUserInfo>
+          ) : (
+            <NavbarButton>Login</NavbarButton>
+          )}
+          <button
+            onClick={() =>
+              usernameStorageHandler.setUsernameValue(testUserButton())
+            }
+            className="navBarItem navBarItemText"
+          >
+            Click me!
+          </button>
         </Navbar>
         <div id="page">
           <Routes>

src/components/NavbarButton.tsx

@@ -8,8 +8,8 @@ interface Props {
 export default function NavbarButton({ children }: Props) {
   return (
     <>
-      <Link to={children.toLowerCase()} className="navBarButton">
+      <Link to={children.toLowerCase()} className="navBarItem">
-        <p className="navBarButtonText">{children}</p>
+        <p className="navBarItemText">{children}</p>
       </Link>
     </>
   );

src/components/NavbarUserInfo.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+interface Props {
+  username: string;
+}
+
+export default function NavbarUserInfo({ username }: Props) {
+  return (
+    <>
+      <p className="navBarItem navBarItemText">{username}</p>
+    </>
+  );
+}

src/components/storageHandler.ts

@@ -6,6 +6,8 @@ React Hooks may not be a good fit for this role as these functions need to be re
 Could look at using global variables to avoid this (But it appears to be frowned upon? And react has trouble updating usestate hooks when it comes to globals it seems)
 Or could simply stop using react hooks for this role
 It appears to work for now so will leave be
+
+Confirmed that react cannot currently find and update DOM elements in other files. This will need to be changed
  */
 
 export const usernameStorageHandlerInit = () => {

src/index.css

@@ -33,20 +33,16 @@ a {
   height: var(--nav-bar-height);
   max-height: var(--nav-bar-height);
   max-width: 100%;
-  display: grid;
+  display: flex;
   gap: 10px;
   padding: 5px;
-  grid-auto-flow: column;
-  grid-auto-rows: 100%;
-  grid-auto-columns: 5rem;
   background-color: black;
 }
 
-.navBarButton {
+.navBarItem {
   height: 100%;
-  width: 100%;
+  min-width: 5rem;
   max-height: 100%;
-  max-width: 100%;
   border-radius: var(--border-radii);
   display: flex;
   align-items: center;
@@ -54,7 +50,7 @@ a {
   background: white;
 }
 
-.navBarButtonText {
+.navBarItemText {
   margin: 0px;
   padding: 0px;
   text-align: center;