From a5dadfc1d12e0f87eb7f8ca200d41d1330e4f36e Mon Sep 17 00:00:00 2001
From: Imbus <>
Date: Wed, 6 Mar 2024 08:10:42 +0100
Subject: [PATCH] Initial comment draft with working server communication

---
 client-solid/src/Components/Comment.tsx       | 54 +++++--------------
 .../src/Components/CommentSection.tsx         | 22 ++++----
 client-solid/src/Components/NewComment.tsx    |  2 +-
 client-solid/src/Components/SinglePost.tsx    |  2 +-
 4 files changed, 27 insertions(+), 53 deletions(-)

diff --git a/client-solid/src/Components/Comment.tsx b/client-solid/src/Components/Comment.tsx
index c3ce3c0..0ceb98f 100644
--- a/client-solid/src/Components/Comment.tsx
+++ b/client-solid/src/Components/Comment.tsx
@@ -1,47 +1,19 @@
-import { useNavigate } from "@solidjs/router";
-import { For, JSXElement, Show, createSignal } from "solid-js";
-
-import { CheckMark, loadSpinner } from "../Util/Icons";
-import { PublicComment, getComments } from "../Util/api";
-
-//exported into primary  as a Route
-export function Comment({ postId }: { postId: string }): JSXElement {
-  const [comments, setComments] = createSignal([] as PublicComment[]);
-  const [loading, setLoading] = createSignal(true);
-
-  getComments(postId, 10, 0).then((comment) => {
-    setComments(comment);
-    setLoading(false);
-  });
+import { JSXElement, } from "solid-js";
+import { PublicComment }  from "../Util/api";
 
+/**
+ * Comment is a component that displays a single comment.
+ * @param {Object} props The properties for the Comment component.
+ * @param {string} props.postId The id of the post that the comment is a reply to.
+ * @returns {JSXElement} A JSXElement of a comment
+ */
+export function Comment({ comment }: { comment: PublicComment }): JSXElement {
   return (
-    <Show when={!loading()} fallback={loadSpinner()}>
-      <For each={comments()}>
-        {(comment): JSXElement => <CommentSegment comment={comment} />}
-      </For>
-    </Show>
-  );
-}
-
-export function CommentSegment(props: { comment: PublicComment }): JSXElement {
-  const nav = useNavigate();
-  return (
-    <div class="card compact w-full flex-grow border-b-2 border-b-base-300 bg-base-200 text-base-content transition-all hover:bg-base-300">
-      <div class="card-body">
-        <p class="break-words text-base-content md:px-6 md:pt-2">
-          {props.comment?.content}
-        </p>
-        <div class="card-actions justify-end">
-          <button
-            onClick={(): void =>
-              nav("/comments?post_id" + props.comment?.parent_comment_id)
-            }
-            class="btn btn-xs"
-          >
-            <CheckMark />
-          </button>
-        </div>
+    <div class="flex flex-col space-y-2">
+      <div class="flex flex-row space-x-2">
+        <div class="text-xs text-gray-500">{comment.created_at}</div>
       </div>
+      <div class="text-sm">{comment.content}</div>
     </div>
   );
 }
diff --git a/client-solid/src/Components/CommentSection.tsx b/client-solid/src/Components/CommentSection.tsx
index 998ea28..f84c218 100644
--- a/client-solid/src/Components/CommentSection.tsx
+++ b/client-solid/src/Components/CommentSection.tsx
@@ -1,18 +1,20 @@
-import {
-  For,
-  JSXElement,
-  createResource,
-} from "solid-js";
+import { For, JSXElement, createResource } from "solid-js";
 
 import { getComments } from "../Util/api";
-import { CommentSegment } from "./Comment";
+import { Comment } from "./Comment";
 
+/**
+ * CommentSection is a component that displays a collection of comments.
+ * @param {Object} props The properties for the CommentSection component.
+ * @param {string} props.postId The id of the post that the comments are a reply to.
+ * @returns {JSXElement} A JSXElement that contains a collection of comments.
+ */
 export function CommentSection({ postId }: { postId: string }): JSXElement {
-  const [comments] = createResource(postId, () => getComments(postId, 0, 10));
+  const [comments] = createResource(postId, () =>
+    getComments(postId, 10, 0)
+  );
 
   return (
-    <For each={comments()!}>
-      {(comment) => <CommentSegment comment={comment} />}
-    </For>
+    <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
   );
 }
diff --git a/client-solid/src/Components/NewComment.tsx b/client-solid/src/Components/NewComment.tsx
index ccfea2c..55c3922 100644
--- a/client-solid/src/Components/NewComment.tsx
+++ b/client-solid/src/Components/NewComment.tsx
@@ -35,7 +35,7 @@ export function NewCommentInputArea({
       response.then(() => {
         setWaiting(false);
         setContent("");
-        nav("/");
+        nav("/post/" + parentPostId);
       });
     }
   };
diff --git a/client-solid/src/Components/SinglePost.tsx b/client-solid/src/Components/SinglePost.tsx
index 258bdb2..65c41dd 100644
--- a/client-solid/src/Components/SinglePost.tsx
+++ b/client-solid/src/Components/SinglePost.tsx
@@ -16,7 +16,7 @@ export function SinglePost(): JSXElement {
       <Show when={post()}>
         <PostSegment post={post()!} />
         <NewCommentInputArea parentPostId={parseInt(params.postid)}/>
-        <CommentSection postId={params.post_id} />
+        <CommentSection postId={params.postid} />
       </Show>
     </Suspense>
   );