client-solid/src/Components/Comment.tsx

@@ -1,4 +1,4 @@
-import { JSXElement, splitProps } from "solid-js";
+import { JSXElement } from "solid-js";
 
 import { PublicComment } from "../Util/api";
 
@@ -7,13 +7,12 @@ interface CommentProps {
 }
 
 export function Comment(props: CommentProps): JSXElement {
-  const [local] = splitProps(props, ["comment"]);
   return (
     <>
       <div class="py-5">
-        <time class="text-xs opacity-50">{local.comment.created_at}</time>
+        <time class="text-xs opacity-50">{props.comment.created_at}</time>
       </div>
-      <div class="">{local.comment.content}</div>
+      <div class="">{props.comment.content}</div>
       <div class="divider" />
     </>
   );

client-solid/src/Components/CommentSection.tsx

@@ -1,18 +1,16 @@
-import { For, JSXElement, createResource, splitProps } from "solid-js";
+import { For, JSXElement, createResource } from "solid-js";
 
 import { getComments } from "../Util/api";
 import { Comment } from "./Comment";
 
-export function CommentSection(postId: { postId: string }): JSXElement {
-  const [local] = splitProps(postId, ["postId"]);
-  // Not sure why this is a resource, refetch is not implemented
-  const [state] = createResource(() => getComments(local.postId, 10, 0));
+export function CommentSection(props: { postId: string }): JSXElement {
+  const [comments] = createResource(props.postId, () =>
+    getComments(props.postId, 10, 0)
+  );
 
   return (
-    <div>
-      <For each={state()} fallback={<div>Loading...</div>}>
-        {(comment) => <Comment comment={comment} />}
-      </For>
-    </div>
+    <section class="my-5 border-b-2 border-b-primary bg-base-200 p-5 ">
+      <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
+    </section>
   );
 }