Initial comment draft with working server communication

client-solid/src/Components/Comment.tsx

@@ -1,47 +1,19 @@
-import { useNavigate } from "@solidjs/router";
+import { JSXElement, } from "solid-js";
-import { For, JSXElement, Show, createSignal } from "solid-js";
+import { PublicComment }  from "../Util/api";
-
-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);
-  });
 
+/**
+ * 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()}>
+    <div class="flex flex-col space-y-2">
-      <For each={comments()}>
+      <div class="flex flex-row space-x-2">
-        {(comment): JSXElement => <CommentSegment comment={comment} />}
+        <div class="text-xs text-gray-500">{comment.created_at}</div>
-      </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>
+      <div class="text-sm">{comment.content}</div>
     </div>
   );
 }

client-solid/src/Components/CommentSection.tsx

@@ -1,18 +1,20 @@
-import {
+import { For, JSXElement, createResource } from "solid-js";
-  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()!}>
+    <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
-      {(comment) => <CommentSegment comment={comment} />}
-    </For>
   );
 }

client-solid/src/Components/NewComment.tsx

@@ -35,7 +35,7 @@ export function NewCommentInputArea({
       response.then(() => {
         setWaiting(false);
         setContent("");
-        nav("/");
+        nav("/post/" + parentPostId);
       });
     }
   };

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>
   );