feat: update sign up page

Author: luannguyenQV

apps/web/@/actions/auth/index.ts

@@ -1,6 +1,11 @@
 "use server"
 
+import { redirect } from "next/navigation"
+
 import { signIn, signOut } from "configs/auth"
+import { Prisma } from "database"
+import { createUser } from "database/src/users/queries"
+import { z } from "zod"
 
 export const signInWithCredentials = async (email: string, password: string) => {
   await signIn("credentials", {
@@ -18,3 +23,38 @@ export const onSignOut = async () => {
     redirectTo: "/",
   })
 }
+
+// SIGN UP
+export const signUpSchema = z.object({
+  email: z.string().email("Email is invalid"),
+  password: z.string().min(8),
+  confirmPassword: z.string().min(8),
+})
+
+export type SignUpDataInput = z.infer<typeof signUpSchema>
+
+export type SignUpDataOutput = z.inferFlattenedErrors<typeof signUpSchema>
+
+export const signUp = async (
+  data: Pick<Prisma.UserCreateInput, "email" | "password">
+): Promise<SignUpDataOutput> => {
+  try {
+    await createUser({ data })
+
+    redirect("/login")
+  } catch (error) {
+    if (error.code === "P2002") {
+      return {
+        formErrors: [],
+        fieldErrors: {
+          email: ["Email already exists"], // TODO: localize error message
+        },
+      }
+    }
+
+    return {
+      formErrors: [error?.message],
+      fieldErrors: {},
+    }
+  }
+}

apps/web/@/molecules/auth/sign-up/index.tsx

@@ -3,9 +3,12 @@
 import Link from "next/link"
 
 import { zodResolver } from "@hookform/resolvers/zod"
+import { Prisma } from "database"
 import { GithubIcon } from "lucide-react"
 import { useTranslations } from "next-intl"
+import { useFormState } from "react-dom"
 import { useForm } from "react-hook-form"
+import { toast } from "react-toastify"
 import {
   Button,
   Card,
@@ -23,29 +26,50 @@ import {
 } from "ui"
 import { z } from "zod"
 
+import { signUp, SignUpDataInput, signUpSchema } from "@/actions/auth"
+
 import AuthForm from "../auth-form"
 
 export default function SignUp() {
   const t = useTranslations("auth")
 
-  const form = useForm({
-    resolver: zodResolver(
-      z.object({
-        email: z.string().email(t("email.invalid")),
-        password: z.string().min(8, t("password.min")),
-        confirmPassword: z.string().min(8, t("password.min")),
-      })
-    ),
+  const form = useForm<SignUpDataInput>({
+    resolver: zodResolver(signUpSchema),
+    mode: "onTouched",
   })
 
   const {
     formState: { errors },
     register,
     handleSubmit,
+    setError,
   } = form
 
-  const onSubmit = (data: any) => {
-    // TODO: Implement sign up
+  // TODO:
+  // const [state, formAction] = useActionState<Pick<Prisma.UserCreateInput, "email" | "password">>(
+  //   signUp,
+  //   null
+  // )
+
+  console.log(">>>", errors)
+
+  const formAction = async ({ confirmPassword, ...data }: SignUpDataInput) => {
+    const error = await signUp(data)
+
+    console.log("formAction>>error", error)
+
+    if (error.formErrors) {
+      toast.error(error.formErrors?.at(0))
+    }
+
+    if (error.fieldErrors) {
+      Object?.entries(error.fieldErrors)?.forEach(([field, message]) => {
+        setError(field, {
+          type: "manual",
+          message,
+        })
+      })
+    }
   }
 
   return (
@@ -55,7 +79,7 @@ export default function SignUp() {
         description="Register to your account to continue."
       >
         <Form {...form}>
-          <form onSubmit={handleSubmit(onSubmit)}>
+          <form onSubmit={handleSubmit(formAction)}>
             <div className="grid w-full gap-4">
               <FormField
                 name="email"
@@ -65,7 +89,7 @@ export default function SignUp() {
                     <FormControl>
                       <Input
                         id="email"
-                        placeholder={t("email")}
+                        placeholder={t("email_label")}
                         type="email"
                         autoCapitalize="none"
                         autoComplete="email"

apps/web/app/[lang]/(public-fullwidth)/author/[authorId]/page.tsx

@@ -4,7 +4,11 @@ import UserProfile from "@/molecules/follower/user-profile"
 import PostList from "@/molecules/posts/post-list"
 
 export const generateMetadata = async ({ params }) => {
-  const { data: author, error } = await getUser({ userId: params?.authorId })
+  const { data: author, error } = await getUser({
+    where: {
+      id: params?.authorId,
+    },
+  })
 
   return {
     title: author?.name,

apps/web/configs/auth.ts

@@ -1,5 +1,5 @@
 import { PrismaAdapter } from "@auth/prisma-adapter"
-import prisma from "database"
+import prisma, { getUser } from "database"
 import NextAuth from "next-auth"
 import Credentials from "next-auth/providers/credentials"
 import GithubProvider from "next-auth/providers/github"
@@ -23,7 +23,7 @@ export const {
       },
       authorize: async (credentials: Record<string, string>) => {
         try {
-          const user = await prisma.user.findUnique({
+          const { data: user } = await getUser({
             where: {
               email: credentials.email,
               password: credentials.password,

packages/database/src/index.ts

@@ -23,7 +23,7 @@ import {
 import { createTag, getTag, getTags, getTopTags } from "./tags/queries"
 import type { TTagItem, TTagListItem } from "./tags/selects"
 import { tagListSelect } from "./tags/selects"
-import { getUser } from "./users/queries"
+import { createUser, getUser, updateUser } from "./users/queries"
 import { TUserDetail } from "./users/selects"
 
 export * from "@prisma/client"
@@ -49,6 +49,8 @@ export {
 
   // Users
   getUser,
+  createUser,
+  updateUser,
 
   // Images
   getImages,

packages/database/src/shared/type.ts

@@ -22,7 +22,7 @@ export interface IActionReturn<T> {
 export interface IGetListResponse<T> {
   data: T[]
   total: number
-  page: number
-  totalPages: number
-  limit: number
+  page?: number
+  totalPages?: number
+  limit?: number
 }

packages/database/src/tags/queries.ts

@@ -8,45 +8,30 @@ import prisma from "../prisma"
 import { DEFAULT_LIMIT, DEFAULT_PAGE, IActionReturn, IGetListResponse } from "../shared/type"
 import { tagItemSelect, tagListSelect, TTagItem, TTagListItem } from "./selects"
 
-type GetTagsProps = {
-  page?: number
-  limit?: number
-  orderBy?: Prisma.TagsOrderByRelevanceInput
-}
-
-export const getTags = async ({
-  page = 1,
-  limit = LIMIT_PER_PAGE,
-  orderBy,
-}: GetTagsProps): Promise<IActionReturn<IGetListResponse<TTagItem>>> => {
-  const tagQuery = {
-    select: tagListSelect,
-    take: Number(limit) || 10,
-    skip: (page > 0 ? page - 1 : 0) * Number(limit),
-    where: {
-      name: {
-        contains: orderBy?.search,
-        mode: "insensitive",
-      },
-    },
-    orderBy,
+export const getTags = async (
+  tagsFindManyArgs: Prisma.TagsFindManyArgs = {
+    take: LIMIT_PER_PAGE,
+    skip: DEFAULT_LIMIT * (DEFAULT_PAGE - 1),
   }
-
+): Promise<IActionReturn<IGetListResponse<TTagListItem>>> => {
   try {
     const [data, total] = await Promise.all([
-      prisma.tags.findMany(tagQuery),
+      prisma.tags.findMany({
+        ...tagsFindManyArgs,
+        select: tagListSelect,
+      }),
       prisma.tags.count({
-        where: tagQuery.where,
+        where: tagsFindManyArgs?.where || {},
       }),
     ])
 
+    prisma.tags.findMany()
+
     return {
       data: {
         data,
         total,
-        limit,
-        page,
-        totalPages: Math.ceil(total / Number(limit)),
+        limit: tagsFindManyArgs?.take || DEFAULT_LIMIT,
       },
     }
   } catch (error) {
@@ -56,8 +41,7 @@ export const getTags = async ({
       data: {
         data: [],
         total: 0,
-        limit,
-        page,
+        limit: DEFAULT_LIMIT,
       },
       error,
     }

packages/database/src/users/queries.ts

@@ -1,19 +1,21 @@
+import { Prisma } from "@prisma/client"
+
 import prisma from "../prisma"
 import { IActionReturn } from "../shared/type"
 import { TUserDetail, userDetailSelect } from "./selects"
-import { TGetUserProps } from "./type"
 
-export const getUser = async ({ userId }: TGetUserProps): Promise<IActionReturn<TUserDetail>> => {
+export const getUser = async (
+  userFindFirstArgs: Prisma.UserFindFirstArgs
+): Promise<IActionReturn<TUserDetail>> => {
   try {
     const data = await prisma.user.findFirst({
-      where: {
-        id: userId,
-      },
+      ...userFindFirstArgs,
       select: userDetailSelect,
     })
 
     if (!data) {
       throw {
+        data: null,
         error: "NOT_FOUND",
       }
     }
@@ -28,3 +30,42 @@ export const getUser = async ({ userId }: TGetUserProps): Promise<IActionReturn<
     }
   }
 }
+
+export const createUser = async (
+  userCreateArgs: Prisma.UserCreateArgs
+): Promise<IActionReturn<TUserDetail>> => {
+  try {
+    const data = await prisma.user.create({
+      ...userCreateArgs,
+      select: userDetailSelect,
+    })
+
+    return {
+      data,
+    }
+  } catch (error) {
+    throw {
+      error,
+      data: null,
+    }
+  }
+}
+
+export const updateUser = async (
+  userUpdateArgs: Prisma.UserUpdateArgs
+): Promise<IActionReturn<TUserDetail>> => {
+  try {
+    const data = await prisma.user.update({
+      ...userUpdateArgs,
+      select: userDetailSelect,
+    })
+    return {
+      data,
+    }
+  } catch (error) {
+    throw {
+      error,
+      data: null,
+    }
+  }
+}