feat: improve home page perf

Author: luannguyenQV

README.md

@@ -53,7 +53,7 @@ turbo dev
 🐴 dayjs  
 🤗 Eslint  
 💥 Husky  
-👽 Prettier  
+👽 Prettier
 
 # Functions
 

apps/web/@/actions/protect/postAction.ts

@@ -18,6 +18,8 @@ import APP_ROUTES from "@/constants/routes"
 import { TUserItem, userSelect } from "@/types/users"
 import { getServerSession } from "@/utils/auth"
 
+// TODO: move to database package
+// Get total actions (like, bookmark) for a post
 export const getTotalActions = async ({
   postId,
   actionType,

apps/web/@/actions/protect/posts.ts

@@ -3,9 +3,9 @@
 import React, { useState } from "react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 
+import { FilterValues, PeriodValues } from "database"
 import { cn } from "ui"
 
-import { FilterValues, PeriodValues } from "@/types/filter"
 import { capitalizeFirstLetter } from "@/utils/text"
 
 import { FilterItem } from "./filter-item"

apps/web/@/molecules/home/filter/index.tsx

@@ -1,10 +1,11 @@
+import Image from "next/image"
 import Link from "next/link"
 
+import { TPostItem } from "database"
 import { Typography } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
 import TagList from "@/molecules/tag/tag-list"
-import { TPostItem } from "@/types/posts"
 import { generatePath } from "@/utils/generatePath"
 
 import BookmarkButton from "./bookmark-button"
@@ -38,14 +39,25 @@ export default function PostItem({ post }: { post: TPostItem }) {
           }}
         />
 
-        <div className="mt-2 flex justify-between">
+        {/* <div className="mt-2 flex justify-between">
           <div className="flex gap-4">
             <LikeButton post={post} />
             <CommentButton post={post} />
           </div>
           <BookmarkButton post={post} />
-        </div>
+        </div> */}
       </div>
+      {post.Image && (
+        <div className="flex items-center">
+          <Image
+            src={post.Image.url}
+            alt={post.title}
+            width={160}
+            height={120}
+            className="h-[120px] w-[160px] rounded-sm object-cover"
+          />
+        </div>
+      )}
     </div>
   )
 }

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

@@ -1,10 +1,10 @@
 import React from "react"
 import Link from "next/link"
 
+import { TPostItem } from "database"
 import dayjs from "dayjs"
 
 import APP_ROUTES from "@/constants/routes"
-import { TPostItem } from "@/types/posts"
 import { generatePath } from "@/utils/generatePath"
 
 type PostMetaProps = {

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

@@ -2,7 +2,6 @@
 
 import React from "react"
 
-import { useTheme } from "next-themes"
 import { cn } from "ui"
 
 import { bebasNeue } from "@/font"
@@ -12,12 +11,11 @@ interface NumberIndexProps {
 }
 
 const NumberIndex: React.FC<NumberIndexProps> = ({ number }) => {
-  // const { theme } = useTheme()
-
   return (
     <div
       className={cn(
-        "flex items-center justify-center stroke-black stroke-1 text-2xl font-extrabold"
+        "flex items-center justify-center fill-none stroke-black stroke-1 text-2xl font-extrabold",
+        bebasNeue.className
       )}
     >
       {number}.

apps/web/@/molecules/top-tags/NumberIndex.tsx

@@ -10,25 +10,24 @@ import NumberIndex from "./NumberIndex"
 const TopTag: React.FC = async () => {
   const t = await getTranslations()
 
-  const tagData = await getTopTags({})
+  const { data: topTags } = await getTopTags()
 
   return (
     <div className="mt-4 border-t pt-4">
       <Typography variant="h3">{t("common.trending")}</Typography>
       <ul>
-        {(tagData?.data || []).map((tag, index) => (
+        {(topTags?.data || []).map((tag, index) => (
           <li
             key={tag.id}
             className="mb-2 flex items-center gap-2"
           >
             <NumberIndex number={index + 1} />
             <Link href={`/tags/${tag?.slug || tag?.id}`}>
               <div className="hover:underline">
-                <strong>{tag.name}</strong>
-                <Typography className="flex gap-1 text-xs">
-                  <strong>{tag?._count.tagOnPost}</strong>
-                  {t("common.post", {
-                    total: tag?._count.tagOnPost || 0,
+                <Typography variant="strong">#{tag.name}</Typography>
+                <Typography variant="mutedText">
+                  {t("common.total_post_plural", {
+                    total: tag?._count?.tagOnPost || 0,
                   })}
                 </Typography>
               </div>