Draft implementation of comments

client-solid/src/Components/SinglePost.tsx

@@ -1,18 +1,29 @@
 import { useParams } from "@solidjs/router";
-import { JSXElement, Show, Suspense, createResource } from "solid-js";
+import { For, JSXElement, Show, Suspense, createResource } from "solid-js";
 
 import { loadSpinner } from "../Util/Icons";
-import { getPost } from "../Util/api";
+import { getComments, getPost } from "../Util/api";
 import { PostSegment } from "./Posts";
 
 export function SinglePost(): JSXElement {
   const params = useParams();
   const [post] = createResource(params.postid, getPost);
+  const [comments] = createResource(params.postid, () =>
+    getComments(params.postid, 0, 10)
+  );
 
   return (
     <Suspense fallback={loadSpinner()}>
       <Show when={post()}>
         <PostSegment post={post()!} />
+        <For each={comments()!}>
+          {(comment) => (
+            // TODO: This should be a separate component
+            <div class="comment">
+              <p>{comment.content}</p>
+            </div>
+          )}
+        </For>
       </Show>
     </Suspense>
   );

client-solid/src/Util/api.ts

@@ -22,6 +22,18 @@ export interface AuthResponse {
   token: string;
 }
 
+// This is what a public comment looks like, as it arrives from the server
+export interface PublicComment {
+  id: number;
+  parent_post_id: number;
+  parent_comment_id: number | null;
+  upvotes: number;
+  downvotes: number;
+  content: string;
+  created_at: string;
+  updated_at: string;
+}
+
 export async function getPosts(): Promise<Post[]> {
   const res = await fetch("/api/posts");
   const data = await res.json();
@@ -44,6 +56,19 @@ export async function createPost(post: NewPost): Promise<void> {
   });
 }
 
+// Gets the comments for a specific post
+export async function getComments(
+  postId: string,
+  limit: number,
+  offset: number
+): Promise<PublicComment[]> {
+  const res = await fetch(
+    `/api/comments?post_id=${postId}&limit=${limit}&offset=${offset}`
+  );
+  const data = await res.json();
+  return data;
+}
+
 // Send the registration request to the server
 export async function submitRegistration(
   username: string,