From ff24cfaa3c64f7f51f3d7db47b4708a758651c31 Mon Sep 17 00:00:00 2001
From: rharkor <louis@huort.com>
Date: Sat, 16 Sep 2023 22:41:29 +0200
Subject: [PATCH] refactor: useForm

---
 src/app/[lang]/(sys-auth)/forgot-password/form.tsx        | 1 -
 src/app/[lang]/(sys-auth)/reset-password/[token]/form.tsx | 2 --
 src/components/auth/login-user-auth-form.tsx              | 2 --
 src/components/auth/register-user-auth-form.tsx           | 4 ----
 src/components/profile/update-account.tsx                 | 1 -
 src/components/ui/form-field.tsx                          | 6 ++++--
 6 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/app/[lang]/(sys-auth)/forgot-password/form.tsx b/src/app/[lang]/(sys-auth)/forgot-password/form.tsx
index 376f839e..c1f236c7 100644
--- a/src/app/[lang]/(sys-auth)/forgot-password/form.tsx
+++ b/src/app/[lang]/(sys-auth)/forgot-password/form.tsx
@@ -69,7 +69,6 @@ export default function ForgotPasswordForm({ dictionary }: { dictionary: TDictio
             autoComplete="email"
             autoCorrect="off"
             disabled={isDisabled}
-            form={form}
             name="email"
           />
         </div>
diff --git a/src/app/[lang]/(sys-auth)/reset-password/[token]/form.tsx b/src/app/[lang]/(sys-auth)/reset-password/[token]/form.tsx
index 859b53d8..1425ef36 100644
--- a/src/app/[lang]/(sys-auth)/reset-password/[token]/form.tsx
+++ b/src/app/[lang]/(sys-auth)/reset-password/[token]/form.tsx
@@ -59,7 +59,6 @@ export default function ResetPasswordForm({ dictionary, token }: { dictionary: T
             type="password-eye-slash"
             placeholder={dictionary.password}
             autoComplete="new-password"
-            form={form}
           />
         </div>
         <div className="grid gap-1">
@@ -71,7 +70,6 @@ export default function ResetPasswordForm({ dictionary, token }: { dictionary: T
             type="password"
             placeholder={dictionary.passwordConfirmation}
             autoComplete="new-password"
-            form={form}
           />
         </div>
         <Button type="submit" isLoading={isLoading}>
diff --git a/src/components/auth/login-user-auth-form.tsx b/src/components/auth/login-user-auth-form.tsx
index 5537b477..3df3b73d 100644
--- a/src/components/auth/login-user-auth-form.tsx
+++ b/src/components/auth/login-user-auth-form.tsx
@@ -116,7 +116,6 @@ export function LoginUserAuthForm({ dictionary, searchParams, ...props }: UserAu
             autoComplete="email"
             autoCorrect="off"
             disabled={isLoading}
-            form={form}
             name="email"
           />
         </div>
@@ -130,7 +129,6 @@ export function LoginUserAuthForm({ dictionary, searchParams, ...props }: UserAu
             autoComplete="new-password"
             autoCorrect="off"
             disabled={isLoading}
-            form={form}
             name="password"
           />
         </div>
diff --git a/src/components/auth/register-user-auth-form.tsx b/src/components/auth/register-user-auth-form.tsx
index a927d11e..622a7aa2 100644
--- a/src/components/auth/register-user-auth-form.tsx
+++ b/src/components/auth/register-user-auth-form.tsx
@@ -154,7 +154,6 @@ export function RegisterUserAuthForm({ dictionary, isMinimized, searchParams, ..
               autoComplete="email"
               autoCorrect="off"
               disabled={isLoading || !isMinimized}
-              form={form}
               name="email"
               className={cn({
                 "pointer-events-none": !isMinimized,
@@ -189,7 +188,6 @@ export function RegisterUserAuthForm({ dictionary, isMinimized, searchParams, ..
                 autoComplete="username"
                 autoCorrect="off"
                 disabled={isLoading}
-                form={form}
                 name="username"
               />
             </div>
@@ -203,7 +201,6 @@ export function RegisterUserAuthForm({ dictionary, isMinimized, searchParams, ..
                 autoComplete="new-password"
                 autoCorrect="off"
                 disabled={isLoading}
-                form={form}
                 name="password"
               />
             </div>
@@ -217,7 +214,6 @@ export function RegisterUserAuthForm({ dictionary, isMinimized, searchParams, ..
                 autoComplete="new-password"
                 autoCorrect="off"
                 disabled={isLoading}
-                form={form}
                 name="confirmPassword"
               />
             </div>
diff --git a/src/components/profile/update-account.tsx b/src/components/profile/update-account.tsx
index a0fc2fb3..25e3e8b8 100644
--- a/src/components/profile/update-account.tsx
+++ b/src/components/profile/update-account.tsx
@@ -84,7 +84,6 @@ export default function UpdateAccount({
               placeholder={dictionary.profilePage.profileDetails.username.placeholder}
               type="text"
               disabled={updateUserMutation.isLoading || account.isInitialLoading}
-              form={form}
               name="username"
             />
           </div>
diff --git a/src/components/ui/form-field.tsx b/src/components/ui/form-field.tsx
index 4e826be5..baad8fa4 100644
--- a/src/components/ui/form-field.tsx
+++ b/src/components/ui/form-field.tsx
@@ -1,5 +1,5 @@
 import { HTMLInputTypeAttribute } from "react"
-import { ControllerRenderProps, FieldPath, FieldValues, UseFormReturn } from "react-hook-form"
+import { ControllerRenderProps, FieldPath, FieldValues, useFormContext, UseFormReturn } from "react-hook-form"
 import {
   FormControl,
   FormDescription,
@@ -21,7 +21,7 @@ export interface FormFieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > extends InputWithOmittedProps {
-  form: UseFormReturn<TFieldValues>
+  form?: UseFormReturn<TFieldValues>
   name: TName
   label?: string
   placeholder?: string
@@ -65,6 +65,8 @@ export default function FormField<
   className,
   ...props
 }: FormFieldProps<TFieldValues, TName>) {
+  const formContext = useFormContext<TFieldValues>()
+  form ??= formContext
   return (
     <FormFieldComponent
       control={form.control}