From e04d588b5610884352d8fe948390c05ce93c1c5f Mon Sep 17 00:00:00 2001
From: Hollgy <karlgustav.ek@hotmail.com>
Date: Sat, 23 Mar 2024 00:40:02 +0100
Subject: [PATCH] Added active render of amount of comments on post

---
 .../src/Components/Buttons/CommentsButton.tsx | 21 ++++++++++++++++---
 client-solid/src/Components/PostSegment.tsx   |  2 +-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/client-solid/src/Components/Buttons/CommentsButton.tsx b/client-solid/src/Components/Buttons/CommentsButton.tsx
index 5f9c23a..a9bec4c 100644
--- a/client-solid/src/Components/Buttons/CommentsButton.tsx
+++ b/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>
   );
diff --git a/client-solid/src/Components/PostSegment.tsx b/client-solid/src/Components/PostSegment.tsx
index e3bbd71..197d3cd 100644
--- a/client-solid/src/Components/PostSegment.tsx
+++ b/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>