Merge pull request #134 from CodeForStartup/feat/improve-home-page

feat/improve home page

Author: luannguyenQV

README.md

@@ -42,16 +42,16 @@ turbo dev
 🚀 Turborepo
 🎯 TailwindCSS  
 🔥 shadcn  
-💌 next-themes
-🖋 Zod validation
-🎰 React Form Hook
+💌 next-themes  
+🖋 Zod validation  
+🎰 React Form Hook  
 ️🥇 Tsup  
 💒 EditorJs  
 🐢 react-toastify
 🍾 react-textarea-autosize  
 🐠 lucide-react icon  
 🐴 dayjs  
-🤗 Eslint
+🤗 Eslint  
 💥 Husky  
 👽 Prettier
 

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,9 +1,8 @@
 import React from "react"
 
-import { PostOnUserType } from "database"
+import { PostOnUserType, TPostItem } from "database"
 
 import { getTotalActions } from "@/actions/protect/postAction"
-import { TPostItem } from "@/types/posts"
 
 import BookmarkButton from "./BookmarkButton"
 

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

@@ -1,10 +1,10 @@
 import React from "react"
 import Link from "next/link"
 
+import { TPostItem } from "database"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "ui"
 
 import APP_ROUTES from "@/constants/routes"
-import { TPostItem } from "@/types/posts"
 import { generatePath } from "@/utils/generatePath"
 
 type CommentButtonProps = {

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

@@ -1,10 +1,12 @@
+import Image from "next/image"
 import Link from "next/link"
 
+import { TPostItem } from "database"
+import { useTranslations } from "next-intl"
 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"
@@ -13,6 +15,8 @@ import LikeButton from "./like-button"
 import PostMeta from "./post-meta"
 
 export default function PostItem({ post }: { post: TPostItem }) {
+  const t = useTranslations("common")
+
   return (
     <div className="mb-4 flex rounded-sm border px-8 py-4">
       <div className="flex-1">
@@ -25,7 +29,7 @@ export default function PostItem({ post }: { post: TPostItem }) {
             variant="h2"
             className="hover:underline"
           >
-            {post.title}
+            {post.title || t("untitled")}
           </Typography>
         </Link>
 
@@ -43,9 +47,19 @@ export default function PostItem({ post }: { post: TPostItem }) {
             <LikeButton post={post} />
             <CommentButton post={post} />
           </div>
-          <BookmarkButton post={post} />
         </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,8 +1,7 @@
+import { TPostItem } from "database"
 import { useTranslations } from "next-intl"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography } from "ui"
 
-import { TPostItem } from "@/types/posts"
-
 type LikeButtonProps = {
   post: TPostItem
 }

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

@@ -1,17 +1,19 @@
 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 = {
   post: TPostItem
 }
 
 const PostMeta: React.FC<PostMetaProps> = ({ post }) => {
+  if (!post?.author) return null
+
   return (
     <div className="mt-2 flex items-center gap-2 text-xs text-gray-400">
       <div className="text hover:underline">

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}.