chore: view replies function

Author: VulpoTheDev

apps/web/src/app/(profile)/profile/[handle]/(user)/(overview)/panels/Comments/Thread.tsx

@@ -1,16 +1,24 @@
+'use client'
+
 import type { Comments, UserType } from "@/types/users";
 import { postComment } from "@/utils/api";
 import { USER_DEFAULT_AVATAR } from "@/utils/constants";
 import { UserComment } from "@mav/ui/components/comments";
+import { useState } from "react";
 
 export default function CommentThread({ comment, user }: { comment: Comments; user: UserType }) {
+  const [viewReplies, setViewReplies] = useState(false);
+  const toggleViewReplies = () => setViewReplies((prev) => !prev);
   return (
     <div className="space-y-4">
       <UserComment
         key={comment.id}
         imgTag={<img />}
         date={comment.createdAt}
+        replies={comment.replies.length}
+        viewReplies={viewReplies}
         onReply={postComment}
+        toggleViewReplies={toggleViewReplies}
         commentId={comment.id}
         avatar={comment.author.avatarUrl || USER_DEFAULT_AVATAR}
         handle={comment.author.handle}
@@ -21,7 +29,7 @@ export default function CommentThread({ comment, user }: { comment: Comments; us
 
       {comment.replies.length > 0 && (
         <div className="ml-8 pl-4 space-y-4">
-          {comment.replies.map((reply) => (
+          {viewReplies && comment.replies.map((reply) => (
             <CommentThread key={reply.id} comment={reply} user={user} />
           ))}
         </div>

packages/ui/components/comments/UserComment.tsx

@@ -14,9 +14,10 @@ interface CommentProps extends React.ComponentProps<typeof CommentBase> {
   userRole?: string
   isPinned?: true
   upvotes?: string
-  reply?: CommentProps[]
   parentId?: string
-  replies?: CommentProps[]
+  replies?: number
+  toggleViewReplies?: () => void
+  viewReplies?: boolean
   date?: string
   onReply: (
     commentType: string,
@@ -31,7 +32,6 @@ interface CommentProps extends React.ComponentProps<typeof CommentBase> {
 
 export function UserComment(props: React.PropsWithChildren<CommentProps>) {
   const [showReplyInput, setShowReplyInput] = useState(false)
-  const [replyText, setReplyText] = useState("")
   const toggleReplyInput = () => setShowReplyInput(!showReplyInput)
 
   const date = new Date(props.date || "")
@@ -49,9 +49,9 @@ export function UserComment(props: React.PropsWithChildren<CommentProps>) {
           <Button size="small" className="transition-none" variant="tritery" onClick={toggleReplyInput}>
             Reply
           </Button>
-          {props.reply && props.reply?.length > 0 && (
-            <Button size="small" className="transition-none" variant="primary">
-              View {props.reply?.length} Replies
+          {(props.replies || 0)  > 0 && props.toggleViewReplies && (
+            <Button size="small" className="transition-none" variant="primary" onClick={props.toggleViewReplies}>
+              View {props.replies} Replies
             </Button>
           )}
           <div className="w-full">