fix: when getting user don't return entire user to client, fix: pass user to post component as part of post

convex/users.ts

@@ -16,20 +16,18 @@ export async function userQuery(ctx: QueryCtx, clerkUserId: string) {
 export const getUserByClerkId = query({
   args: { clerkUserId: v.string() },
   async handler(ctx, args) {
-    return await userQuery(ctx, args.clerkUserId);
+    const user = await userQuery(ctx, args.clerkUserId);
-  },
-});
-
-export const getUserById = query({
-  args: { id: v.id('users') },
-  async handler(ctx, args) {
-    const user = await ctx.db.get(args.id);
 
     if (user === null) {
       return 'USER_NOT_FOUND';
     }
 
-    return user;
+    return {
+      _id: user._id,
+      _creationTime: user._creationTime,
+      clerkUsername: user.clerkUser.username,
+      clerkImageUrl: user.clerkUser.image_url,
+    };
   },
 });
 

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

@@ -13,7 +13,7 @@ export default async function UserProfilePage({
     clerkUserId: params.id,
   });
 
-  if (user === null) {
+  if (user === 'USER_NOT_FOUND') {
     // TODO: Show real not found component
     return <div>Not Found</div>;
   }

src/components/Post.tsx

@@ -1,27 +1,21 @@
 import { Text } from '@codemirror/state';
-import { useQuery } from 'convex/react';
 import Image from 'next/image';
-import { api } from '../../convex/_generated/api';
+import { Doc, Id } from '../../convex/_generated/dataModel';
-import { Doc } from '../../convex/_generated/dataModel';
 import PostContent from './PostContent';
-import SpinningLoader from './SpinningLoader';
 
-export default function Post({ post }: { post: Doc<'posts'> }) {
+export default function Post({
-  const user = useQuery(api.users.getUserById, { id: post.userId });
+  post,
-
+}: {
-  if (user === undefined) {
+  post: Doc<'posts'> & {
-    return (
+    user: {
-      <div>
+      _id: Id<'users'>;
-        <SpinningLoader className='animate-spin w-5 h-5' />
+      _creationTime: number;
-      </div>
+      clerkUsername: string | null;
-    );
+      clerkImageUrl: string;
-  }
+    };
-
+  };
-  if (user === 'USER_NOT_FOUND') {
+}) {
-    return <div>User for post not found</div>;
+  const username = post.user.clerkUsername ?? post.user._id;
-  }
-
-  const username = user.clerkUser.username ?? user._id;
   const createdPostDate = new Date(post._creationTime);
   const postYear = createdPostDate.getFullYear();
   const postMonth = createdPostDate.toLocaleString(undefined, {
@@ -34,7 +28,7 @@ export default function Post({ post }: { post: Doc<'posts'> }) {
       <div>
         <Image
           alt='user profile image'
-          src={user.clerkUser.image_url}
+          src={post.user.clerkImageUrl}
           width={40}
           height={40}
           className='rounded-full object-cover border-4 border-primary-accent'

src/components/UserPosts.tsx

@@ -2,37 +2,62 @@
 
 import { usePaginatedQuery } from 'convex/react';
 import { api } from '../../convex/_generated/api';
-import { Doc } from '../../convex/_generated/dataModel';
+import { Id } from '../../convex/_generated/dataModel';
 import Post from './Post';
+import SpinningLoader from './SpinningLoader';
 
-export default function UserPosts({ user }: { user: Doc<'users'> }) {
+export default function UserPosts({
-  const PAGE_SIZE = 10;
+  user,
+}: {
+  user: {
+    _id: Id<'users'>;
+    _creationTime: number;
+    clerkUsername: string | null;
+    clerkImageUrl: string;
+  };
+}) {
+  const PAGE_SIZE = 1;
   const pager = usePaginatedQuery(
     api.posts.getUsersPostById,
     {
       userId: user._id,
     },
-    { initialNumItems: 10 }
+    { initialNumItems: PAGE_SIZE }
   );
 
+  const postsWithUser = pager.results.map(post => ({ ...post, user }));
+
   return (
-    <div className='flex flex-col w-full h-full'>
+    <div className='flex flex-col items-center w-full h-full'>
-      {pager.results.map(post => (
+      {postsWithUser.map(post => (
         <Post
           key={post._id}
           post={post}
         />
       ))}
       {pager.isLoading ? (
-        <div>Loading...</div>
+        <div className='flex items-center gap-2 p-5'>
-      ) : (
+          <SpinningLoader className='animate-spin w-5 h-5' />
+          Loading...
+        </div>
+      ) : pager.status === 'CanLoadMore' ? (
+        <div className='flex items-center p-5'>
           <button
-          onClick={() => pager.loadMore(10)}
+            className='bg-primary-accent px-3 py-1 rounded-full'
+            onClick={() => pager.loadMore(PAGE_SIZE)}
             disabled={pager.status !== 'CanLoadMore'}
           >
-          Load More
+            {pager.isLoading ? (
-        </button>
+              <>
+                <SpinningLoader className='animate-spin w-5 h-5' />
+                Loading...
+              </>
+            ) : (
+              'Load More'
             )}
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 }

src/components/UserProfile.tsx

@@ -1,9 +1,18 @@
 import Image from 'next/image';
 import { AiFillCalendar } from 'react-icons/ai';
-import { Doc } from '../../convex/_generated/dataModel';
+import { Doc, Id } from '../../convex/_generated/dataModel';
 
-export default function UserProfile({ user }: { user: Doc<'users'> }) {
+export default function UserProfile({
-  const username = user.clerkUser.username ?? user._id;
+  user,
+}: {
+  user: {
+    _id: Id<'users'>;
+    _creationTime: number;
+    clerkUsername: string | null;
+    clerkImageUrl: string;
+  };
+}) {
+  const username = user.clerkUsername ?? user._id;
   const userCreatedDate = new Date(user._creationTime);
   const monthJoined = userCreatedDate.toLocaleString(undefined, {
     month: 'short',
@@ -17,7 +26,7 @@ export default function UserProfile({ user }: { user: Doc<'users'> }) {
           <div>
             <Image
               alt='user profile image'
-              src={user.clerkUser.image_url}
+              src={user.clerkImageUrl}
               width={100}
               height={100}
               className='rounded-full object-cover border-4 border-primary-accent'