feat: refactor author page

Author: luannguyenQV

apps/web/@/molecules/follower/user-profile/index.tsx

@@ -1,33 +1,23 @@
 import Link from "next/link"
+import { notFound } from "next/navigation"
 
+import { getUser } from "database"
 import { getTranslations } from "next-intl/server"
 import { Avatar, AvatarFallback, AvatarImage, Card, CardContent, CardHeader, Typography } from "ui"
 
-import APP_APIS from "@/constants/apis"
-import { TUserItem } from "@/types/users"
-import { generatePath } from "@/utils/generatePath"
-
 import FollowButton from "./follow-button"
 
 export type UserProfileProps = {
   authorId: string
 }
 
 export async function UserProfile({ authorId }: UserProfileProps) {
-  // const rawAuthor = await fetch(
-  //   `${process.env.NEXT_PUBLIC_FRONTEND_URL}${generatePath(APP_APIS.protected.user.GET, {
-  //     userId: authorId,
-  //   })}`,
-  //   {
-  //     method: "GET",
-  //     cache: "no-cache",
-  //     headers: {
-  //       "Content-Type": "application/json",
-  //     },
-  //   }
-  // )
-  const author: TUserItem = await rawAuthor?.json()
   const t = await getTranslations()
+  const { data: author, error } = await getUser({ userId: authorId })
+
+  if (error) {
+    return notFound()
+  }
 
   return (
     <div className="col-span-4">
@@ -58,13 +48,13 @@ export async function UserProfile({ authorId }: UserProfileProps) {
             </Typography>
             <div className="mt-4 flex w-full flex-1 divide-x">
               <div className="flex flex-1 flex-col items-center justify-center">
-                <div className="font-bold">{author?._count?.post}</div>
+                <div className="font-bold">{author?.totalPost}</div>
                 <div className="hover:underline">
                   <Link href={`/author/${author?.id}`}>{t("common.posts")}</Link>
                 </div>
               </div>
               <div className="flex flex-1 flex-col items-center justify-center">
-                <div className="font-bold">{author?._count?.followers}</div>
+                <div className="font-bold">{author?.totalFollower}</div>
                 <div className="hover:underline">
                   <Link href={`/author/${author?.id}/followers`}>{t("common.followers")}</Link>
                 </div>

apps/web/app/[lang]/(public-fullwidth)/author/[authorId]/page.tsx

@@ -1,25 +1,28 @@
+import { getUser } from "database"
+
 import UserProfile from "@/molecules/follower/user-profile"
 import PostList from "@/molecules/posts/post-list"
 
-export const generateMetadata = async ({ params, searchParams }) => {
+export const generateMetadata = async ({ params }) => {
+  const { data: author, error } = await getUser({ userId: params?.authorId })
+
   return {
-    title: "Author",
-    description: "",
+    title: author?.name,
+    description: author?.bio,
   }
 }
 
 export default async function Page({ params, searchParams }) {
   return (
     <div className="grid grid-cols-12 gap-10">
-      {/* <UserProfile authorId={params?.authorId} /> */}
-      <div className="col-span-8 rounded-md">
-        <PostList
-          getPostParams={{
-            authorId: params?.authorId,
-            ...searchParams,
-          }}
-        />
-      </div>
+      <UserProfile authorId={params?.authorId} />
+      <PostList
+        containerClassName="mt-0 col-span-8"
+        getPostParams={{
+          authorId: params?.authorId,
+          ...searchParams,
+        }}
+      />
     </div>
   )
 }

packages/database/prisma/schema.prisma

@@ -181,6 +181,9 @@ model User {
   comment       Comment[]
   commentOnUser CommentOnUser[]
   images        Image[]
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
 }
 
 model Follower {

packages/database/src/index.ts

@@ -22,6 +22,8 @@ import {
 } from "./shared/type"
 import { createTag, getTag, getTags, getTopTags } from "./tags/queries"
 import type { TTagItem, TTagListItem } from "./tags/selects"
+import { getUser } from "./users/queries"
+import { TUserDetail } from "./users/selects"
 
 export * from "@prisma/client"
 export default prisma
@@ -43,6 +45,9 @@ export {
   FilterValues,
   PeriodValues,
 
+  // Users
+  getUser,
+
   // Images
   getImages,
   createImage,
@@ -69,6 +74,9 @@ export type {
   ImageOrderBys,
   TImage,
 
+  // Users
+  TUserDetail,
+
   // Shared
   IActionReturn,
   IGetListResponse,

packages/database/src/tags/queries.ts

@@ -40,7 +40,7 @@ export const getTags = async ({
   }
 
   try {
-    const [data, total]: [Tags[], number] = await Promise.all([
+    const [data, total] = await Promise.all([
       prisma.tags.findMany(tagQuery),
       prisma.tags.count({
         where: tagQuery.where,

packages/database/src/users/queries.ts

@@ -0,0 +1,30 @@
+import prisma from "../prisma"
+import { IActionReturn } from "../shared/type"
+import { TUserDetail, userDetailSelect } from "./selects"
+import { TGetUserProps } from "./type"
+
+export const getUser = async ({ userId }: TGetUserProps): Promise<IActionReturn<TUserDetail>> => {
+  try {
+    const data = await prisma.user.findFirst({
+      where: {
+        id: userId,
+      },
+      select: userDetailSelect,
+    })
+
+    if (!data) {
+      throw {
+        error: "NOT_FOUND",
+      }
+    }
+
+    return {
+      data,
+    }
+  } catch (error) {
+    throw {
+      error,
+      data: null,
+    }
+  }
+}

packages/database/src/users/selects.ts

@@ -0,0 +1,19 @@
+import { Prisma } from "@prisma/client"
+
+export const userDetailSelect = {
+  id: true,
+  name: true,
+  email: true,
+  image: true,
+  bio: true,
+  address: true,
+  website: true,
+  totalFollower: true,
+  totalFollowing: true,
+  totalPost: true,
+  totalView: true,
+} satisfies Prisma.UserSelect
+
+export type TUserDetail = Prisma.UserGetPayload<{
+  select: typeof userDetailSelect
+}>

packages/database/src/users/type.ts

@@ -0,0 +1,3 @@
+export type TGetUserProps = {
+  userId: string
+}