feat: add individual post page

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

@@ -13,7 +13,7 @@ export default async function EditPostPage({
     id: params.id as Id<'posts'>,
   });
 
-  if (post === 'POST_NOT_FOUND') {
+  if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
     // TODO: Return actual not found component
     return <h1>Not Found</h1>;
   }

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

@@ -1,3 +1,33 @@
+'use client';
+
+import Post from '@/components/Post';
+import SpinningLoader from '@/components/SpinningLoader';
+import { useQuery } from 'convex/react';
+import { api } from '../../../../convex/_generated/api';
+import { Id } from '../../../../convex/_generated/dataModel';
+
 export default function PostPage({ params }: { params: { id: string } }) {
-  return <h1>{params.id}</h1>;
+  const post = useQuery(api.posts.getPostById, {
+    id: params.id as Id<'posts'>,
+  });
+
+  if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
+    // TODO: Return actual not found component
+    return <h1>Not Found</h1>;
+  }
+
+  return (
+    <main className='flex flex-col flex-1 w-full items-center'>
+      <div className='w-full max-w-4xl'>
+        {post === undefined ? (
+          <SpinningLoader className='animate-spin w-5 h-5' />
+        ) : (
+          <Post
+            post={post}
+            limit={false}
+          />
+        )}
+      </div>
+    </main>
+  );
 }

src/components/Post.tsx

@@ -11,7 +11,13 @@ import { GoDotFill } from 'react-icons/go';
 import { api } from '../../convex/_generated/api';
 import PostContent from './PostContent';
 
-export default function Post({ post }: { post: PostWithUserDto }) {
+export default function Post({
+  post,
+  limit = true,
+}: {
+  post: PostWithUserDto;
+  limit?: boolean;
+}) {
   const deletePostById = useMutation(api.posts.deletePostById);
   const modalRef = useRef<HTMLDivElement>(null);
   const [modalOpen, setModalOpen] = useState(false);
@@ -22,6 +28,7 @@ export default function Post({ post }: { post: PostWithUserDto }) {
     month: 'short',
   });
   const dayOfMonth = createdPostDate.getDate();
+  const content = limit ? post.content.slice(0, 10) : post.content;
 
   // TODO: Add reply and like buttons
 
@@ -102,13 +109,13 @@ export default function Post({ post }: { post: PostWithUserDto }) {
             </div>
           </div>
         </div>
-        <div className='max-h-80 overflow-hidden text-ellipsis'>
-          <PostContent
-            content={Text.of(post.content.slice(0, 10)).toString()}
-          />
+        <div
+          className={`${limit ? 'max-h-80' : ''} overflow-hidden text-ellipsis`}
+        >
+          <PostContent content={Text.of(content).toString()} />
         </div>
         <div>
-          {post.content.length > 10 ? (
+          {limit && post.content.length > 10 ? (
             <Link
               className='font-semibold text-primary-accent'
               href={`/posts/${post._id}`}