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

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 } from '../../convex/_generated/dataModel';
+import { Doc, Id } from '../../convex/_generated/dataModel';
 import PostContent from './PostContent';
-import SpinningLoader from './SpinningLoader';
 
-export default function Post({ post }: { post: Doc<'posts'> }) {
-  const user = useQuery(api.users.getUserById, { id: post.userId });
-
-  if (user === undefined) {
-    return (
-      <div>
-        <SpinningLoader className='animate-spin w-5 h-5' />
-      </div>
-    );
-  }
-
-  if (user === 'USER_NOT_FOUND') {
-    return <div>User for post not found</div>;
-  }
-
-  const username = user.clerkUser.username ?? user._id;
+export default function Post({
+  post,
+}: {
+  post: Doc<'posts'> & {
+    user: {
+      _id: Id<'users'>;
+      _creationTime: number;
+      clerkUsername: string | null;
+      clerkImageUrl: string;
+    };
+  };
+}) {
+  const username = post.user.clerkUsername ?? post.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'> }) {
-  const PAGE_SIZE = 10;
+export default function UserPosts({
+  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'>
-      {pager.results.map(post => (
+    <div className='flex flex-col items-center w-full h-full'>
+      {postsWithUser.map(post => (
         <Post
           key={post._id}
           post={post}
         />
       ))}
       {pager.isLoading ? (
-        <div>Loading...</div>
-      ) : (
-        <button
-          onClick={() => pager.loadMore(10)}
-          disabled={pager.status !== 'CanLoadMore'}
-        >
-          Load More
-        </button>
-      )}
+        <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
+            className='bg-primary-accent px-3 py-1 rounded-full'
+            onClick={() => pager.loadMore(PAGE_SIZE)}
+            disabled={pager.status !== 'CanLoadMore'}
+          >
+            {pager.isLoading ? (
+              <>
+                <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'> }) {
-  const username = user.clerkUser.username ?? user._id;
+export default function UserProfile({
+  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'