From 07b98b92ee33d2c1dec59afc9f6ee0401b1ea00c Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Thu, 22 May 2025 17:02:48 +0530
Subject: [PATCH] feat: enhance CommentThreads component with commentClicked
 prop and update reply structure

---
 .../ui/collaboration/CommentThreads.tsx       | 32 +++++++++++++++----
 .../commentInstance/commentInstance.tsx       |  9 ++++--
 .../comments/instances/commentInstances.tsx   |  2 +-
 app/src/types/collaborationTypes.d.ts         |  2 +-
 4 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/app/src/components/ui/collaboration/CommentThreads.tsx b/app/src/components/ui/collaboration/CommentThreads.tsx
index 2d41abc..ed8d563 100644
--- a/app/src/components/ui/collaboration/CommentThreads.tsx
+++ b/app/src/components/ui/collaboration/CommentThreads.tsx
@@ -1,7 +1,11 @@
 import React, { useState } from "react";
 import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
 
-const CommentThreads: React.FC = () => {
+interface CommentThreadsProps {
+  commentClicked: () => void;
+}
+
+const CommentThreads: React.FC<CommentThreadsProps> = ({ commentClicked }) => {
   const [expand, setExpand] = useState(false);
   const commentsedUsers = [{ creatorId: "1" }];
 
@@ -12,11 +16,25 @@ const CommentThreads: React.FC = () => {
     createdAt: "2 hours ago",
     comment: "Thread check",
     lastUpdatedAt: "string",
-    replies: [],
+    replies: [
+      {
+        replyId: 'string',
+        creatorId: 'string',
+        createdAt: 'string',
+        lastUpdatedAt: 'string',
+        reply: 'string',
+      },
+      {
+        replyId: 'string',
+        creatorId: 'string',
+        createdAt: 'string',
+        lastUpdatedAt: 'string',
+        reply: 'string',
+      }
+    ],
   };
 
   function getUsername(userId: string) {
-    console.log(userId);
     const UserName = "username";
     return UserName;
   }
@@ -24,6 +42,7 @@ const CommentThreads: React.FC = () => {
   function getDetails(type?: "clicked") {
     if (type === "clicked") {
       setExpand(true);
+      commentClicked();
     } else {
       setExpand((prev) => !prev);
     }
@@ -35,9 +54,8 @@ const CommentThreads: React.FC = () => {
         onPointerEnter={() => getDetails()}
         onPointerLeave={() => getDetails()}
         onClick={() => getDetails("clicked")}
-        className={`comments-threads-container ${
-          expand ? "open" : "closed"
-        } unread`}
+        className={`comments-threads-container ${expand ? "open" : "closed"
+          } unread`}
       >
         <div className="users-commented">
           {commentsedUsers.map((val, i) => (
@@ -61,7 +79,7 @@ const CommentThreads: React.FC = () => {
           </div>
           <div className="message">{CommentDetails.comment}</div>
           {CommentDetails.replies.length > 0 && (
-            <div className="replies">{CommentDetails.replies.length}</div>
+            <div className="replies">{CommentDetails.replies.length} reply(s)</div>
           )}
         </div>
       </button>
diff --git a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
index 1efff39..1b23a98 100644
--- a/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
+++ b/app/src/modules/collaboration/comments/instances/commentInstance/commentInstance.tsx
@@ -26,6 +26,11 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
         return () => window.removeEventListener("keydown", handleKeyDown);
     }, [selectedComment]);
 
+    const commentClicked = () => {
+        console.log('hii');
+        setSelectedComment(comment);
+    }
+
     if (comment.state === 'inactive' || isPlaying) return null;
 
     return (
@@ -36,12 +41,12 @@ function CommentInstance({ comment }: { comment: CommentSchema }) {
                 zIndexRange={[1, 0]}
                 prepend
                 sprite
-                center 
+                center
                 position={comment.position}
                 rotation={comment.rotation}
                 className='comments-main-wrapper'
             >
-                <CommentThreads />
+                <CommentThreads commentClicked={commentClicked} />
             </Html>
             {CommentRef.current && transformMode && (
                 <TransformControls
diff --git a/app/src/modules/collaboration/comments/instances/commentInstances.tsx b/app/src/modules/collaboration/comments/instances/commentInstances.tsx
index 53dc4c6..11a60ec 100644
--- a/app/src/modules/collaboration/comments/instances/commentInstances.tsx
+++ b/app/src/modules/collaboration/comments/instances/commentInstances.tsx
@@ -6,7 +6,7 @@ function CommentInstances() {
     const { comments } = useCommentStore();
 
     useEffect(() => {
-        console.log('comments: ', comments);
+        // console.log('comments: ', comments);
     }, [comments])
 
     return (
diff --git a/app/src/types/collaborationTypes.d.ts b/app/src/types/collaborationTypes.d.ts
index 26295d5..151ee58 100644
--- a/app/src/types/collaborationTypes.d.ts
+++ b/app/src/types/collaborationTypes.d.ts
@@ -10,7 +10,7 @@ interface CommentSchema {
     replies: Reply[];
 }
 
-export interface Reply {
+interface Reply {
     replyId: string;
     creatorId: string;
     createdAt: string;