Polishing solid implementation

client-solid/src/Root.tsx

@@ -1,7 +1,9 @@
 import { createSignal } from "solid-js";
 import { createContext } from "solid-js";
 
-import { createPost, getPosts, getPost } from "./api";
+import { Route, Routes, A } from "@solidjs/router";
+
+import { createPost, getPosts } from "./api";
 import { Post, NewPost } from "./api";
 
 export const TestContext = createContext("Test123");
@@ -10,23 +12,51 @@ function Root() {
   return (
     <>
       <TestContext.Provider value="Test123">
-        <Primary />
+        <div class="flex flex-col items-center my-2">
+          <Navbar />
+          <div class="flex flex-col items-center md:w-96 space-y-2">
+            <Primary />
+          </div>
+        </div>
       </TestContext.Provider>
     </>
   );
 }
 
+function Navbar() {
+  return (
+    <div class="navbar bg-base-100 max-w-3xl max-w flex justify-evenly">
+      <a class="btn btn-ghost normal-case text-xl">hello</a>
+      <Menu />
+      <A href="/login" class="btn btn-ghost normal-case text-sm">
+        Login
+      </A>
+    </div>
+  );
+}
+
 function Menu() {
   return (
-    <ul class="menu menu-horizontal bg-base-200 rounded-box space-x-1">
+    <ul class="menu menu-horizontal bg-base-200 rounded-box space-x-2 justify-end">
       <li>
-        <a>Home</a>
+        <A href="/" end>
+          Home
+        </A>
       </li>
       <li>
-        <a>Boards</a>
+        <A href="/new" end>
+          New
+        </A>
       </li>
       <li>
-        <a>New</a>
+        <A href="/boards" end>
+          Boards
+        </A>
+      </li>
+      <li>
+        <A href="/login" end>
+          Login
+        </A>
       </li>
     </ul>
   );
@@ -35,59 +65,78 @@ function Menu() {
 function NewPostInputArea() {
   const [content, setContent] = createSignal("");
   return (
-    <div class="flex flex-col my-4">
+    <div class="flex flex-col space-y-2">
       <textarea
         class="textarea textarea-bordered"
-        placeholder="Bio"
+        placeholder="Speak your mind..."
         oninput={(input) => {
           setContent(input.target.value);
         }}
       ></textarea>
-      <button class="btn btn-primary self-end btn-sm mt-4" onclick={() => {
+      <button
-        createPost({ content: content(), token: "" } as NewPost);
+        class={
-      }}>Submit</button>
+          "btn btn-primary self-end btn-sm" +
+          (content() == "" ? " btn-disabled" : "")
+        }
+        onclick={() => {
+          if (content() == "") return;
+          createPost({ content: content(), token: "" } as NewPost);
+        }}
+      >
+        Submit
+      </button>
     </div>
   );
 }
 
 function Posts() {
-  const [posts, setPosts] = createSignal([]);
+  const [posts, setPosts] = createSignal([] as Post[]);
+  const [loading, setLoading] = createSignal(true);
 
   getPosts().then((posts) => {
     setPosts(posts as any);
+    setLoading(false)
   });
 
   return (
-    <div class="flex flex-col my-4 space-y-2">
+    <div class="flex flex-col space-y-2 w-full md:w-96">
+      { loading() ? <span class="loading loading-spinner loading-lg self-center"></span> : <></> }
       {posts().map((post) => {
-        return (
+        if (post.content == "") return; // Filtering out empty posts, remove this later
-          <PostSegment post={post}></PostSegment>
+        return <PostSegment post={post}></PostSegment>;
-        );
       })}
     </div>
   );
 }
 
-function PostSegment({ post }: { post: Post}) {
+function PostSegment({ post }: { post: Post }) {
   return (
-    <div class="card bg-base-200 shadow-lg compact text-base-content">
+    <div class="card bg-base-200 shadow-lg compact text-base-content w-full">
       <div class="card-body">
-        <h2 class="card-title">{post.content}</h2>
+        <p class="text-base-content">{post.content}</p>
-        <p class="text-base-content">{post.uuid}</p>
+        {/* <p>{post.votes.up}</p>
-        <p>{post.votes.up}</p>
+        <p>{post.votes.down}</p> */}
-        <p>{post.votes.down}</p>
       </div>
     </div>
   );
 }
 
-
 function Primary() {
   return (
-    <div class="flex flex-col items-center my-6">
+    <Routes>
-      <Menu></Menu>
+      <Route path="/" element={<Posts />} />
-      <NewPostInputArea></NewPostInputArea>
+      <Route path="/new" element={<NewPostInputArea />} />
-      <Posts></Posts>
+      <Route path="/boards" element={<div>Boards</div>} />
+      <Route path="/login" element={<Login />} />
+    </Routes>
+  );
+}
+
+function Login() {
+  return (
+    <div>
+      Login
+      <input class="input input-bordered" type="text" />
     </div>
   );
 }

client-solid/src/api.ts

@@ -1,6 +1,6 @@
-const PORT = 3000;
+// const PORT = 3000;
-const API_URL = `http://localhost:${PORT}/api/`;
+// const API_URL = `http://localhost:${PORT}/api/`;
-const API_URL2 = new URL(API_URL);
+// const API_URL2 = new URL(API_URL);
 
 export interface NewPost {
     content: string;
@@ -20,20 +20,20 @@ export interface Post extends NewPost {
 
 export async function getPosts(): Promise<Post[]> {
 //   const res = await fetch(`${API_URL}/posts`);
-  const res = await fetch(API_URL2.href);
+  const res = await fetch("/api/");
   const data = await res.json();
   return data;
 }
 
 export async function getPost(id: string): Promise<Post> {
-  const res = await fetch(`${API_URL}/posts/${id}`);
+  const res = await fetch(`/api/${id}`);
   const data = await res.json();
   return data;
 }
 
 export async function createPost(post: NewPost): Promise<void> {
 //   await fetch(`${API_URL}`, {
-  await fetch(API_URL2.href, {
+  await fetch("/api/", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",