From e29b46cdb135af2475e4278c1989e9cb3923af92 Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Mon, 11 Sep 2023 13:44:51 -0500
Subject: [PATCH] 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 +++++-----
 src/app/profile/[id]/page.tsx  |  2 +-
 src/components/Post.tsx        | 36 ++++++++++------------
 src/components/UserPosts.tsx   | 55 ++++++++++++++++++++++++----------
 src/components/UserProfile.tsx | 17 ++++++++---
 5 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/convex/users.ts b/convex/users.ts
index 0a1f8f4..2166aa6 100644
--- a/convex/users.ts
+++ b/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);
-  },
-});
-
-export const getUserById = query({
-  args: { id: v.id('users') },
-  async handler(ctx, args) {
-    const user = await ctx.db.get(args.id);
+    const user = await userQuery(ctx, args.clerkUserId);
 
     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,
+    };
   },
 });
 
diff --git a/src/app/profile/[id]/page.tsx b/src/app/profile/[id]/page.tsx
index e85aabb..652eb76 100644
--- a/src/app/profile/[id]/page.tsx
+++ b/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>;
   }
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index e0e7903..6073f4b 100644
--- a/src/components/Post.tsx
+++ b/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'
diff --git a/src/components/UserPosts.tsx b/src/components/UserPosts.tsx
index 2b56f63..152c827 100644
--- a/src/components/UserPosts.tsx
+++ b/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>
   );
 }
diff --git a/src/components/UserProfile.tsx b/src/components/UserProfile.tsx
index 44c2330..5994a76 100644
--- a/src/components/UserProfile.tsx
+++ b/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'