Added active render of amount of comments on post

client-solid/src/Components/Buttons/CommentsButton.tsx

@@ -1,13 +1,28 @@
-import { JSXElement } from "solid-js";
+import { JSXElement, createSignal, onMount } from "solid-js";
 
 import { CommentsIcon } from "../../Util/Icons";
+import { getCommentCount } from "../../Util/api";
+
+export default function CommentsButton(props: { postId: string }): JSXElement {
+  const [commentCount, setCommentCount] = createSignal(0);
+
+  const handleComments = async (): Promise<void> => {
+    try {
+      const count = await getCommentCount(props.postId);
+      setCommentCount(count);
+    } catch (error) {
+      console.error("Error reading comments:", error);
+    }
+  };
+
+  // Fetch comment count when the component mounts
+  onMount(handleComments);
 
-export default function CommentsButton(): JSXElement {
   return (
     <div class="flex p-1">
       <CommentsIcon />
       <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
-        <p style={{ "--value": 12 }} />
+        <p style={{ "--value": commentCount() }} />
       </span>
     </div>
   );

client-solid/src/Components/PostSegment.tsx

@@ -36,7 +36,7 @@ export function PostSegment(props: { post: Post }): JSXElement {
         <div class="card-actions justify-between">
           <div class="flex">
             <EngagementButton postId={post.id} />
-            <CommentsButton />
+            <CommentsButton postId={post.id} />
           </div>
           <ToPostButton post={post} />
         </div>