feat: support replies

src/components/Post.tsx

@@ -1,15 +1,15 @@
 'use client';
 
 import { PostWithUserDto } from '@/app/types';
+import { useUser } from '@clerk/nextjs';
 import { Text } from '@codemirror/state';
 import { useMutation } from 'convex/react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useRef, useState } from 'react';
-import { BiDotsHorizontalRounded, BiSolidLike } from 'react-icons/bi';
-import { BsFillReplyFill } from 'react-icons/bs';
 import { GoDotFill } from 'react-icons/go';
 import { api } from '../../convex/_generated/api';
+import PostActionButton from './PostActionButtons';
+import PostActionModal from './PostActionModal';
 import PostContent from './PostContent';
 
 export default function Post({
@@ -21,9 +21,8 @@ export default function Post({
   limit?: boolean;
   showReply?: boolean;
 }) {
+  const { isLoaded, user, isSignedIn } = useUser();
   const deletePostById = useMutation(api.posts.deletePostById);
-  const modalRef = useRef<HTMLDivElement>(null);
-  const [modalOpen, setModalOpen] = useState(false);
   const username = post.user.clerkUsername ?? post.user._id;
   const createdPostDate = new Date(post._creationTime);
   const postYear = createdPostDate.getFullYear();
@@ -34,25 +33,7 @@ export default function Post({
   const content = limit ? post.content.slice(0, 10) : post.content;
   const postLink = `/posts/${post._id}`;
 
-  // TODO: Add reply and like buttons
-
-  useEffect(() => {
-    function handleClickOutside(e: MouseEvent) {
-      if (
-        modalOpen &&
-        modalRef.current &&
-        modalRef.current.contains(e.target as Node) === false
-      ) {
-        setModalOpen(false);
-      }
-    }
-
-    document.addEventListener('click', handleClickOutside);
-    return () => document.removeEventListener('click', handleClickOutside);
-  }, [modalOpen]);
-
   async function handleDeleteClick() {
-    setModalOpen(false);
     const result = confirm('Are you sure you want to delete this post?');
 
     if (result === false) {
@@ -89,36 +70,9 @@ export default function Post({
               </div>
             </div>
           </div>
-          <div className='relative'>
-            <button onClick={() => setModalOpen(!modalOpen)}>
-              <BiDotsHorizontalRounded />
-            </button>
-            <div
-              ref={modalRef}
-              className={`${
-                modalOpen ? '' : 'hidden'
-              } max-w-min whitespace-nowrap absolute top-5 right-0 rounded-md py-2 pl-4 pr-10 shadow-md bg-white dark:bg-primary-gray`}
-            >
-              <ul>
-                <li>
-                  <Link
-                    onClick={() => setModalOpen(false)}
-                    href={`${postLink}/edit`}
-                  >
-                    Edit post
-                  </Link>
-                </li>
-                <li className='text-red-600'>
-                  <button
-                    onClick={handleDeleteClick}
-                    type='button'
-                  >
-                    Delete post
-                  </button>
-                </li>
-              </ul>
-            </div>
-          </div>
+          {isLoaded && isSignedIn && user.id === post.user.clerkUserId ? (
+            <PostActionModal postId={post._id} />
+          ) : null}
         </div>
         <div
           className={`${limit ? 'max-h-80' : ''} flex flex-col overflow-hidden`}
@@ -135,16 +89,10 @@ export default function Post({
             </Link>
           ) : null}
         </div>
-        <div className='flex items-center gap-4'>
-          {showReply ? (
-            <Link href={{ pathname: postLink, query: { reply: true } }}>
-              <BsFillReplyFill />
-            </Link>
-          ) : null}
-          <button>
-            <BiSolidLike />
-          </button>
-        </div>
+        <PostActionButton
+          postId={post._id}
+          showReply={showReply}
+        />
       </div>
     </div>
   );