Further polishing state management

client-solid/src/GlobalState.tsx

@@ -20,6 +20,7 @@ interface LoginContextType {
   username: Accessor<string>;
   setUsername: (value: string) => void;
   loggedIn: () => boolean;
+  logOut: () => void;
 }
 
 // It is unclear to me if this is the idiomatic way to do this in Solid
@@ -45,11 +46,18 @@ export function GlobalStateProvider(props: {
     return token() != "" && username() != "";
   }
 
+  function logOut(): void {
+    localStorage.removeItem("token");
+    localStorage.removeItem("username");
+    setToken("");
+    setUsername("");
+  }
+
   return (
     <>
       <ModalContext.Provider value={{ loginModalOpen, setLoginModalOpen }}>
         <LoginContext.Provider
-          value={{ token, setToken, username, setUsername, loggedIn }}
+          value={{ token, setToken, username, setUsername, loggedIn, logOut }}
         >
           {props.children}
         </LoginContext.Provider>

client-solid/src/Navbar.tsx

@@ -17,41 +17,34 @@ function MenuItem(props: { href: string; children: JSXElement }): JSXElement {
 
 // Represents the menu bar at the top of the page
 function Menu(): JSXElement {
-  const login_ctx = useContext(LoginContext);
+  const login_ctx = useContext(LoginContext)!;
   return (
-    <ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
-      <MenuItem href="/">
-        <Home />
-      </MenuItem>
-      <Show when={login_ctx?.token()}>
+    <Show when={login_ctx.loggedIn()}>
+      <ul class="menu space-y-2 rounded-box md:menu-horizontal md:space-x-2 md:space-y-0">
+        <MenuItem href="/">
+          <Home />
+        </MenuItem>
         <MenuItem href="/new">
           <Plus />
         </MenuItem>
-      </Show>
-    </ul>
+      </ul>
+    </Show>
   );
 }
 
 export function Navbar(): JSXElement {
-  const modal_ctx = useContext(ModalContext);
-  const login_ctx = useContext(LoginContext);
-
-  const logout = (): void => {
-    localStorage.removeItem("token");
-    localStorage.removeItem("username");
-    login_ctx?.setToken("");
-    login_ctx?.setUsername("");
-  };
+  const modal_ctx = useContext(ModalContext)!;
+  const login_ctx = useContext(LoginContext)!;
 
   const clickHandler = (): void => {
-    if (login_ctx?.token() != "") logout();
-    else modal_ctx?.setLoginModalOpen(true);
+    if (login_ctx.loggedIn()) login_ctx.logOut();
+    else modal_ctx.setLoginModalOpen(true);
   };
 
   return (
     <div class="max-w navbar max-w-3xl rounded-box text-neutral-content md:my-4">
       <div class="flex-1">
-        <A href={"/"} class="btn btn-ghost pl-1 text-xl normal-case">
+        <A href={"/"} class="btn btn-ghost text-xl normal-case">
           <Flake />
           FrostByte
         </A>
@@ -62,12 +55,12 @@ export function Navbar(): JSXElement {
       <div class="flex flex-1 justify-end">
         <A
           href="#"
-          class="btn btn-ghost pr-1 text-sm capitalize"
+          class="btn btn-ghost text-sm capitalize"
           onClick={clickHandler}
         >
           {
-            <Show when={login_ctx?.username()} fallback="Login">
-              {login_ctx?.username()}
+            <Show when={login_ctx.loggedIn()} fallback="Login">
+              {login_ctx.username()}
             </Show>
           }
           <UserCircle />