Better state management

client-solid/src/Navbar.tsx

@@ -1,9 +1,10 @@
-import { useContext } from "solid-js";
+import { JSXElement, createEffect, createSignal, useContext } from "solid-js";
 import { A } from "@solidjs/router";
 import { LoginContext } from "./Root";
 import { ModalContext } from "./Root";
 
-function MenuItem(props: { href: string; children: any }) {
+// Represents a single list item in the menu bar
+function MenuItem(props: { href: string; children: JSXElement }) {
   return (
     <li>
       <A class="justify-center" href={props.href} end>
@@ -13,8 +14,9 @@ function MenuItem(props: { href: string; children: any }) {
   );
 }
 
+// Represents the menu bar at the top of the page
 function Menu() {
-  let login_ctx = useContext(LoginContext);
+  const login_ctx = useContext(LoginContext);
   return (
     <ul class="menu md:menu-horizontal rounded-box">
       <MenuItem href="/">Home</MenuItem>
@@ -24,22 +26,32 @@ function Menu() {
 }
 
 export function Navbar() {
-  let modal_ctx = useContext(ModalContext);
-  let login_ctx = useContext(LoginContext);
+  const modal_ctx = useContext(ModalContext);
+  const login_ctx = useContext(LoginContext);
+  const [buttonText, setButtonText] = createSignal("Login");
 
   const logout = () => {
-    localStorage.setItem("token", "");
-    localStorage.setItem("username", "");
+    localStorage.removeItem("token");
+    localStorage.removeItem("username");
     login_ctx?.setToken("");
     login_ctx?.setUsername("");
   };
 
-  // Capitalize the first letter of the username
-  const username =
-    login_ctx && login_ctx.username()
-      ? login_ctx.username().charAt(0).toUpperCase() +
-        login_ctx.username().slice(1)
-      : "Guest";
+  // Function to instantly elect 50 cent as president and declare war on north korea
+  const capitalizeFirst = (str: string) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  };
+
+  createEffect(() => {
+    if (login_ctx?.token() != "")
+      setButtonText(capitalizeFirst(login_ctx?.username() ?? "") + " (Logout)");
+    else setButtonText("Login");
+  }, 0);
+
+  const clickHandler = () => {
+    if (login_ctx?.token() != "") logout();
+    else modal_ctx?.setLoginModalOpen(true);
+  };
 
   return (
     <div class="navbar text-neutral-content max-w-3xl max-w rounded-box my-4">
@@ -55,12 +67,9 @@ export function Navbar() {
         <A
           href="#"
           class="btn btn-ghost normal-case text-sm"
-          onClick={() => {
-            if (login_ctx?.token() != "") logout();
-            else modal_ctx?.setLoginModalOpen(true);
-          }}
+          onClick={clickHandler}
         >
-          {login_ctx?.token() != "" ? username : "Login"}
+          {buttonText()}
         </A>
       </div>
     </div>

client-solid/src/NewPost.tsx

@@ -0,0 +1,56 @@
+import { Show, createSignal, useContext } from "solid-js";
+import { createPost } from "./api";
+import { NewPost } from "./api";
+import { useNavigate } from "@solidjs/router";
+import { LoginContext } from "./Root";
+
+
+export function NewPostInputArea() {
+  const [content, setContent] = createSignal("");
+  const [waiting, setWaiting] = createSignal(false);
+  const login_ctx = useContext(LoginContext);
+
+  const nav = useNavigate();
+
+  const sendPost = () => {
+    setWaiting(true);
+
+    const response = createPost({
+      content: content(),
+      token: login_ctx?.token(),
+    } as NewPost);
+
+    if (response) {
+      response.then(() => {
+        setWaiting(false);
+        setContent("");
+        nav("/");
+      });
+    }
+  };
+
+  return (
+    <Show
+      when={!waiting()}
+      fallback={<span class="loading loading-spinner loading-lg self-center"></span>}
+    >
+      <div class="flex flex-col w-full space-y-2">
+        <textarea
+          class="textarea textarea-bordered h-32"
+          placeholder="Speak your mind..."
+          maxLength={500}
+          oninput={(input) => {
+            setContent(input.target.value);
+          }}
+        ></textarea>
+        <button
+          class={"btn btn-primary self-end btn-sm" +
+            (content() == "" ? " btn-disabled" : "")}
+          onclick={sendPost}
+        >
+          Submit
+        </button>
+      </div>
+    </Show>
+  );
+}

client-solid/src/Posts.tsx

@@ -9,7 +9,7 @@ export function Posts() {
   const [loading, setLoading] = createSignal(true);
 
   getPosts().then((posts) => {
-    setPosts(posts as any);
+    setPosts(posts);
     setLoading(false);
   });
 

client-solid/src/Primary.tsx

@@ -1,7 +1,7 @@
 import { Route, Routes } from "@solidjs/router";
 import { Posts } from "./Posts";
 import { SinglePost } from "./SinglePost";
-import { NewPostInputArea } from "./Root";
+import { NewPostInputArea } from "./NewPost";
 
 // Primary is the section of the page that holds the main content
 export function Primary() {

client-solid/src/Root.tsx

@@ -1,13 +1,9 @@
-import { Accessor, Show, createSignal, useContext } from "solid-js";
+import { Accessor, createSignal } from "solid-js";
 import { createContext } from "solid-js";
 
-import { createPost } from "./api";
-import { NewPost } from "./api";
 import { Navbar } from "./Navbar";
 import { Primary } from "./Primary";
-// import { Login } from "./Navbar";
 import { LoginModal } from "./LoginModal";
-import { useNavigate } from "@solidjs/router";
 
 // Representing the state of varoious modals.
 // So far we only have one modal, but we can add more later
@@ -48,7 +44,7 @@ function Root() {
           <div class="flex flex-col items-center">
             <Navbar />
             <LoginModal />
-            <div class="flex flex-col items-center md:w-96 space-y-2">
+            <div class="flex flex-col items-center w-full md:w-96 px-2 space-y-2">
               <Primary />
             </div>
           </div>
@@ -58,58 +54,4 @@ function Root() {
   );
 }
 
-export function NewPostInputArea() {
-  const [content, setContent] = createSignal("");
-  const [waiting, setWaiting] = createSignal(false);
-  const login_ctx = useContext(LoginContext);
-
-  const nav = useNavigate();
-
-  const sendPost = () => {
-    setWaiting(true);
-
-    const response = createPost({
-      content: content(),
-      token: login_ctx?.token(),
-    } as NewPost);
-
-    if (response) {
-      response.then(() => {
-        setWaiting(false);
-        setContent("");
-        nav("/");
-      });
-    }
-  };
-
-  return (
-    <Show
-      when={!waiting()}
-      fallback={
-        <span class="loading loading-spinner loading-lg self-center"></span>
-      }
-    >
-      <div class="flex flex-col space-y-2">
-        <textarea
-          class="textarea textarea-bordered"
-          placeholder="Speak your mind..."
-          maxLength={500}
-          oninput={(input) => {
-            setContent(input.target.value);
-          }}
-        ></textarea>
-        <button
-          class={
-            "btn btn-primary self-end btn-sm" +
-            (content() == "" ? " btn-disabled" : "")
-          }
-          onclick={sendPost}
-        >
-          Submit
-        </button>
-      </div>
-    </Show>
-  );
-}
-
 export default Root;