Merge pull request #150 from luannguyenQV/feat/refactor-post

Feat/refactor post

Author: luannguyenQV

README.md

@@ -7,6 +7,8 @@
 
 # About next-forum
 
+next-forum is a next of forum with newest technology
+
 # Installation
 
 Install
@@ -33,10 +35,10 @@ turbo dev
 
 # Libraries
 
-- ReactJS
+- ReactJS - 19.
 - TypeScript
-- NextJS 14 - App router and server actions
-- next-auth
+- NextJS 15. - App router and server actions
+- next-auth 5.
 - Prisma ORM
 - Postgres
 - Turborepo
@@ -55,36 +57,8 @@ turbo dev
 - Husky
 - Prettier
 
-# Functions
-
 # Folder structure
 
-│─── src  
-│────── actions  
-│────── app  
-│────── configs  
-│────── constants  
-│────── emails  
-│────── font  
-│────── hooks  
-│────── i18n.ts  
-│────── libs  
-│────── messages  
-│────── middleware.ts  
-│────── molecules  
-│────── providers  
-│────── types  
-└── types  
-├────── next-auth.d.ts  
-├── package.json  
-├── postcss.config.js  
-├── tailwind.config.js  
-├── tsconfig.json  
-├── components.json  
-├── env.example  
-├── next-env.d.ts  
-├── next.config.mjs  
-
 ## Front side functions
 
 - [x] Register by email or github
@@ -93,7 +67,7 @@ turbo dev
 - [x] CRUD post
 - [x] List post: Search & filter by top or hot week, month, year, infinity
 - [x] Like post
-- [x] Comment on post
+- [ ] Comment on post
 - [x] Share post
 - [x] Manage tag
 - [x] Follow user
@@ -111,9 +85,6 @@ turbo dev
 - [ ] Manage posts
 - [ ] Manage images
 - [ ] Settings: Header/Menu
+- [ ] Manage roles and permission
 
 # DEV NOTES
-
-[[1][DEV NOTE] Initial turbo project and add tailwindcss library](https://dev.to/codeforstartup/dev-note-initial-turbo-project-and-add-tailwindcss-library-4iae)  
-[[2][DEV NOTE] Integrate prisma and postgres database](https://dev.to/codeforstartup/2dev-note-add-prisma-and-postgres-database-2m84)  
-[[3][DEV NOTE] Create a form with tiptap and react-textarea-autosize](https://dev.to/codeforstartup/3dev-note-create-a-form-with-tiptap-and-react-textarea-autosize-1cgn)

apps/web/package.json

@@ -45,9 +45,9 @@
     "html-react-parser": "^5.0.11",
     "isomorphic-dompurify": "^2.14.0",
     "lowlight": "^3.1.0",
-    "lucide-react": "^0.427.0",
+    "lucide-react": "^0.469.0",
     "negotiator": "^0.6.3",
-    "next": "15.0.4",
+    "next": "^15.0.4",
     "next-auth": "5.0.0-beta.25",
     "next-intl": "^3.26.0",
     "next-themes": "^0.2.1",
@@ -56,10 +56,10 @@
     "postcss": "^8.4.28",
     "prismjs": "^1.29.0",
     "qs": "^6.11.2",
-    "react": "19.0.0",
+    "react": "^19.0.0-rc.1",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "19.0.0",
+    "react-dom": "^19.0.0-rc.1",
     "react-dropzone": "^14.2.3",
     "react-editor-js": "^2.1.0",
     "react-email": "^3.0.1",
@@ -88,8 +88,8 @@
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^17.0.12",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.1",
     "database": "workspace:^",
     "eslint-config-custom": "workspace:*",
     "postcss-import": "^15.1.0",
@@ -100,8 +100,8 @@
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "19.0.1",
-      "@types/react-dom": "19.0.1"
+      "@types/react": "^19.0.1",
+      "@types/react-dom": "^19.0.1"
     }
   }
 }

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

@@ -9,17 +9,17 @@ import prisma, {
   createPost,
   PostOnUserType,
   PostStatus,
+  Session,
   TCreatePostInput,
   TPostItem,
   updatePost,
   updatePostStatus,
 } from "database"
+import { ActionState, validatedActionWithUser } from "libs/validationAction"
 import { toast } from "react-toastify"
+import { TUserItem, userSelect } from "types/users"
+import * as z from "zod"
 
-import { TUserItem, userSelect } from "@/types/users"
-
-// TODO: move to database package
-// Get total actions (like, bookmark) for a post
 export const getTotalActions = async ({
   postId,
   actionType,
@@ -141,8 +141,6 @@ export const removeRelation = async ({
         },
       }),
     ])
-
-    revalidatePath(`/post/${postSlug}`)
   } catch (error) {
     throw error
   }
@@ -171,17 +169,22 @@ export const getLikers = async ({ postId }: { postId: string }) => {
   }
 }
 
-export const onTogglePost = async ({ post }: { post: TPostItem }) => {
+export async function onTogglePost(
+  prevState: { post: TPostItem },
+  _
+): Promise<{ post: TPostItem }> {
   try {
-    await updatePostStatus(
-      post.id,
-      post.postStatus === PostStatus.DRAFT ? PostStatus.PUBLISHED : PostStatus.DRAFT,
-      post?.author?.id
+    const { data } = await updatePostStatus(
+      prevState.post.id,
+      prevState.post.postStatus === PostStatus.DRAFT ? PostStatus.PUBLISHED : PostStatus.DRAFT,
+      prevState.post?.author?.id
     )
+
+    return { post: data }
   } catch (error) {
     toast.error(error)
   } finally {
-    revalidatePath(`/post/${post.slug}`)
+    revalidatePath(`/post/${prevState.post.slug}`)
   }
 }
 
@@ -209,3 +212,54 @@ export const handleCreateUpdatePost = async ({
     redirect(APP_ROUTES.POST.replace(":postId", newPostId))
   }
 }
+
+const toggleLikePostSchema = z.object({
+  postId: z.string(),
+  postSlug: z.string(),
+  isLiked: z.boolean(),
+})
+
+export type ToggleLikePostSchemaType = ActionState & z.infer<typeof toggleLikePostSchema>
+
+export const onToggleLikePostWithUser = async (
+  data: ToggleLikePostSchemaType,
+  formData: FormData
+) => {
+  try {
+    await (data.isLiked ? removeRelation : addRelation)({
+      postId: data.postId,
+      postSlug: data.postSlug,
+      action: PostOnUserType.LIKE,
+    })
+    return {
+      postId: data.postId,
+      postSlug: data.postSlug,
+      isLiked: !data.isLiked,
+      success: "Success",
+    }
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : "Unknown error" }
+  } finally {
+    revalidatePath(`/post/${data.postSlug}`)
+  }
+}
+
+export const handleBookmark = async (prevState: ActionState, _: FormData) => {
+  try {
+    await (prevState.isBookmarked ? removeRelation : addRelation)({
+      postId: prevState.postId,
+      postSlug: prevState.postSlug,
+      action: PostOnUserType.BOOKMARK,
+    })
+    return {
+      postId: prevState.postId,
+      postSlug: prevState.postSlug,
+      isBookmarked: !prevState.isBookmarked,
+      success: "Success",
+    }
+  } catch (error) {
+    return { error: error instanceof Error ? error.message : "Unknown error" }
+  } finally {
+    revalidatePath(`/post/${prevState.postSlug}`)
+  }
+}

apps/web/src/app/[lang]/(public-fullwidth)/posts/[postId]/page.tsx

@@ -7,12 +7,11 @@ import LikeButton from "molecules/posts/post-detail/like-button"
 import TableOfContents from "molecules/posts/post-detail/table-of-contents"
 import BookmarkButton from "molecules/posts/post-item/bookmark-button"
 
-import { TSearchParams } from "@/types"
-
 import "./tocbot.css"
 
 import { auth } from "configs/auth"
 import { getPost, PostStatus } from "database"
+import { TSearchParams } from "types"
 
 export async function generateMetadata(props): Promise<Metadata> {
   const params = await props.params

apps/web/src/libs/validationAction/index.ts

@@ -0,0 +1,77 @@
+// Based on https://next-saas-start.vercel.app/
+import { auth } from "configs/auth"
+import { Session } from "next-auth"
+import { z } from "zod"
+
+export type ActionState = {
+  error?: string
+  success?: string
+  [key: string]: any // This allows for additional properties
+}
+
+type ValidatedActionFunction<S extends z.ZodType<any, any>, T> = (
+  data: z.infer<S>,
+  formData: FormData
+) => Promise<T>
+
+export function validatedAction<S extends z.ZodType<any, any>, T>(
+  schema: S,
+  action: ValidatedActionFunction<S, T>
+) {
+  return async (prevState: ActionState, formData: FormData): Promise<T> => {
+    const result = schema.safeParse(Object.fromEntries(formData))
+    if (!result.success) {
+      return { error: result.error.errors[0].message } as T
+    }
+
+    return action(result.data, formData)
+  }
+}
+
+type ValidatedActionWithUserFunction<S extends z.ZodType<any, any>, T> = (
+  data: z.infer<S>,
+  formData: FormData,
+  session: Session
+) => Promise<T>
+
+type ValidatedActionWithUserProps<S extends z.ZodType<any, any>, T> = {
+  schema?: S
+  action: ValidatedActionWithUserFunction<S, T>
+}
+
+export function validatedActionWithUser<S extends z.ZodType<any, any>, T>({
+  schema,
+  action,
+}: ValidatedActionWithUserProps<S, T>) {
+  return async (prevState: ActionState, formData: FormData): Promise<T> => {
+    const session = await auth()
+
+    if (!session) {
+      throw new Error("User is not authenticated")
+    }
+
+    if (!schema) {
+      return action(prevState, formData, session)
+    }
+
+    const result = schema.safeParse(Object.fromEntries(formData))
+
+    if (!result.success) {
+      return { error: result.error.errors[0].message } as T
+    }
+
+    return action(result.data, formData, session)
+  }
+}
+
+export function withUser<T>(action: (prevState: ActionState, formData: FormData) => Promise<T>) {
+  return async (prevState: ActionState, formData: FormData): Promise<T> => {
+    const session = await auth()
+
+    if (!session) {
+      throw new Error("User is not authenticated")
+    }
+
+    return action(prevState, formData)
+  }
+}

apps/web/src/molecules/posts/post-detail/comments/comment-header.tsx

@@ -3,6 +3,9 @@
 import React from "react"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 
+import { TPostItem } from "database"
+import { GetDataSuccessType } from "types"
+import { TCommentItem } from "types/comment"
 import {
   Select,
   SelectContent,
@@ -13,10 +16,6 @@ import {
   Typography,
 } from "ui"
 
-import { GetDataSuccessType } from "@/types"
-import { TCommentItem } from "@/types/comment"
-import { TPostItem } from "@/types/posts"
-
 type CommentHeaderProps = {
   post: TPostItem
   comments: GetDataSuccessType<TCommentItem[]>

apps/web/src/molecules/posts/post-detail/edit-post-button/index.tsx

@@ -3,14 +3,10 @@ import Link from "next/link"
 
 import { auth } from "configs/auth"
 import APP_ROUTES from "constants/routes"
-import { PostStatus } from "database"
-import { updatePostStatus } from "database/src/posts/queries"
+import { TPostItem } from "database"
 import { LucideEdit } from "lucide-react"
 import { getTranslations } from "next-intl/server"
-import { Button, buttonVariants, cn, toast } from "ui"
-
-import { onTogglePost } from "@/actions/protect/postAction"
-import { TPostItem } from "@/types/posts"
+import { buttonVariants, cn } from "ui"
 
 import TogglePost from "./toggle-post"