refactor: useForm

rharkor · Sep 16, 2023 · ff24cfa · ff24cfa
1 parent 00c0e29
commit ff24cfa
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 12 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}