feat: comment ux

penx-labs · Nov 19, 2024 · c192ea0 · c192ea0
1 parent 411e110
commit c192ea0
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 14 deletions.
diff --git a/components/PostActions/Comment/CommentAmount.tsx b/components/PostActions/Comment/CommentAmount.tsx
@@ -1,11 +1,8 @@
 'use client'
 
 import { Dispatch, SetStateAction } from 'react'
-import { Skeleton } from '@/components/ui/skeleton'
-import { useCreations } from '@/hooks/useCreations'
 import { Post } from '@prisma/client'
-// import { Post } from '@penxio/types'
-import { Bookmark, MessageCircle } from 'lucide-react'
+import { MessageCircle } from 'lucide-react'
 
 interface Props {
   post: Post

diff --git a/components/PostActions/Comment/CommentContent.tsx b/components/PostActions/Comment/CommentContent.tsx
@@ -39,7 +39,17 @@ export function CommentContent({ postId }: Props) {
   const [showReplies, setShowReplies] = useState<string>('');
   const [replies, setReplies] = useState<IReply[]>([]);
 
-  const onReplies = async (commentId: string) => {
+  const onReplies = async (commentId: string, replyCount: number, showReplies: string) => {
+    if (!replyCount) {
+      return
+    }
+
+    if (showReplies) {
+      setShowReplies('')
+
+      return
+    }
+
     try {
       const data = await listRepliesByCommentId(commentId);
       setShowReplies(commentId)
@@ -67,24 +77,23 @@ export function CommentContent({ postId }: Props) {
                     className="h-8 w-8"
                   />
                   <p className="ml-1 text-sm text-gray-600">
-                    {comment.user?.address}
+                    {comment.user?.address && comment.user?.address.slice(0, 16)}...
                   </p>
                 </div>
                 <p className="mt-2 ml-1">{comment.content}</p>
                 <div className="flex justify-between mb-1 ml-1">
-                  <button className="cursor-pointer text-xs hover:underline" onClick={() => onReplies(comment.id)}>
-                    1 reply
+                  <button className="cursor-pointer text-xs hover:underline" onClick={() => onReplies(comment.id, comment.replyCount, showReplies)}>
+                    {showReplies === comment.id ? 'Hide replies' : comment.replyCount + (comment.replyCount > 1 ? ' replies' : ' reply')}
                   </button>
-                  <button className="cursor-pointer text-xs hover:underline" onClick={() => setShowReplyInput(comment.id)}>
+                  <button className="cursor-pointer text-xs hover:underline" onClick={() => setShowReplyInput(showReplyInput ? '' : comment.id)}>
                     Reply
                   </button>
                 </div>
 
                 {showReplyInput === comment.id && (
                   <CommentInput postId={comment.postId} refetchComments={refetch} parentId={comment.id} onCancel={() => {
                     setShowReplyInput('')
-                  }}
-                  />
+                  }} />
                 )}
 
                 {(replies.length > 0 && showReplies === comment.id) && (
@@ -101,7 +110,7 @@ export function CommentContent({ postId }: Props) {
                           </p>
                           {reply.parent?.user && (
                             <p className="ml-2 text-sm text-gray-400">
-                              replied to{' '}
+                              replied to &nbsp;
                               <span className="font-bold text-gray-500">
                                 {reply.user?.address ? `${reply.user.address.slice(0, 10)}...` : ''}
                               </span>
@@ -111,7 +120,7 @@ export function CommentContent({ postId }: Props) {
                         <p className="ml-2 text-gray-700">{reply.content}</p>
 
                         <div className="flex justify-end">
-                          <button className="cursor-pointer text-xs hover:underline" onClick={() => setShowReplyInput(reply.id)}>
+                          <button className="cursor-pointer text-xs hover:underline" onClick={() => setShowReplyInput(showReplyInput ? '' : reply.id)}>
                             Reply
                           </button>
                         </div>

diff --git a/components/PostActions/Comment/CommentInput.tsx b/components/PostActions/Comment/CommentInput.tsx
@@ -56,6 +56,7 @@ export function CommentInput({ postId, parentId, refetchComments, onCancel }: Pr
       })
 
       setContent('')
+      onCancel && onCancel()
       refetchComments()
       toast.success('Comment submitted successfully!')
     } catch (error) {

diff --git a/server/routers/comment.ts b/server/routers/comment.ts
@@ -39,7 +39,7 @@ export const commentRouter = router({
       })
 
       if (input.parentId) {
-        const updatedComment = await prisma.comment.update({
+        await prisma.comment.update({
           where: { id: input.parentId },
           data: {
             replyCount: { increment: 1 },