From 6bef5ada4da3fe41348376774570e9effa667670 Mon Sep 17 00:00:00 2001
From: Imbus <imbus64@protonmail.com>
Date: Fri, 27 Oct 2023 16:04:58 +0200
Subject: [PATCH] Individual posts working

---
 client-solid/src/Navbar.tsx     |  2 +-
 client-solid/src/Posts.tsx      | 12 ++++--
 client-solid/src/Primary.tsx    |  3 ++
 client-solid/src/Root.tsx       | 73 +++++++++++++++++++++------------
 client-solid/src/SinglePost.tsx | 19 +++++++++
 client-solid/src/api.ts         |  5 ++-
 6 files changed, 80 insertions(+), 34 deletions(-)
 create mode 100644 client-solid/src/SinglePost.tsx

diff --git a/client-solid/src/Navbar.tsx b/client-solid/src/Navbar.tsx
index 9902fda..ca5e4b8 100644
--- a/client-solid/src/Navbar.tsx
+++ b/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="#"
diff --git a/client-solid/src/Posts.tsx b/client-solid/src/Posts.tsx
index 522ec69..85e8dd1 100644
--- a/client-solid/src/Posts.tsx
+++ b/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>
   );
 }
-
diff --git a/client-solid/src/Primary.tsx b/client-solid/src/Primary.tsx
index 87d4da4..13d0eae 100644
--- a/client-solid/src/Primary.tsx
+++ b/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>
   );
 }
diff --git a/client-solid/src/Root.tsx b/client-solid/src/Root.tsx
index 22e70ba..ef7aaa7 100644
--- a/client-solid/src/Root.tsx
+++ b/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,34 +59,53 @@ 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 (
-    <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={() => {
-          if (content() == "") return;
-          createPost({
-            content: content(),
-            token: login_ctx?.token(),
-          } as NewPost);
-        }}
-      >
-        Submit
-      </button>
-    </div>
+    <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>
   );
 }
 
diff --git a/client-solid/src/SinglePost.tsx b/client-solid/src/SinglePost.tsx
new file mode 100644
index 0000000..b4440be
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/client-solid/src/api.ts b/client-solid/src/api.ts
index e858037..6b9660f 100644
--- a/client-solid/src/api.ts
+++ b/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;
 }