Icons and refactoring frontend

client-solid/src/Icons.tsx

@@ -42,3 +42,76 @@ export function Bars(): JSXElement {
     </svg>
   );
 }
+
+export function UserCircle(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z"
+      />
+    </svg>
+  );
+}
+
+export function Flake(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      stroke-width="1"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      class="w-8 h-8"
+      data-testid="AcUnitIcon"
+    >
+      <path d="M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z" />
+    </svg>
+  );
+}
+
+export function Plus(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M12 4.5v15m7.5-7.5h-15"
+      />
+    </svg>
+  );
+}
+
+export function Home(): JSXElement {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="w-6 h-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
+      />
+    </svg>
+  );
+}

client-solid/src/LoginModal.tsx

@@ -1,4 +1,4 @@
-import { JSXElement, onCleanup, useContext } from "solid-js";
+import { JSXElement, Show, onCleanup, useContext } from "solid-js";
 import { ModalContext } from "./Root";
 import { LoginForm } from "./RegLogin/Login";
 import { RegisterForm } from "./RegLogin/Register";
@@ -21,8 +21,7 @@ export function LoginModal(): JSXElement {
   });
 
   return (
-    <>
+    <Show when={modal_ctx.loginModalOpen()}>
-      {modal_ctx.loginModalOpen() && (
       <dialog class="modal modal-open">
         <div class="modal-box">
           <form method="dialog">
@@ -61,7 +60,6 @@ export function LoginModal(): JSXElement {
           <button onclick={closeModal}>close</button>
         </form>
       </dialog>
-      )}
+    </Show>
-    </>
   );
 }

client-solid/src/Navbar.tsx

@@ -1,7 +1,8 @@
-import { JSXElement, createEffect, createSignal, useContext } from "solid-js";
+import { JSXElement, Show, useContext } from "solid-js";
 import { A } from "@solidjs/router";
 import { LoginContext } from "./Root";
 import { ModalContext } from "./Root";
+import { Flake, Home, Plus, UserCircle } from "./Icons";
 
 // Represents a single list item in the menu bar
 function MenuItem(props: { href: string; children: JSXElement }): JSXElement {
@@ -19,8 +20,14 @@ function Menu(): JSXElement {
   const login_ctx = useContext(LoginContext);
   return (
     <ul class="menu md:menu-horizontal space-y-2 md:space-x-2 md:space-y-0 rounded-box">
-      <MenuItem href="/">Home</MenuItem>
+      <MenuItem href="/">
-      {login_ctx?.token() != "" && <MenuItem href="/new">New Post</MenuItem>}
+        <Home />
+      </MenuItem>
+      <Show when={login_ctx?.token()}>
+        <MenuItem href="/new">
+          <Plus />
+        </MenuItem>
+      </Show>
     </ul>
   );
 }
@@ -28,7 +35,6 @@ function Menu(): JSXElement {
 export function Navbar(): JSXElement {
   const modal_ctx = useContext(ModalContext);
   const login_ctx = useContext(LoginContext);
-  const [buttonText, setButtonText] = createSignal("Login");
 
   const logout = (): void => {
     localStorage.removeItem("token");
@@ -37,17 +43,6 @@ export function Navbar(): JSXElement {
     login_ctx?.setUsername("");
   };
 
-  // Function to instantly elect 50 cent as president and declare war on north korea
-  const capitalizeFirst = (str: string): 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 = (): void => {
     if (login_ctx?.token() != "") logout();
     else modal_ctx?.setLoginModalOpen(true);
@@ -56,7 +51,8 @@ export function Navbar(): JSXElement {
   return (
     <div class="navbar text-neutral-content max-w-3xl max-w rounded-box md:my-4">
       <div class="flex-1">
-        <A href={"/"} class="btn btn-ghost normal-case text-xl">
+        <A href={"/"} class="btn btn-ghost normal-case pl-1 text-xl">
+          <Flake />
           FrostByte
         </A>
       </div>
@@ -66,10 +62,15 @@ export function Navbar(): JSXElement {
       <div class="flex-1 justify-end flex">
         <A
           href="#"
-          class="btn btn-ghost normal-case text-sm"
+          class="btn btn-ghost capitalize pr-1 text-sm"
           onClick={clickHandler}
         >
-          {buttonText()}
+          {
+            <Show when={login_ctx?.username()} fallback="Login">
+              {login_ctx?.username()}
+            </Show>
+          }
+          <UserCircle />
         </A>
       </div>
     </div>

client-solid/src/NewPost.tsx

@@ -1,4 +1,4 @@
-import { JSXElement, Show, createSignal, useContext } from "solid-js";
+import { JSXElement, Show, createSignal, onMount, useContext } from "solid-js";
 import { createPost } from "./api";
 import { NewPost } from "./api";
 import { useNavigate } from "@solidjs/router";
@@ -28,6 +28,10 @@ export function NewPostInputArea(): JSXElement {
     }
   };
 
+  onMount(() => {
+    if (login_ctx?.token() == "") nav("/");
+  });
+
   return (
     <Show
       when={!waiting()}

client-solid/src/Posts.tsx

@@ -1,4 +1,4 @@
-import { JSXElement, Show, createSignal } from "solid-js";
+import { JSXElement, Show, createSignal, For } from "solid-js";
 import { getPosts } from "./api";
 import { Post } from "./api";
 import { useNavigate } from "@solidjs/router";
@@ -16,9 +16,9 @@ export function Posts(): JSXElement {
 
   return (
     <Show when={!loading()} fallback={loadSpinner()}>
-      {posts().map((post) => {
+      <For each={posts()}>
-        return <PostSegment post={post}></PostSegment>;
+        {(post): JSXElement => <PostSegment post={post}></PostSegment>}
-      })}
+      </For>
     </Show>
   );
 }
@@ -27,7 +27,7 @@ export function Posts(): JSXElement {
 export function PostSegment({ post }: { post: Post }): JSXElement {
   const nav = useNavigate();
   return (
-    <div class="card border-b-2 flex-grow border-b-base-300 bg-base-200 hover:bg-base-300 compact text-base-content w-full">
+    <div class="card border-b-2 flex-grow border-b-base-300 bg-base-200 hover:bg-base-300 transition-all compact text-base-content w-full">
       <div class="card-body">
         <p class="text-base-content break-words">{post?.content}</p>
         <div class="card-actions justify-end">