feat: rewrite sign up form with react-hook-form

components/shared/InputField/InputField.tsx

@@ -1,25 +1,26 @@
 import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline'
-import { InputErrorMessage } from 'components'
+import { ErrorMessage } from '@hookform/error-message'
 import { useInputField } from './useInputField'
+import { InputErrorMessage } from 'components'
 import { InputFieldProps } from './types.d'
-import { ErrorMessage } from 'formik'
 import { useTranslate } from 'hooks'
 import {
  ExclamationCircleIcon,
  CheckCircleIcon,
 } from '@heroicons/react/20/solid'
 
 const InputField: React.FC<InputFieldProps> = (props) => {
- const { name } = props
+ const { name, type } = props
 
  const {
  passwordShowHandler,
  isPasswordField,
  inputType,
+ register,
  isError,
  isValid,
- field,
- } = useInputField(props)
+ errors,
+ } = useInputField(name, type)
 
  return (
  <div className='min-h-[107px]'>
@@ -32,8 +33,7 @@ const InputField: React.FC<InputFieldProps> = (props) => {
  </label>
  <div className='mt-2 relative'>
  <input
- {...field}
- {...props}
+ {...register(name)}
  className={`block w-full pr-8 appearance-none rounded-md border border-gray-300 p-3 placeholder-gray-400 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm ${
  isError &&
  'border-red-300 text-red-900 placeholder-red-300 focus:border-red-500 focus:ring-red-500'
@@ -77,11 +77,11 @@ const InputField: React.FC<InputFieldProps> = (props) => {
  )}
  </div>
 
- <ErrorMessage name={field.name}>
- {(errorMessage) => {
-  return <InputErrorMessage errorMessage={errorMessage} />
- }}
- </ErrorMessage>
+ <ErrorMessage
+ render={({ message }) => <InputErrorMessage errorMessage={message} />}
+ errors={errors}
+ name={name}
+ />
  </div>
  )
 }

components/shared/InputField/useInputField.ts

@@ -1,14 +1,15 @@
-import { useField } from 'formik'
+import { useFormContext } from 'react-hook-form'
 import { useState } from 'react'
 
-export const useInputField = (data: { name: string; type: string }) => {
- const [inputType, setInputType] = useState(data.type)
- const [field, meta] = useField(data)
+export const useInputField = (name: string, type: string) => {
+ const [inputType, setInputType] = useState(type)
 
- const isValid = meta.touched && !meta.error
- const isError = meta.error && meta.touched
+ const {
+ formState: { errors, touchedFields },
+ register,
+ } = useFormContext()
 
- const isPasswordField = field.name.toLocaleLowerCase().includes('password')
+ const isValid = touchedFields[name] && !errors[name]?.message
 
  const passwordShowHandler = () => {
  if (inputType === 'password') {
@@ -18,11 +19,12 @@ export const useInputField = (data: { name: string; type: string }) => {
  }
 
  return {
+ isPasswordField: type === 'password',
+ isError: !!errors[name]?.message,
  passwordShowHandler,
- isPasswordField,
  inputType,
- isError,
+ register,
+ errors,
  isValid,
- field,
  }
 }

components/sign-up/SignUpForm/SignUpForm.tsx

@@ -1,54 +1,49 @@
 import { SubmitButton, SuccessModal, InputField } from 'components'
 import { useSignUpForm } from './useSignUpForm'
-import { signUpSchema } from 'schemas'
-import { Form, Formik } from 'formik'
+import { FormProvider } from 'react-hook-form'
 
 const SignUpForm = () => {
  const {
- formInitialValues,
  setSignUpSuccess,
  userRegistering,
- submitHandler,
  signUpSuccess,
+ submitHandler,
+ handleSubmit,
+ form,
  t,
  } = useSignUpForm()
 
  return (
- <Formik
- initialValues={formInitialValues}
- validationSchema={signUpSchema}
- onSubmit={submitHandler}
- >
- {() => {
- return (
- <>
- {signUpSuccess && (
- <SuccessModal
- description={t('auth:confirmation-instructions')}
- linkActionText={t('auth:go-to-gmail')}
- title={t('auth:confirmation-sent')}
- setSuccess={setSignUpSuccess}
- isSuccess={signUpSuccess}
- linkAction={true}
- />
- )}
+ <>
+ {signUpSuccess && (
+ <SuccessModal
+ description={t('auth:confirmation-instructions')}
+ linkActionText={t('auth:go-to-gmail')}
+ title={t('auth:confirmation-sent')}
+ setSuccess={setSignUpSuccess}
+ isSuccess={signUpSuccess}
+ linkAction={true}
+ />
+ )}
 
- <Form className='flex flex-col gap-1'>
- <InputField name='username' type='text' />
- <InputField name='email' type='text' />
- <InputField name='password' type='password' />
- <InputField name='confirmPassword' type='password' />
+ <FormProvider {...form}>
+ <form
+ onSubmit={handleSubmit(submitHandler)}
+ className='flex flex-col gap-1'
+ >
+ <InputField name='username' type='text' />
+ <InputField name='email' type='text' />
+ <InputField name='password' type='password' />
+ <InputField name='confirmPassword' type='password' />
 
- <SubmitButton
- disabled={userRegistering}
- title='sign-up'
- styles='mt-4'
- />
- </Form>
- </>
- )
- }}
- </Formik>
+ <SubmitButton
+ disabled={userRegistering}
+ title='sign-up'
+ styles='mt-4'
+ />
+ </form>
+ </FormProvider>
+ </>
  )
 }
 

components/sign-up/SignUpForm/useSignUpForm.ts

@@ -1,7 +1,10 @@
-import type { SignUpFormValues, FormikSubmitHandler } from 'types'
+import { useForm, type SubmitHandler } from 'react-hook-form'
+import { yupResolver } from '@hookform/resolvers/yup'
 import { useTranslation } from 'next-i18next'
+import type { SignUpFormValues } from 'types'
 import { useMutation } from 'react-query'
 import { registerUSer } from 'services'
+import { signUpSchema } from 'schemas'
 import { useState } from 'react'
 
 export const useSignUpForm = () => {
@@ -11,17 +14,20 @@ export const useSignUpForm = () => {
 
  const { t } = useTranslation()
 
- const formInitialValues = {
- confirmPassword: '',
- password: '',
- username: '',
- email: '',
- }
+ const form = useForm({
+ resolver: yupResolver(signUpSchema),
+ defaultValues: {
+ confirmPassword: '',
+ password: '',
+ username: '',
+ email: '',
+ },
+ mode: 'all',
+ })
+
+ const { handleSubmit, reset: resetForm, setError } = form
 
- const submitHandler: FormikSubmitHandler<SignUpFormValues> = (
- values,
- { setFieldError, resetForm }
- ) => {
+ const submitHandler: SubmitHandler<SignUpFormValues> = (values) => {
  mutate(values, {
  onSuccess: () => {
  resetForm()
@@ -30,18 +36,21 @@ export const useSignUpForm = () => {
 
  onError: (error: any) => {
  if (error?.response?.status === 409) {
- setFieldError('email', 'email-exists')
+ setError('email', {
+ message: 'email-exists',
+ })
  }
  },
  })
  }
 
  return {
- formInitialValues,
  setSignUpSuccess,
  userRegistering,
  submitHandler,
  signUpSuccess,
+ handleSubmit,
+ form,
  t,
  }
 }

package.json

@@ -12,6 +12,8 @@
  "dependencies": {
  "@headlessui/react": "^1.7.2",
  "@heroicons/react": "^2.0.11",
+ "@hookform/error-message": "^2.0.1",
+ "@hookform/resolvers": "^3.1.0",
  "@reduxjs/toolkit": "^1.8.6",
  "@tailwindcss/aspect-ratio": "^0.4.2",
  "@tailwindcss/forms": "^0.5.3",
@@ -23,6 +25,7 @@
  "next-i18next": "^12.0.1",
  "react": "18.2.0",
  "react-dom": "18.2.0",
+ "react-hook-form": "^7.44.1",
  "react-lottie": "^1.2.3",
  "react-query": "^3.39.2",
  "react-redux": "^8.0.4",

styles/globals.css

@@ -28,3 +28,10 @@ html {
 ::-webkit-scrollbar-thumb:hover {
  background: #615aea;
 }
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+ -webkit-box-shadow: 0 0 0 30px white inset !important;
+}

types/global.d.ts

@@ -64,6 +64,7 @@ export type Passwords = {
  password: string
 }
 
+// should be deleted
 export type FormikSubmitHandler<Values> = (
  values: Values,
  formikHelpers: FormikHelpers<Values>