feat : userProfile

profile owner's posts

server/services/PostService.ts

@@ -43,7 +43,7 @@ class PostService {
   getByUserId(userId: number) {
     return this.db.post.findMany({
       where: { userId },
-      include: { childPosts: true },
+      include: { childPosts: { include: { user: true } }, user: true, likes: true },
       orderBy: { updatedAt: "desc" },
     });
   }

src/app/api/user/[id]/post/route.ts

@@ -0,0 +1,10 @@
+import { postService } from "@/server/services";
+import { NextRequest, NextResponse } from "next/server";
+
+export const GET = async (req: NextRequest, { params: { id } }: { params: { id: string } }) => {
+  const posts = await postService.getByUserId(Number(id));
+
+  if (!posts) NextResponse.json({ error: "Post Not Found" });
+
+  return NextResponse.json(posts);
+};

src/app/user/[userId]/UserPosts.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import PostPreview from "@/components/Post/PostPreview";
+import { LoadingIndicator } from "@/components/Ui/Atom/LoadingIndicator";
+import { Title } from "@/components/Ui/Atom/Title";
+import { Post, User } from "@/types";
+import useSWR from "swr";
+
+export const UserPosts = ({ profileOwnerId, user }: { profileOwnerId: string; user: User }) => {
+  const { data, isLoading } = useSWR<Post[]>(`/api/user/${profileOwnerId}/post`);
+
+  return (
+    <div className="flex flex-col items-center my-10">
+      <Title className="mt-10 ">Posts</Title>
+      <hr className="border-b-2 border-gray-500 w-full my-10" />
+      {isLoading ? (
+        <LoadingIndicator />
+      ) : (
+        data?.map((post) => <PostPreview key={post.id} post={post} user={user} />)
+      )}
+    </div>
+  );
+};

src/app/user/[userId]/page.tsx

@@ -1,33 +1,25 @@
-import PostPreview from "@/components/Post/PostPreview";
 import { Avatar } from "@/components/Ui/Atom/Avatar";
 import { LinkIcon } from "@/components/Ui/Atom/Icon/LinkIcon";
 import { Title } from "@/components/Ui/Atom/Title";
 import { authService, userService } from "@/server/services";
 import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
+import { UserPosts } from "./UserPosts";
 
 export default async ({ params: { userId } }: { params: { userId: string } }) => {
   const session = await authService.getSession(cookies());
   const user = await userService.getById(Number(userId));
 
   if (!user || !session?.user) redirect("/");
 
-  const previewPosts = user?.posts.map((post) => ({ ...post, user }));
-
   return (
     <section className="w-full flex flex-col justify-center items-center my-10 ">
       <Avatar size="xl" src={user.avatar || "/images/defaultAvatar.webp"} />
       <Title className="my-2">{user.name}</Title>
       {session?.user?.id === user.id && (
         <LinkIcon defaultIcon="bi bi-pencil-square text-gray-500" href={`/user/${userId}/update`} />
       )}
-      <div className="flex flex-col items-center my-10">
-        <Title className="mt-10 ">Posts</Title>
-        <hr className="border-b-2 border-gray-500 w-full my-10" />
-        {previewPosts.map((post) => (
-          <PostPreview key={post.id} post={post} user={session?.user!} />
-        ))}
-      </div>
+      <UserPosts profileOwnerId={userId} user={session.user} />
     </section>
   );
 };

src/components/Post/PostPreview.tsx

@@ -18,7 +18,6 @@ export default ({ post, user }: { post: Post; user: User }) => {
     user: { name: ownerName, avatar: ownerAvatar, id: ownerId },
     body,
     id,
-    childPosts,
     likes,
     updatedAt,
     depth,
@@ -33,15 +32,23 @@ export default ({ post, user }: { post: Post; user: User }) => {
     (url, { arg: { userId, postId } }: { arg: { userId: number; postId: number } }) =>
       mutateFetch(url, { body: { userId, postId } }),
     {
-      onSuccess: () => mutate(unstable_serialize(getKey)),
+      onSuccess: () => {
+        mutate(unstable_serialize(getKey));
+        mutate(`/api/user/${ownerId}/post`);
+      },
     }
   );
 
   const { trigger: deleteTrigger, isMutating: isDeleteMutating } = useSWRMutation(
     "/api/like",
     (url, { arg: { userId, postId } }: { arg: { userId: number; postId: number } }) =>
       mutateFetch(url, { body: { userId, postId }, method: "DELETE" }),
-    { onSuccess: () => mutate(unstable_serialize(getKey)) }
+    {
+      onSuccess: () => {
+        mutate(unstable_serialize(getKey));
+        mutate(`/api/user/${ownerId}/post`);
+      },
+    }
   );
 
   return (