feat: add individual post page

convex/posts.ts

@@ -1,5 +1,6 @@
 import { paginationOptsValidator } from 'convex/server';
 import { v } from 'convex/values';
+import { PostWithUserDto } from '../src/app/types';
 import { mutation, query } from './_generated/server';
 import { userQuery } from './users';
 
@@ -59,13 +60,32 @@ export const deletePostById = mutation({
 
 export const getPostById = query({
   args: { id: v.id('posts') },
-  handler: async (ctx, args) => {
+  handler: async (
+    ctx,
+    args
+  ): Promise<
+    PostWithUserDto | 'POST_NOT_FOUND' | 'USER_FOR_POST_NOT_FOUND'
+  > => {
     const post = await ctx.db.get(args.id);
 
     if (post === null) {
       return 'POST_NOT_FOUND';
     }
 
-    return post;
+    const user = await ctx.db.get(post.userId);
+
+    if (user === null) {
+      return 'USER_FOR_POST_NOT_FOUND';
+    }
+
+    return {
+      ...post,
+      user: {
+        _id: user._id,
+        _creationTime: user._creationTime,
+        clerkUsername: user.clerkUser.username,
+        clerkImageUrl: user.clerkUser.image_url,
+      },
+    };
   },
 });

convex/users.ts

@@ -32,6 +32,24 @@ export const getUserByClerkId = query({
   },
 });
 
+export const getUserById = query({
+  args: { id: v.id('users') },
+  async handler(ctx, args): Promise<UserDto | 'USER_NOT_FOUND'> {
+    const user = await ctx.db.get(args.id);
+
+    if (user === null) {
+      return 'USER_NOT_FOUND';
+    }
+
+    return {
+      _id: user._id,
+      _creationTime: user._creationTime,
+      clerkUsername: user.clerkUser.username,
+      clerkImageUrl: user.clerkUser.image_url,
+    };
+  },
+});
+
 export const getUser = internalQuery({
   args: { subject: v.string() },
   async handler(ctx, args) {

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'>
+        <div
-          <PostContent
+          className={`${limit ? 'max-h-80' : ''} overflow-hidden text-ellipsis`}
-            content={Text.of(post.content.slice(0, 10)).toString()}
+        >
-          />
+          <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}`}