Merge pull request #138 from CodeForStartup/feat/update-tag-page

feat: refactor tag page

Author: luannguyenQV

apps/web/@/messages/en.json

@@ -7,6 +7,7 @@
     "category": "Category",
     "posts": "Posts",
     "total_post_plural": "Total {total} {total, plural, =0 {post} =1 {post} other {posts}}",
+    "post_plural": "{total} {total, plural, =0 {post} =1 {post} other {posts}}",
     "post": "{total, plural, =0 {post} =1 {post} other {posts}}",
     "pages": "Pages",
     "page": "Page",

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/@/molecules/posts/post-detail/index.tsx

@@ -4,7 +4,7 @@ import { TPostItem } from "database"
 import { Typography } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
-import TagList from "@/molecules/tag/tag-list"
+import TagListMeta from "@/molecules/tag/tag-list-meta"
 import PostMeta from "@/molecules/user/posts/post-meta"
 import { generatePath } from "@/utils/generatePath"
 
@@ -37,8 +37,12 @@ export default function PostDetail({ post }: PostDetailProps) {
 
         <PostMeta post={post} />
 
-        <TagList
-          tags={post?.tagOnPost}
+        <TagListMeta
+          tags={post?.tagOnPost?.map((tag) => ({
+            id: tag.tag.id,
+            slug: tag.tag.slug,
+            name: tag.tag.name,
+          }))}
           classes={{
             container: "mt-4",
           }}

apps/web/@/molecules/posts/post-item/index.tsx

@@ -6,7 +6,7 @@ import { useTranslations } from "next-intl"
 import { Typography } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
-import TagList from "@/molecules/tag/tag-list"
+import TagListMeta from "@/molecules/tag/tag-list-meta"
 import { generatePath } from "@/utils/generatePath"
 
 import CommentButton from "./comment-button"
@@ -15,6 +15,7 @@ import PostMeta from "./post-meta"
 
 export default function PostItem({ post }: { post: TPostItem }) {
   const t = useTranslations("common")
+  console.log(post)
 
   return (
     <div className="mb-4 flex rounded-sm border px-8 py-4">
@@ -34,8 +35,8 @@ export default function PostItem({ post }: { post: TPostItem }) {
 
         <PostMeta post={post} />
 
-        <TagList
-          tags={post?.tagOnPost}
+        <TagListMeta
+          tags={post?.tagOnPost?.map((tag) => tag?.tag)}
           classes={{
             container: "mt-2",
           }}

apps/web/@/molecules/posts/post-list/index.tsx

@@ -4,16 +4,18 @@ import React, { useCallback, useState } from "react"
 import { useParams } from "next/navigation"
 
 import { getPosts, TGetPostsRequest, TPostItem } from "database"
+import { cn } from "ui"
 
 import InfiniteScroll from "@/molecules/infinite-scroll"
 
 import PostItem from "../post-item"
 
 export type TPostListProps = {
   getPostParams?: TGetPostsRequest
+  containerClassName?: string
 }
 
-export default function PostList({ getPostParams = {} }: TPostListProps) {
+export default function PostList({ getPostParams = {}, containerClassName }: TPostListProps) {
   const searchParams = useParams()
   const [isLoading, setIsLoading] = useState(false)
   const [posts, setPosts] = useState<TPostItem[]>([])
@@ -37,12 +39,12 @@ export default function PostList({ getPostParams = {} }: TPostListProps) {
   }, [searchParams, page])
 
   return (
-    <div className="mt-4">
+    <div className={cn("mt-4", containerClassName)}>
       <InfiniteScroll
         loading={isLoading}
         nextPage={loadPosts}
       >
-        {posts?.map((post) => (
+        {posts.map((post) => (
           <PostItem
             key={post.id}
             post={post}

apps/web/@/molecules/tag/tag-badge/index.tsx

@@ -1,10 +1,10 @@
 import React from "react"
 import Link from "next/link"
 
+import { TTagItem } from "database"
 import { Badge } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
-import { TTagItem } from "@/types/tags"
 import { generatePath } from "@/utils/generatePath"
 
 interface TagBadgeProps {
@@ -20,7 +20,7 @@ const TagBadge: React.FC<TagBadgeProps> = ({ tag }) => {
     <Link
       key={tag.id}
       href={generatePath(APP_ROUTES.TAG, {
-        tagId: tag.slug,
+        tagId: tag.slug || tag.id,
       })}
     >
       <Badge

apps/web/@/molecules/tag/tag-detail/index.tsx

@@ -1,14 +1,22 @@
 import Link from "next/link"
+import { notFound } from "next/navigation"
 
-import { Tags } from "database"
+import { getTag } from "database"
 import { Tag } from "lucide-react"
-import { Button, Card, CardContent, CardHeader } from "ui"
+import { getTranslations } from "next-intl/server"
+import { Button, Card, CardContent, CardHeader, Typography } from "ui"
 
-export type TagDetailProp = {
-  tag: Tags
-}
+export default async function TagDetail({ tagIdOrSlug }: { tagIdOrSlug: string }) {
+  const t = await getTranslations()
+
+  const { data: tag, error } = await getTag({
+    tagIdOrSlug,
+  })
+
+  if (error) {
+    return notFound()
+  }
 
-const TagDetail = ({ tag }: TagDetailProp) => {
   return (
     <div className="col-span-4">
       <Card>
@@ -19,12 +27,12 @@ const TagDetail = ({ tag }: TagDetailProp) => {
         </CardHeader>
         <CardContent>
           <div className="flex flex-col items-center justify-center gap-2">
-            <h1 className="flex-1 text-center text-4xl font-extrabold text-slate-700">
+            <Typography variant="h1">
               <Link href={`/tags/${tag?.slug || tag?.id}`}>{tag.name}</Link>
-            </h1>
+            </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 text-slate-800">{tag?.totalPost || 0}</div>
+                <div className="font-bold text-slate-800">{tag?._count?.tagOnPost || 0}</div>
                 <div className="text-gray-400 hover:underline">
                   <Link href={`/tags/${tag.id}`}>posts</Link>
                 </div>
@@ -40,13 +48,11 @@ const TagDetail = ({ tag }: TagDetailProp) => {
               className="mt-4 w-full"
               variant="outline"
             >
-              Follow
+              {t("common.follow")}
             </Button>
           </div>
         </CardContent>
       </Card>
     </div>
   )
 }
-
-export default TagDetail

apps/web/@/molecules/tag/tag-item/index.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link"
+
+import { TTagItem } from "database"
+import { useTranslations } from "next-intl"
+import { Card, CardContent, CardHeader, Typography } from "ui"
+
+export default function TagItem({ tag }: { tag: TTagItem }) {
+  const t = useTranslations("common")
+
+  return (
+    <Link
+      href={`/tags/${tag?.id}`}
+      key={tag?.id}
+    >
+      <Card className="px-6 py-4 sm:col-span-1">
+        <CardHeader className="flex-row justify-between overflow-hidden p-0">
+          <Typography
+            variant="h3"
+            className="mb-1 break-words text-lg hover:underline"
+          >
+            #{tag?.name}
+          </Typography>
+        </CardHeader>
+        <CardContent className="p-0">
+          {tag?.description && <Typography variant="span">{tag?.description}</Typography>}
+          <div>
+            <Typography
+              variant="span"
+              className="font-semibold"
+            >
+              {t("post_plural", { total: tag?._count?.tagOnPost || 0 })}
+            </Typography>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  )
+}

apps/web/@/molecules/tag/tag-list-meta/index.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+
+import { TTagItem } from "database"
+import { cn } from "ui"
+
+import TagBadge from "../tag-badge"
+
+export type TagListProps = {
+  tags: Pick<TTagItem, "id" | "name" | "slug">[]
+  classes?: {
+    container?: string
+  }
+}
+
+export default function TagListMeta({
+  tags,
+  classes = {
+    container: "",
+  },
+}: TagListProps) {
+  return (
+    <div className={cn(classes?.container)}>
+      {tags?.length > 0 &&
+        tags?.map((tag) => (
+          <TagBadge
+            key={tag?.id}
+            tag={tag}
+          />
+        ))}
+    </div>
+  )
+}

apps/web/@/molecules/tag/tag-list/index.tsx

@@ -1,38 +1,54 @@
-import React from "react"
-
-import { cn } from "ui"
-
-import TagBadge from "../tag-badge"
-
-export type TagListProps = {
-  tags: {
-    tag: {
-      id: string
-      name: string
-      slug: string
-    }
-  }[]
-  classes?: {
-    container?: string
-  }
-}
+"use client"
+
+import React, { useCallback, useState } from "react"
+import { useParams } from "next/navigation"
+
+import { getTags, TTagItem } from "database"
+
+import InfiniteScroll from "@/molecules/infinite-scroll"
+
+import TagItem from "../tag-item"
+
+const TagList: React.FC = () => {
+  const searchParams = useParams()
+  const [isLoading, setIsLoading] = useState(false)
+  const [tags, setTags] = useState<TTagItem[]>([])
+  const [page, setPage] = useState(1)
+  const [hasNextPage, setHasNextPage] = useState(true)
+
+  const loadTags = useCallback(async () => {
+    if (!hasNextPage) return
+
+    setIsLoading(true)
+    const { data } = await getTags({
+      ...searchParams,
+      page,
+    })
+
+    setTags((prev) => [...prev, ...data?.data])
+    setHasNextPage(data?.totalPages > page)
+    setIsLoading(false)
+    setPage((prev) => prev + 1)
+  }, [searchParams, page])
 
-const TagList: React.FC<TagListProps> = ({
-  tags,
-  classes = {
-    container: "",
-  },
-}) => {
   return (
-    <div className={cn(classes?.container)}>
-      {tags?.length > 0 &&
-        tags?.map(({ tag }) => (
-          <TagBadge
-            key={tag?.id}
-            tag={tag}
-          />
-        ))}
-    </div>
+    <InfiniteScroll
+      loading={isLoading}
+      nextPage={loadTags}
+    >
+      <div className="mt-4">
+        {tags?.length > 0 ? (
+          <div className="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-4">
+            {tags.map((tag) => (
+              <TagItem
+                key={tag.id}
+                tag={tag}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    </InfiniteScroll>
   )
 }