From eca25d29cdcceade11965dc5b785405ccf35bf0b Mon Sep 17 00:00:00 2001
From: Rafi Arrafif <rafiarrafif05@gmail.com>
Date: Sat, 4 Oct 2025 22:34:12 +0700
Subject: [PATCH] :heavy_plus_sign: (dep-add) add library for better handling
 form

Adding the react-hook-form library for better form handling than React's built-in state management, which often renders
every time input is entered.
---
 bun.lock                                      |  3 ++
 features/auth/ui/cards/Provision.tsx          |  2 +-
 .../auth/ui/components/ProvisionInput.tsx     | 48 ++++++++++++++-----
 package.json                                  |  1 +
 4 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/bun.lock b/bun.lock
index 978edb4..f5ae551 100644
--- a/bun.lock
+++ b/bun.lock
@@ -17,6 +17,7 @@
         "nextjs-toploader": "^3.8.16",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hook-form": "^7.64.0",
         "tailwindcss": "^4.1.11",
         "zod": "^4.0.5",
       },
@@ -1604,6 +1605,8 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
+    "react-hook-form": ["react-hook-form@7.64.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-fnN+vvTiMLnRqKNTVhDysdrUay0kUUAymQnFIznmgDvapjveUWOOPqMNzPg+A+0yf9DuE2h6xzBjN1s+Qx8wcg=="],
+
     "react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
     "react-textarea-autosize": ["react-textarea-autosize@8.5.9", "", { "dependencies": { "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", "use-latest": "^1.2.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-U1DGlIQN5AwgjTyOEnI1oCcMuEr1pv1qOtklB2l4nyMGbHzWrI0eFsYK0zos2YWqAolJyG0IWJaqWmWj5ETh0A=="],
diff --git a/features/auth/ui/cards/Provision.tsx b/features/auth/ui/cards/Provision.tsx
index 2cc3e2a..9b354d6 100644
--- a/features/auth/ui/cards/Provision.tsx
+++ b/features/auth/ui/cards/Provision.tsx
@@ -14,7 +14,7 @@ const Provision = ({ fullName }: Props) => {
       <p className="text-sm text-center font-light text-neutral-300 mt-2">
         Just a few more steps to join the fun!
       </p>
-      <ProvisionInput />
+      <ProvisionInput fullname={fullName} />
     </div>
   );
 };
diff --git a/features/auth/ui/components/ProvisionInput.tsx b/features/auth/ui/components/ProvisionInput.tsx
index 7c35d90..1e54c4c 100644
--- a/features/auth/ui/components/ProvisionInput.tsx
+++ b/features/auth/ui/components/ProvisionInput.tsx
@@ -1,53 +1,75 @@
 "use client";
 
-import { Button, Input } from "@heroui/react";
 import React, { useState } from "react";
+import { Button, Form, Input } from "@heroui/react";
+import { SubmitHandler, useForm } from "react-hook-form";
 
-const ProvisionInput = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
+type Props = {
+  fullname: string;
+};
+
+type Inputs = {
+  fullname: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+};
+
+const ProvisionInput = ({ fullname }: Props) => {
+  const { register, handleSubmit, setValue } = useForm<Inputs>();
+  setValue("fullname", fullname);
+
+  const [submitStatus, setSubmitStatus] = useState(false);
+  const onSubmit: SubmitHandler<Inputs> = (data) => {
+    setSubmitStatus(true);
+    console.log(data);
+  };
 
   return (
     <div className="mt-6 px-3">
-      <div className="flex flex-col gap-1.5">
+      <Form className="flex flex-col gap-1.5" onSubmit={handleSubmit(onSubmit)}>
         <Input
+          {...register("email")}
           className="w-full "
           label="Email"
           type="email"
           variant="bordered"
-          onChange={(e) => setEmail(e.target.value)}
           classNames={{
             input: "text-md font-light pt-4",
             inputWrapper: "flex gap-10",
           }}
         />
         <Input
+          {...register("password")}
           className="w-full "
           label="Password"
           type="password"
           variant="bordered"
-          onChange={(e) => setPassword(e.target.value)}
           classNames={{
             input: "text-md font-light pt-4",
             inputWrapper: "flex gap-10",
           }}
         />
         <Input
+          {...register("confirmPassword")}
           className="w-full "
           label="Confirm Password"
           type="password"
           variant="bordered"
-          onChange={(e) => setConfirmPassword(e.target.value)}
           classNames={{
             input: "text-md font-light pt-4",
             inputWrapper: "flex gap-10",
           }}
         />
-      </div>
-      <Button className="mt-3 w-full" color="primary">
-        Continue
-      </Button>
+        <Button
+          type="submit"
+          className="mt-1.5 w-full"
+          color="primary"
+          isLoading={submitStatus}
+        >
+          Continue
+        </Button>
+      </Form>
     </div>
   );
 };
diff --git a/package.json b/package.json
index d55fcf6..4e58914 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "nextjs-toploader": "^3.8.16",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.64.0",
     "tailwindcss": "^4.1.11",
     "zod": "^4.0.5"
   },