feat: add reply editor to post page

src/app/page.tsx

@@ -1,3 +1,3 @@
 export default function Home() {
-  return <main></main>;
+  return <main className='flex-1'></main>;
 }

src/app/posts/[id]/page.tsx

@@ -1,12 +1,22 @@
 'use client';
 
+import Editor from '@/components/Editor';
 import Post from '@/components/Post';
 import SpinningLoader from '@/components/SpinningLoader';
+import { useUser } from '@clerk/nextjs';
 import { useQuery } from 'convex/react';
+import Image from 'next/image';
 import { api } from '../../../../convex/_generated/api';
 import { Id } from '../../../../convex/_generated/dataModel';
 
-export default function PostPage({ params }: { params: { id: string } }) {
+export default function PostPage({
+  params,
+  searchParams,
+}: {
+  params: { id: string };
+  searchParams: { reply?: boolean };
+}) {
+  const user = useUser();
   const post = useQuery(api.posts.getPostById, {
     id: params.id as Id<'posts'>,
   });
@@ -18,14 +28,35 @@ export default function PostPage({ params }: { params: { id: string } }) {
 
   return (
     <main className='flex flex-col flex-1 w-full items-center'>
-      <div className='w-full max-w-4xl'>
+      <div className='flex flex-col items-center w-full max-w-4xl gap-4'>
         {post === undefined ? (
-          <SpinningLoader className='animate-spin w-5 h-5' />
+          <div className='flex items-center gap-2'>
+            <SpinningLoader className='animate-spin w-5 h-5' /> Loading post...
+          </div>
         ) : (
+          <>
+            <div className='p-1 rounded-md border border-gray-600'>
               <Post
                 post={post}
                 limit={false}
+                showReply={false}
               />
+            </div>
+            <div className='flex w-full h-80 gap-4'>
+              {user.isSignedIn !== true ? null : (
+                <div>
+                  <Image
+                    alt='user profile image'
+                    src={user.user.imageUrl}
+                    width={40}
+                    height={40}
+                    className='rounded-full object-cover border-4 border-primary-accent'
+                  />
+                </div>
+              )}
+              <Editor />
+            </div>
+          </>
         )}
       </div>
     </main>

src/components/Editor.tsx

@@ -36,7 +36,10 @@ export default function Editor({ post }: { post?: Doc<'posts'> }) {
   ];
 
   const [mode, setMode] = useState<'write' | 'preview'>('write');
-  const { editorRef } = useCodeMirror({ doc: currentDoc, extensions });
+  const { editorRef } = useCodeMirror({
+    doc: currentDoc,
+    extensions,
+  });
 
   async function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();

src/components/Post.tsx

@@ -6,7 +6,8 @@ import { useMutation } from 'convex/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useRef, useState } from 'react';
-import { BiDotsHorizontalRounded } from 'react-icons/bi';
+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 PostContent from './PostContent';
@@ -14,9 +15,11 @@ import PostContent from './PostContent';
 export default function Post({
   post,
   limit = true,
+  showReply = true,
 }: {
   post: PostWithUserDto;
   limit?: boolean;
+  showReply?: boolean;
 }) {
   const deletePostById = useMutation(api.posts.deletePostById);
   const modalRef = useRef<HTMLDivElement>(null);
@@ -29,6 +32,7 @@ export default function Post({
   });
   const dayOfMonth = createdPostDate.getDate();
   const content = limit ? post.content.slice(0, 10) : post.content;
+  const postLink = `/posts/${post._id}`;
 
   // TODO: Add reply and like buttons
 
@@ -92,7 +96,7 @@ export default function Post({
                 <li>
                   <Link
                     onClick={() => setModalOpen(false)}
-                    href={`/posts/${post._id}/edit`}
+                    href={`${postLink}/edit`}
                   >
                     Edit post
                   </Link>
@@ -118,13 +122,22 @@ export default function Post({
           {limit && post.content.length > 10 ? (
             <Link
               className='font-semibold text-primary-accent'
-              href={`/posts/${post._id}`}
+              href={postLink}
             >
               Show more
             </Link>
           ) : null}
         </div>
-        <div></div>
+        <div className='flex items-center gap-4'>
+          {showReply ? (
+            <Link href={{ pathname: postLink, query: { reply: true } }}>
+              <BsFillReplyFill />
+            </Link>
+          ) : null}
+          <button>
+            <BiSolidLike />
+          </button>
+        </div>
       </div>
     </div>
   );