Making linter bro happy

client-solid/src/Components/Comment.tsx

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

client-solid/src/Components/CommentSection.tsx

@@ -1,16 +1,18 @@
-import { For, JSXElement, createResource } from "solid-js";
+import { For, JSXElement, createResource, splitProps } from "solid-js";
 
 import { getComments } from "../Util/api";
 import { Comment } from "./Comment";
 
-export function CommentSection(props: { postId: string }): JSXElement {
-  const [comments] = createResource(props.postId, () =>
-    getComments(props.postId, 10, 0)
-  );
+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));
 
   return (
-    <section class="my-5 border-b-2 border-b-primary bg-base-200 p-5 ">
-      <For each={comments()!}>{(comment) => <Comment comment={comment} />}</For>
-    </section>
+    <div>
+      <For each={state()} fallback={<div>Loading...</div>}>
+        {(comment) => <Comment comment={comment} />}
+      </For>
+    </div>
   );
 }