Individual posts working

client-solid/src/Navbar.tsx

@@ -32,7 +32,7 @@ export function Navbar() {
 
   return (
     <div class="navbar bg-base-100 max-w-3xl max-w flex justify-around">
-      <a class="btn btn-ghost normal-case text-xl">FrostByte</a>
+      <A href={"/"} class="btn btn-ghost normal-case text-xl">FrostByte</A>
       <Menu />
       <A
         href="#"

client-solid/src/Posts.tsx

@@ -1,6 +1,7 @@
 import { createSignal } from "solid-js";
 import { getPosts } from "./api";
 import { Post } from "./api";
+import { useNavigate } from "@solidjs/router";
 
 export function Posts() {
   const [posts, setPosts] = createSignal([] as Post[]);
@@ -27,13 +28,16 @@ export function Posts() {
 }
 
 // This is the card container for a post
-export function PostSegment({ post }: { post: Post; }) {
+export function PostSegment({ post }: { post: Post }) {
+  const nav = useNavigate();
   return (
-    <div class="card bg-base-200 shadow-lg compact text-base-content w-full">
+    <div
+      onClick={() => nav("/post/" + post?.id)}
+      class="card bg-base-200 shadow-lg compact text-base-content w-full"
+    >
       <div class="card-body">
-        <p class="text-base-content break-words">{post.content}</p>
+        <p class="text-base-content break-words">{post?.content}</p>
       </div>
     </div>
   );
 }
-

client-solid/src/Primary.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from "@solidjs/router";
 import { Posts } from "./Posts";
+import { SinglePost } from "./SinglePost";
 import { NewPostInputArea } from "./Root";
 
 // Primary is the section of the page that holds the main content
@@ -7,7 +8,9 @@ export function Primary() {
   return (
     <Routes>
       <Route path="/" element={<Posts />} />
+      <Route path="/post/:postid" element={<SinglePost />} />
       <Route path="/new" element={<NewPostInputArea />} />
+      <Route path="*" element={<h1>404</h1>} />
     </Routes>
   );
 }

client-solid/src/Root.tsx

@@ -1,12 +1,12 @@
-import { Accessor, createSignal, useContext } from "solid-js";
+import { Accessor, Show, createSignal, useContext } 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 { useNavigate } from "@solidjs/router";
 
 // Representing the state of varoious modals.
 // So far we only have one modal, but we can add more later
@@ -59,9 +59,33 @@ 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"
@@ -76,17 +100,12 @@ export function NewPostInputArea() {
             "btn btn-primary self-end btn-sm" +
             (content() == "" ? " btn-disabled" : "")
           }
-        onclick={() => {
-          if (content() == "") return;
-          createPost({
-            content: content(),
-            token: login_ctx?.token(),
-          } as NewPost);
-        }}
+          onclick={sendPost}
         >
           Submit
         </button>
       </div>
+    </Show>
   );
 }
 

client-solid/src/SinglePost.tsx

@@ -0,0 +1,19 @@
+import { useParams } from "@solidjs/router";
+import { Show, Suspense, createResource } from "solid-js";
+import { getPost } from "./api";
+import { PostSegment } from "./Posts";
+
+export function SinglePost() {
+  const params = useParams();
+  const [post] = createResource(params.postid, getPost);
+
+  return (
+    <Suspense fallback={<div>Some loading message</div>}>
+      <div>
+        <Show when={post()}>
+          <PostSegment post={post()!}></PostSegment>
+        </Show>
+      </div>
+    </Suspense>
+  );
+}

client-solid/src/api.ts

@@ -11,13 +11,12 @@ interface Votes {
 }
 
 export interface Post extends NewPost {
-    uuid: string;
+    id: string;
     createdAt: string;
     votes: Votes;
 }
 
 export async function getPosts(): Promise<Post[]> {
-//   const res = await fetch(`${API_URL}/posts`);
   const res = await fetch("/api/posts");
   const data = await res.json();
   return data;
@@ -25,7 +24,9 @@ export async function getPosts(): Promise<Post[]> {
 
 export async function getPost(id: string): Promise<Post> {
   const res = await fetch(`/api/posts/${id}`);
+  console.log(res)
   const data = await res.json();
+  console.log(data)
   return data;
 }