From 7e4a15b0e606d0772ba5ddc248e7c56fc000cd4c Mon Sep 17 00:00:00 2001 From: Dane Urban Date: Wed, 15 Mar 2023 13:01:15 +1100 Subject: [PATCH 1/2] fix(frontend) Navbar not changing on logout --- frontend/src/components/NavBar/AvatarButton.tsx | 3 ++- frontend/src/components/NavBar/index.tsx | 10 +++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/NavBar/AvatarButton.tsx b/frontend/src/components/NavBar/AvatarButton.tsx index 872a6daf..92e06710 100644 --- a/frontend/src/components/NavBar/AvatarButton.tsx +++ b/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(); }); }; diff --git a/frontend/src/components/NavBar/index.tsx b/frontend/src/components/NavBar/index.tsx index ae6f851d..0a355a83 100644 --- a/frontend/src/components/NavBar/index.tsx +++ b/frontend/src/components/NavBar/index.tsx @@ -1,5 +1,5 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { NavLink, Link as RouterLink } from "react-router-dom"; import tw, { styled } from "twin.macro"; @@ -29,9 +29,13 @@ const NavButton = styled(NavLink, { }); const NavBar = ({ campaign }: { campaign: string }) => { - const loggedIn = isLoggedIn(); + const [loggedIn, setLoggedIn] = useState(false); const [aboutOpen, setAboutOpen] = useState(false); + useEffect(() => { + setLoggedIn(isLoggedIn()); + }); + return (
@@ -62,7 +66,7 @@ const NavBar = ({ campaign }: { campaign: string }) => {
​ {loggedIn ? ( - + setLoggedIn(false)} /> ) : ( Date: Wed, 5 Jul 2023 22:04:31 +1000 Subject: [PATCH 2/2] Changed from useEffect to context --- frontend/src/App.tsx | 34 +++++++++++++----------- frontend/src/components/NavBar/index.tsx | 17 +++++++----- frontend/src/contexts/LoggedInContext.ts | 4 +++ 3 files changed, 34 insertions(+), 21 deletions(-) create mode 100644 frontend/src/contexts/LoggedInContext.ts diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index b0bb931a..bfbdef45 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -4,6 +4,7 @@ import { Suspense, useCallback, useState } from "react"; import { BrowserRouter, Routes } from "react-router-dom"; import "twin.macro"; +import { LoggedInContext } from "contexts/LoggedInContext"; import { MessagePopupContext } from "contexts/MessagePopupContext"; import { LoadingIndicator, MessagePopup, NavBar } from "./components"; @@ -38,6 +39,7 @@ const theme = createTheme({ const App = () => { const [AppBarTitle, setNavBarTitle] = useState(""); const [messagePopup, setMessagePopup] = useState([]); + const [loggedIn, setLoggedIn] = useState(false); const pushMessage = useCallback( (message: Message) => { @@ -56,21 +58,23 @@ const App = () => { - - - - }> - {routes} - - -
- {messagePopup.map((message) => ( - - {message.message} - - ))} -
- + + + + + }> + {routes} + + +
+ {messagePopup.map((message) => ( + + {message.message} + + ))} +
+ + diff --git a/frontend/src/components/NavBar/index.tsx b/frontend/src/components/NavBar/index.tsx index 0a355a83..e8d16c4a 100644 --- a/frontend/src/components/NavBar/index.tsx +++ b/frontend/src/components/NavBar/index.tsx @@ -1,5 +1,5 @@ import { InformationCircleIcon } from "@heroicons/react/24/outline"; -import { useEffect, useState } from "react"; +import { useContext, useState } from "react"; import { NavLink, Link as RouterLink } from "react-router-dom"; import tw, { styled } from "twin.macro"; @@ -7,6 +7,7 @@ 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,13 +29,17 @@ const NavButton = styled(NavLink, { `, }); -const NavBar = ({ campaign }: { campaign: string }) => { - const [loggedIn, setLoggedIn] = useState(false); +const NavBar = ({ + campaign, + loggedIn, +}: { + campaign: string; + loggedIn: boolean; +}) => { const [aboutOpen, setAboutOpen] = useState(false); + const setLoggedIn = useContext(LoggedInContext); - useEffect(() => { - setLoggedIn(isLoggedIn()); - }); + setLoggedIn(isLoggedIn()); return (
diff --git a/frontend/src/contexts/LoggedInContext.ts b/frontend/src/contexts/LoggedInContext.ts new file mode 100644 index 00000000..be8452e4 --- /dev/null +++ b/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) => {});