From 508bf2113d99d897b47fac70072ac672054139cd Mon Sep 17 00:00:00 2001
From: Stevan Freeborn <65925598+StevanFreeborn@users.noreply.github.com>
Date: Fri, 15 Sep 2023 13:26:19 -0500
Subject: [PATCH] feat: wrap reply and post user images in link to user profile

---
 src/components/Post.tsx      | 16 +++++++++-------
 src/components/Reply.tsx     | 17 ++++++++++-------
 src/components/UserPosts.tsx |  6 +++---
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index fda7603..973008b 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -46,13 +46,15 @@ export default function Post({
   return (
     <div className='flex w-full gap-4 p-8 bg-white dark:bg-secondary-gray flex-wrap'>
       <div className='flex-shrink-0'>
-        <Image
-          alt='user profile image'
-          src={post.user.clerkImageUrl}
-          width={40}
-          height={40}
-          className='rounded-full object-cover border-4 border-primary-accent'
-        />
+        <Link href={`/profile/${post.user.clerkUserId}`}>
+          <Image
+            alt='user profile image'
+            src={post.user.clerkImageUrl}
+            width={40}
+            height={40}
+            className='rounded-full object-cover border-4 border-primary-accent'
+          />
+        </Link>
       </div>
       <div className='flex flex-1 flex-col gap-2 min-w-0'>
         <div className='flex items-center justify-between gap-2'>
diff --git a/src/components/Reply.tsx b/src/components/Reply.tsx
index 0576b24..40ff1b7 100644
--- a/src/components/Reply.tsx
+++ b/src/components/Reply.tsx
@@ -2,6 +2,7 @@ import { PostWithUserDto } from '@/app/types';
 import { useUser } from '@clerk/nextjs';
 import { Text } from '@codemirror/state';
 import Image from 'next/image';
+import Link from 'next/link';
 import PostActionButton from './PostActionButtons';
 import PostActionModal from './PostActionModal';
 import PostContent from './PostContent';
@@ -17,13 +18,15 @@ export default function Reply({ post }: { post: PostWithUserDto }) {
   return (
     <div className='flex w-full gap-4'>
       <div>
-        <Image
-          alt='user profile image'
-          src={post.user.clerkImageUrl}
-          width={40}
-          height={40}
-          className='rounded-full object-cover border-4 border-primary-accent'
-        />
+        <Link href={`/profile/${post.user.clerkUserId}`}>
+          <Image
+            alt='user profile image'
+            src={post.user.clerkImageUrl}
+            width={40}
+            height={40}
+            className='rounded-full object-cover border-4 border-primary-accent'
+          />
+        </Link>
       </div>
       <div className='flex flex-col flex-1 w-full border border-gray-600 rounded-md'>
         <div className='flex flex-col w-full p-1'>
diff --git a/src/components/UserPosts.tsx b/src/components/UserPosts.tsx
index 01bb3fe..2f6c32f 100644
--- a/src/components/UserPosts.tsx
+++ b/src/components/UserPosts.tsx
@@ -8,7 +8,7 @@ import Loader from './Loader';
 import Post from './Post';
 
 export default function UserPosts({ user }: { user: UserDto }) {
-  const PAGE_SIZE = 10;
+  const PAGE_SIZE = 1;
   const pager = usePaginatedQuery(
     api.posts.getUsersPostById,
     {
@@ -42,12 +42,12 @@ export default function UserPosts({ user }: { user: UserDto }) {
   }
 
   return (
-    <div className='flex flex-col items-center w-full gap-4'>
+    <div className='flex flex-col items-center w-full'>
       <div className='flex flex-col items-center w-full'>
         {postsWithUser.map(post => (
           <div
             key={post._id}
-            className='w-full border border-t-0 border-gray-600 first:border-t last:rounded-b-md p-1'
+            className='w-full border border-t-0 border-gray-600 first:border-t last:rounded-b-md p-1 last:mb-4'
           >
             <Post post={post} />
           </div>