From a51d397ded1c423f264a0ecc1c7a6c0d3e785a59 Mon Sep 17 00:00:00 2001
From: Hollgy <karlgustav.ek@hotmail.com>
Date: Sun, 24 Mar 2024 22:31:28 +0100
Subject: [PATCH] Refactor, added navigation to comment button

---
 .../src/Components/Buttons/CommentsButton.tsx   | 17 +++++++++++++++--
 client-solid/src/Components/PostSegment.tsx     |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client-solid/src/Components/Buttons/CommentsButton.tsx b/client-solid/src/Components/Buttons/CommentsButton.tsx
index a9bec4c..5c7dfef 100644
--- a/client-solid/src/Components/Buttons/CommentsButton.tsx
+++ b/client-solid/src/Components/Buttons/CommentsButton.tsx
@@ -1,10 +1,18 @@
-import { JSXElement, createSignal, onMount } from "solid-js";
+import { useNavigate } from "@solidjs/router";
+import { JSXElement, createEffect, 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 [postId, setPostId] = createSignal<string>("");
+
+  const nav = useNavigate();
+
+  createEffect(() => {
+    setPostId(props.postId);
+  });
 
   const handleComments = async (): Promise<void> => {
     try {
@@ -20,7 +28,12 @@ export default function CommentsButton(props: { postId: string }): JSXElement {
 
   return (
     <div class="flex p-1">
-      <CommentsIcon />
+      <button
+        onClick={(): void => nav("/post/" + postId())}
+        class="rounded-base btn btn-xs hover:border-primary"
+      >
+        <CommentsIcon />
+      </button>
       <span class="text-1xl countdown px-1.5 pt-1.5 text-center">
         <p style={{ "--value": commentCount() }} />
       </span>
diff --git a/client-solid/src/Components/PostSegment.tsx b/client-solid/src/Components/PostSegment.tsx
index cf5c6c2..5578f0f 100644
--- a/client-solid/src/Components/PostSegment.tsx
+++ b/client-solid/src/Components/PostSegment.tsx
@@ -16,7 +16,7 @@ export function PostSegment(props: { post: Post }): JSXElement {
     <div class="card compact w-full flex-grow border-b-2 border-b-primary bg-base-200 text-base-content transition-all hover:bg-base-300">
       <div class="card-body md:mx-6">
         <div class="flex flex-row justify-between">
-          <p class="text-xs italic">{dateOfCreation}</p>
+          <p class="text-xs">{dateOfCreation}</p>
           <details class="dropdown">
             <summary class="btn btn-sm">...</summary>
             <ul class="w-26 menu dropdown-content z-[1] rounded-box bg-base-100 p-2 shadow">