fix(frontend) Navbar not changing on logout

frontend/src/App.tsx

@@ -5,6 +5,8 @@ import { Toaster } from "react-hot-toast";
 import { BrowserRouter, Routes } from "react-router-dom";
 import "twin.macro";
 
+import { LoggedInContext } from "contexts/LoggedInContext";
+
 import { LoadingIndicator, NavBar } from "./components";
 import { SetNavBarTitleContext } from "./contexts/SetNavbarTitleContext";
 import routes from "./routes";
@@ -34,27 +36,30 @@ const theme = createTheme({
 
 const App = () => {
   const [AppBarTitle, setNavBarTitle] = useState("");
+  const [loggedIn, setLoggedIn] = useState(false);
 
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
       <SnackbarProvider maxSnack={3}>
         <SetNavBarTitleContext.Provider value={setNavBarTitle}>
-          <BrowserRouter>
-            <NavBar campaign={AppBarTitle} />
-            <Box pt={8} minHeight="100vh" display="flex" tw="bg-gray-50">
-              <Suspense fallback={<LoadingIndicator />}>
-                <Routes>{routes}</Routes>
-              </Suspense>
-            </Box>
-            <Toaster
-              position="bottom-right"
-              reverseOrder={false}
-              toastOptions={{
-                duration: 5000,
-              }}
-            />
-          </BrowserRouter>
+          <LoggedInContext.Provider value={setLoggedIn}>
+            <BrowserRouter>
+              <NavBar campaign={AppBarTitle} loggedIn={loggedIn} />
+              <Box pt={8} minHeight="100vh" display="flex" tw="bg-gray-50">
+                <Suspense fallback={<LoadingIndicator />}>
+                  <Routes>{routes}</Routes>
+                </Suspense>
+              </Box>
+              <Toaster
+                position="bottom-right"
+                reverseOrder={false}
+                toastOptions={{
+                  duration: 5000,
+                }}
+              />
+            </BrowserRouter>
+          </LoggedInContext.Provider>
         </SetNavBarTitleContext.Provider>
       </SnackbarProvider>
     </ThemeProvider>

frontend/src/components/NavBar/AvatarButton.tsx

@@ -22,7 +22,7 @@ const ItemButton = tw.button`
   focus-within:(outline-none ring ring-indigo-600/50)
 `;
 
-const AvatarButton = () => {
+const AvatarButton = ({ onLogout }: { onLogout: () => void }) => {
   const name = localStorage.getItem("name") ?? "";
   const initials = name
     .split(" ")
@@ -36,6 +36,7 @@ const AvatarButton = () => {
     ["name", "signup_token", "AUTH_TOKEN"].forEach((key) => {
       localStorage.removeItem(key);
       navigate("/");
+      onLogout();
     });
   };
 

frontend/src/components/NavBar/index.tsx

@@ -1,12 +1,13 @@
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import { useState } from "react";
+import { useContext, useState } from "react";
 import { NavLink, Link as RouterLink } from "react-router-dom";
 import tw, { styled } from "twin.macro";
 
 import chaosImg from "assets/chaos.png";
 import Container from "components/Container";
 import Link from "components/Link";
 import Modal from "components/Modal";
+import { LoggedInContext } from "contexts/LoggedInContext";
 
 import { isLoggedIn } from "../../utils";
 
@@ -28,9 +29,17 @@ const NavButton = styled(NavLink, {
   `,
 });
 
-const NavBar = ({ campaign }: { campaign: string }) => {
-  const loggedIn = isLoggedIn();
+const NavBar = ({
+  campaign,
+  loggedIn,
+}: {
+  campaign: string;
+  loggedIn: boolean;
+}) => {
   const [aboutOpen, setAboutOpen] = useState(false);
+  const setLoggedIn = useContext(LoggedInContext);
+
+  setLoggedIn(isLoggedIn());
 
   return (
     <header tw="fixed inset-x-0 z-10 bg-white shadow-md bg-gradient-to-r from-[#9dbbfb55] to-[#a78bfa55]">
@@ -62,7 +71,7 @@ const NavBar = ({ campaign }: { campaign: string }) => {
           <div tw="flex items-center gap-4">
             <span tw="border-slate-500 border-l">&#x200b;</span>
             {loggedIn ? (
-              <AvatarButton />
+              <AvatarButton onLogout={() => setLoggedIn(false)} />
             ) : (
               <a
                 tw="rounded bg-indigo-400/30 px-3 py-1.5 text-black shadow transition-colors hover:bg-indigo-400/[0.42]"

frontend/src/contexts/LoggedInContext.ts

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+export const LoggedInContext = createContext((_loggedIn: boolean) => {});