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/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,7 +37,7 @@ export default function PostDetail({ post }: PostDetailProps) {
 
         <PostMeta post={post} />
 
-        <TagList
+        <TagListMeta
           tags={post?.tagOnPost}
           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"
@@ -34,7 +34,7 @@ export default function PostItem({ post }: { post: TPostItem }) {
 
         <PostMeta post={post} />
 
-        <TagList
+        <TagListMeta
           tags={post?.tagOnPost}
           classes={{
             container: "mt-2",

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

@@ -42,7 +42,7 @@ export default function PostList({ getPostParams = {} }: TPostListProps) {
         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 {

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

@@ -1,11 +1,11 @@
 import Link from "next/link"
 
-import { Tags } from "database"
+import { TTagItem } from "database"
 import { Tag } from "lucide-react"
 import { Button, Card, CardContent, CardHeader } from "ui"
 
 export type TagDetailProp = {
-  tag: Tags
+  tag: TTagItem
 }
 
 const TagDetail = ({ tag }: TagDetailProp) => {
@@ -24,7 +24,7 @@ const TagDetail = ({ tag }: TagDetailProp) => {
             </h1>
             <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>

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: TTagItem[]
+  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>
   )
 }
 

apps/web/app/[lang]/(public)/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+  return <div>Loading...</div>
+}