feat: separated hooks from view in the sign up page

Author: joaov1ct0r

src/app/components/button-form.tsx

@@ -39,7 +39,8 @@ export function ButtonForm({
         ${color.color} 
         ${color.hover} 
         text-white 
-        font-bold 
+        font-bold
+        ml-2
         py-2 
         px-4 
         rounded 

src/app/components/button-wrapper/button-wrapper.tsx

@@ -7,5 +7,5 @@ export interface ButtonWrapperProps {
 }
 
 export function ButtonWrapper({ children }: ButtonWrapperProps) {
-  return <div className="flex items-center justify-evenly">{children}</div>;
+  return <div className="flex items-center justify-end">{children}</div>;
 }

src/app/components/loading.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useAboutCtx } from "@/app/about/hooks/use-about";
-import ButtonForm from "@/app/components/button-form";
+import { ButtonForm } from "@/app/components/button-form";
 
 export default function Loading() {
   const { showLoading } = useAboutCtx();
@@ -10,12 +10,9 @@ export default function Loading() {
     <div
       className={!showLoading ? "hidden" : "flex justify-center items-center"}
     >
-      <ButtonForm
-        model="warning"
-        placeholder="Loading..."
-        handleOnClick={() => null}
-        disabled={true}
-      />
+      <ButtonForm model="warning" disabled={true}>
+        Loading...
+      </ButtonForm>
       <svg className="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24" />
     </div>
   );

src/app/signup/components/content/content.tsx

@@ -7,5 +7,5 @@ export interface SignUpContentProps {
 }
 
 export function SignUpContent({ children }: SignUpContentProps) {
-  return <>{children}</>;
+  return <div className="flex justify-center items-center">{children}</div>;
 }

src/app/signup/components/root/root.tsx

@@ -7,9 +7,5 @@ export interface SignUpRootProps {
 }
 
 export function SignUpRoot({ children }: SignUpRootProps) {
-  return (
-    <div className="w-full h-full flex justify-center items-center">
-      {children}
-    </div>
-  );
+  return <div className="h-screen w-screen overflow-hidden">{children}</div>;
 }

src/app/signup/components/sign-up-form.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { MouseEvent, useCallback } from "react"
+import { useSignUpCtx } from "@/app/signup/hooks/use-sign-up"
+import { useSignUpDispatch } from "@/app/signup/hooks/use-sign-up-dispatch"
+import { useRouter } from "next/navigation"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { SignUpSchema } from "@/app/signup/schemas/sign-up-schema"
+import { SignUpFormSchema } from "@/app/signup/interfaces/sign-up-form-schema";
+
+export function useSignUpForm() {
+    const {
+        register,
+        handleSubmit,
+        watch,
+        formState: { errors },
+    } = useForm<SignUpFormSchema>({
+        resolver: zodResolver(SignUpSchema),
+    });
+
+    const file = watch("file");
+
+    const router = useRouter();
+
+    const { error, success, showLoading } = useSignUpCtx();
+
+    const { signUpUser } = useSignUpDispatch();
+
+    const memoizedHandleAfterSignUp = useCallback(() => {
+        router.push("/");
+    }, [router]);
+
+    const handleFormSubmit = (data: SignUpFormSchema) => {
+        const { success } = SignUpSchema.safeParse(data);
+
+        if (success) signUpUser(data);
+    };
+
+    const handleCancelSignUp = (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        memoizedHandleAfterSignUp();
+    };
+
+    return {
+        register,
+        handleSubmit,
+        file,
+        handleCancelSignUp,
+        handleFormSubmit,
+        errors,
+        showLoading,
+        success,
+        error,
+        memoizedHandleAfterSignUp
+    }
+}

src/app/signup/hooks/use-sign-up-form.ts

@@ -1,12 +1,121 @@
-import React from "react";
-import SignUpForm from "@/app/signup/components/sign-up-form";
+"use client";
+
+import React, { useEffect } from "react";
+import { toast } from "react-toastify";
+import Image from "next/image";
+import { getObjectErrors } from "@/app/utils/get-object-errors";
+import { SignUp } from "@/app/signup/components/index";
+import { useSignUpForm } from "@/app/signup/hooks/use-sign-up-form";
+
+export default function SignUpPage() {
+  const {
+    register,
+    handleSubmit,
+    file,
+    handleCancelSignUp,
+    handleFormSubmit,
+    errors,
+    showLoading,
+    success,
+    error,
+    memoizedHandleAfterSignUp,
+  } = useSignUpForm();
+
+  useEffect(() => {
+    if (errors) {
+      getObjectErrors(errors);
+    }
+  }, [errors]);
+
+  useEffect(() => {
+    if (success !== null && success === true && error === null) {
+      toast.success("User signed up with success!");
+      memoizedHandleAfterSignUp();
+    }
+  }, [error, success, memoizedHandleAfterSignUp]);
 
-export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <SignUpForm />
-      </main>
-    </div>
+    <SignUp.Root>
+      <SignUp.Content>
+        <SignUp.Form onSubmit={handleSubmit(handleFormSubmit)}>
+          <Image
+            alt="User profile image"
+            src={(() => {
+              if (file && file.length > 0) {
+                const url = URL.createObjectURL(file[0]);
+                return url;
+              }
+
+              return "/images/default_avatar.png";
+            })()}
+            quality={100}
+            width={200}
+            height={200}
+            crossOrigin="use-credentials"
+          />
+
+          <SignUp.InputWrapper>
+            <SignUp.Label id={"file"}>Profile image</SignUp.Label>
+            <SignUp.Input
+              register={register("file", { required: false })}
+              id="file"
+              type="file"
+            />
+          </SignUp.InputWrapper>
+
+          <SignUp.InputWrapper>
+            <SignUp.Label id={"name"}>Name</SignUp.Label>
+            <SignUp.Input
+              register={register("name", { required: true })}
+              id="name"
+            />
+          </SignUp.InputWrapper>
+
+          <SignUp.InputWrapper>
+            <SignUp.Label id={"email"}>Email</SignUp.Label>
+            <SignUp.Input
+              id="email"
+              type="email"
+              register={register("email", { required: true })}
+            />
+          </SignUp.InputWrapper>
+
+          <SignUp.InputWrapper>
+            <SignUp.Label id={"username"}>Username</SignUp.Label>
+            <SignUp.Input
+              id="username"
+              register={register("username", { required: true })}
+            />
+          </SignUp.InputWrapper>
+
+          <SignUp.InputWrapper>
+            <SignUp.Label id={"password"}>Password</SignUp.Label>
+            <SignUp.Input
+              id="password"
+              type="password"
+              register={register("password", { required: true })}
+            />
+          </SignUp.InputWrapper>
+
+          <SignUp.ButtonWrapper>
+            <SignUp.Button
+              disabled={showLoading}
+              type="submit"
+              model={showLoading ? "disabled" : "success"}
+            >
+              Sign up
+            </SignUp.Button>
+
+            <SignUp.Button
+              disabled={showLoading}
+              onClick={handleCancelSignUp}
+              model={showLoading ? "disabled" : "danger"}
+            >
+              Cancel
+            </SignUp.Button>
+          </SignUp.ButtonWrapper>
+        </SignUp.Form>
+      </SignUp.Content>
+    </SignUp.Root>
   );
 }