refactor: usage of useForm hook from react-component-form

components/Application/Application.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import Image from 'next/image'
 import { PlusIcon, MenuIcon, UsersIcon, XIcon } from '@heroicons/react/solid'
-import classNames from 'classnames'
+import classNames from 'clsx'
 import { useMediaQuery } from 'react-responsive'
 import { useSwipeable } from 'react-swipeable'
 

components/Application/ChannelSettings/ChannelSettings.tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router'
 import { useState } from 'react'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
-import classNames from 'classnames'
+import classNames from 'clsx'
 import axios from 'axios'
+import type { HandleUseFormCallback } from 'react-component-form'
 
-import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { FormState } from '../../design/FormState'
 import { useGuildMember } from '../../../contexts/GuildMember'
 import { Input } from '../../design/Input'
@@ -17,6 +17,11 @@ import {
   ChannelWithDefaultChannelId
 } from '../../../models/Channel'
 import { ConfirmPopup } from '../ConfirmPopup'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: channelSchema.name
+}
 
 export interface ChannelSettingsProps {
   channel: Channel
@@ -41,25 +46,19 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
   }
 
   const {
+    handleUseForm,
     fetchState,
     message,
     errors,
-    getErrorTranslation,
-    handleSubmit,
     setFetchState,
-    setMessageTranslationKey
+    setMessage
-  } = useForm({
+  } = useForm(schema)
-    validateSchema: {
+  const { getFirstErrorTranslation } = useFormTranslation()
-      name: channelSchema.name
-    },
-    replaceEmptyStringToNull: true,
-    resetOnSuccess: false
-  })
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       await authentication.api.put(`/channels/${channel.id}`, formData)
-      setInputValues(formData as any)
+      setInputValues(formData)
       await router.push(`/application/${guild.id}/${channel.id}`)
       return null
     } catch (error) {
@@ -91,9 +90,9 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
     } catch (error) {
       setFetchState('error')
       if (axios.isAxiosError(error) && error.response?.status === 400) {
-        setMessageTranslationKey('application:delete-channel-only-one')
+        setMessage('application:delete-channel-only-one')
       } else {
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
@@ -101,7 +100,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
   return (
     <>
       <Form
-        onSubmit={handleSubmit(onSubmit)}
+        onSubmit={handleUseForm(onSubmit)}
         className='my-auto flex flex-col items-center justify-center py-12'
       >
         <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
@@ -114,7 +113,7 @@ export const ChannelSettings: React.FC<ChannelSettingsProps> = (props) => {
                 className='!mt-0'
                 onChange={onChange}
                 value={inputValues.name}
-                error={getErrorTranslation(errors.name)}
+                error={getFirstErrorTranslation(errors.name)}
                 data-cy='channel-name-input'
               />
             </div>

components/Application/Channels/Channel.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { CogIcon } from '@heroicons/react/solid'

components/Application/ConfirmPopup/ConfirmPopup.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image'
 import { useState } from 'react'
 import useTranslation from 'next-translate/useTranslation'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { Loader } from '../../design/Loader'
 

components/Application/CreateChannel/CreateChannel.tsx

@@ -1,32 +1,32 @@
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { useAuthentication } from '../../../tools/authentication'
-import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { Input } from '../../design/Input'
 import { Main } from '../../design/Main'
 import { Button } from '../../design/Button'
 import { FormState } from '../../design/FormState'
 import { Channel, channelSchema } from '../../../models/Channel'
 import { useGuildMember } from '../../../contexts/GuildMember'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: channelSchema.name
+}
 
 export const CreateChannel: React.FC = () => {
   const { t } = useTranslation()
   const router = useRouter()
   const { guild } = useGuildMember()
 
-  const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
+  const { handleUseForm, fetchState, message, errors } = useForm(schema)
-    useForm({
+  const { getFirstErrorTranslation } = useFormTranslation()
-      validateSchema: {
-        name: channelSchema.name
-      },
-      resetOnSuccess: true
-    })
 
   const { authentication } = useAuthentication()
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       const { data: channel } = await authentication.api.post<Channel>(
         `/guilds/${guild.id}/channels`,
@@ -44,13 +44,13 @@ export const CreateChannel: React.FC = () => {
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
+      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
         <Input
           type='text'
           placeholder={t('common:name')}
           name='name'
           label={t('common:name')}
-          error={getErrorTranslation(errors.name)}
+          error={getFirstErrorTranslation(errors.name)}
           data-cy='channel-name-input'
         />
         <Button

components/Application/CreateGuild/CreateGuild.tsx

@@ -1,33 +1,33 @@
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
 import { AxiosResponse } from 'axios'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { useAuthentication } from '../../../tools/authentication'
-import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { GuildComplete, guildSchema } from '../../../models/Guild'
 import { Input } from '../../design/Input'
 import { Main } from '../../design/Main'
 import { Button } from '../../design/Button'
 import { FormState } from '../../design/FormState'
 import { Textarea } from '../../design/Textarea'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: guildSchema.name,
+  description: guildSchema.description
+}
 
 export const CreateGuild: React.FC = () => {
   const { t } = useTranslation()
   const router = useRouter()
 
-  const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
+  const { handleUseForm, fetchState, message, errors } = useForm(schema as any)
-    useForm({
+  const { getFirstErrorTranslation } = useFormTranslation()
-      validateSchema: {
-        name: guildSchema.name,
-        description: guildSchema.description
-      },
-      resetOnSuccess: true
-    })
 
   const { authentication } = useAuthentication()
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<any> = async (formData) => {
     try {
       const { data } = await authentication.api.post<
         any,
@@ -47,13 +47,13 @@ export const CreateGuild: React.FC = () => {
 
   return (
     <Main>
-      <Form className='w-4/6 max-w-xs' onSubmit={handleSubmit(onSubmit)}>
+      <Form className='w-4/6 max-w-xs' onSubmit={handleUseForm(onSubmit)}>
         <Input
           type='text'
           placeholder={t('common:name')}
           name='name'
           label={t('common:name')}
-          error={getErrorTranslation(errors.name)}
+          error={getFirstErrorTranslation(errors.name)}
         />
         <Textarea
           label='Description'
@@ -64,7 +64,11 @@ export const CreateGuild: React.FC = () => {
           {t('application:create')}
         </Button>
       </Form>
-      <FormState id='message' state={fetchState} message={message} />
+      <FormState
+        id='message'
+        state={fetchState}
+        message={message != null ? t(message) : undefined}
+      />
     </Main>
   )
 }

components/Application/GuildSettings/GuildSettings.tsx

@@ -3,11 +3,11 @@ import { useRouter } from 'next/router'
 import { useState } from 'react'
 import { Type } from '@sinclair/typebox'
 import { PhotographIcon } from '@heroicons/react/solid'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
-import classNames from 'classnames'
+import classNames from 'clsx'
+import type { HandleUseFormCallback } from 'react-component-form'
 
-import { HandleSubmitCallback, useForm } from '../../../hooks/useForm'
 import { guildSchema } from '../../../models/Guild'
 import { FormState } from '../../design/FormState'
 import { useGuildMember } from '../../../contexts/GuildMember'
@@ -16,6 +16,12 @@ import { Input } from '../../design/Input'
 import { Button } from '../../design/Button'
 import { useAuthentication } from '../../../tools/authentication'
 import { ConfirmPopup } from '../ConfirmPopup'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: guildSchema.name,
+  description: Type.Optional(guildSchema.description)
+}
 
 export const GuildSettings: React.FC = () => {
   const { t } = useTranslation()
@@ -35,26 +41,19 @@ export const GuildSettings: React.FC = () => {
   }
 
   const {
+    handleUseForm,
     fetchState,
     message,
     errors,
-    getErrorTranslation,
-    handleSubmit,
     setFetchState,
-    setMessageTranslationKey
+    setMessage
-  } = useForm({
+  } = useForm(schema as any)
-    validateSchema: {
+  const { getFirstErrorTranslation } = useFormTranslation()
-      name: guildSchema.name,
-      description: Type.Optional(guildSchema.description)
-    },
-    replaceEmptyStringToNull: true,
-    resetOnSuccess: false
-  })
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<any> = async (formData) => {
     try {
       await authentication.api.put(`/guilds/${guild.id}`, formData)
-      setInputValues(formData as any)
+      setInputValues(formData as unknown as any)
       return {
         type: 'success',
         value: 'application:saved-information'
@@ -92,7 +91,7 @@ export const GuildSettings: React.FC = () => {
         setFetchState('idle')
       } catch (error) {
         setFetchState('error')
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
@@ -102,7 +101,7 @@ export const GuildSettings: React.FC = () => {
       await authentication.api.delete(`/guilds/${guild.id}`)
     } catch (error) {
       setFetchState('error')
-      setMessageTranslationKey('errors:server-error')
+      setMessage('errors:server-error')
     }
   }
 
@@ -112,14 +111,14 @@ export const GuildSettings: React.FC = () => {
       await router.push('/application')
     } catch (error) {
       setFetchState('error')
-      setMessageTranslationKey('errors:server-error')
+      setMessage('errors:server-error')
     }
   }
 
   return (
     <>
       <Form
-        onSubmit={handleSubmit(onSubmit)}
+        onSubmit={handleUseForm(onSubmit)}
         className='my-auto flex flex-col items-center justify-center py-12'
       >
         {member.isOwner && (
@@ -160,7 +159,7 @@ export const GuildSettings: React.FC = () => {
                   className='!mt-0'
                   onChange={onChange}
                   value={inputValues.name}
-                  error={getErrorTranslation(errors.name)}
+                  error={getFirstErrorTranslation(errors.name)}
                   data-cy='guild-name-input'
                 />
                 <Textarea
@@ -204,7 +203,11 @@ export const GuildSettings: React.FC = () => {
           </div>
           <FormState
             state={fetchState}
-            message={getErrorTranslation(errors.description) ?? message}
+            message={
+              message != null
+                ? t(message)
+                : getFirstErrorTranslation(errors.email)
+            }
           />
         </div>
       </Form>

components/Application/JoinGuildsPublic/GuildPublic.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
 import useTranslation from 'next-translate/useTranslation'
-import classNames from 'classnames'
+import classNames from 'clsx'
 import axios from 'axios'
 
 import { Emoji } from '../../Emoji'

components/Application/PopupGuild/PopupGuild.tsx

@@ -1,6 +1,6 @@
 import useTranslation from 'next-translate/useTranslation'
 import { PlusSmIcon, ArrowDownIcon } from '@heroicons/react/solid'
-import classNames from 'classnames'
+import classNames from 'clsx'
 import Image from 'next/image'
 
 import { PopupGuildCard } from './PopupGuildCard'

components/Application/SendMessage/SendMessage.tsx

@@ -1,7 +1,7 @@
 import { useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import TextareaAutosize from 'react-textarea-autosize'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { GuildsChannelsPath } from '..'
 import { useAuthentication } from '../../../tools/authentication'

components/Application/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { ApplicationProps } from '..'
 

components/Application/UserSettings/UserSettings.tsx

@@ -1,11 +1,12 @@
 import Image from 'next/image'
 import useTranslation from 'next-translate/useTranslation'
 import { useState, useMemo } from 'react'
-import { Form } from 'react-component-form'
+import { Form, useForm } from 'react-component-form'
 import { EyeIcon, PhotographIcon } from '@heroicons/react/solid'
 import { Type } from '@sinclair/typebox'
 import axios from 'axios'
 import Link from 'next/link'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { Input } from '../../design/Input'
 import { Checkbox } from '../../design/Checkbox'
@@ -16,10 +17,20 @@ import { Language } from '../../Header/Language'
 import { useAuthentication } from '../../../tools/authentication'
 import { Button } from '../../design/Button'
 import { FormState } from '../../design/FormState'
-import { useForm, HandleSubmitCallback } from '../../../hooks/useForm'
 import { userSchema } from '../../../models/User'
 import { userSettingsSchema } from '../../../models/UserSettings'
 import { ProviderOAuth, providers } from '../../../models/OAuth'
+import { useFormTranslation } from '../../../hooks/useFormTranslation'
+
+const schema = {
+  name: userSchema.name,
+  status: Type.Optional(userSchema.status),
+  email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
+  website: Type.Optional(userSchema.website),
+  biography: Type.Optional(userSchema.biography),
+  isPublicGuilds: userSettingsSchema.isPublicGuilds,
+  isPublicEmail: userSettingsSchema.isPublicEmail
+}
 
 export const UserSettings: React.FC = () => {
   const { user, setUser, authentication } = useAuthentication()
@@ -35,32 +46,20 @@ export const UserSettings: React.FC = () => {
   })
 
   const {
+    handleUseForm,
     fetchState,
     setFetchState,
     message,
-    setMessageTranslationKey,
+    setMessage,
-    errors,
+    errors
-    getErrorTranslation,
+  } = useForm(schema)
-    handleSubmit
+  const { getFirstErrorTranslation } = useFormTranslation()
-  } = useForm({
-    validateSchema: {
-      name: userSchema.name,
-      status: Type.Optional(userSchema.status),
-      email: Type.Optional(Type.Union([userSchema.email, Type.Null()])),
-      website: Type.Optional(userSchema.website),
-      biography: Type.Optional(userSchema.biography),
-      isPublicGuilds: userSettingsSchema.isPublicGuilds,
-      isPublicEmail: userSettingsSchema.isPublicEmail
-    },
-    replaceEmptyStringToNull: true,
-    resetOnSuccess: false
-  })
 
   const hasAllProviders = useMemo(() => {
     return providers.every((provider) => user.strategies.includes(provider))
   }, [user.strategies])
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       const { isPublicGuilds, isPublicEmail, ...userData } = formData
       const userSettings = { isPublicEmail, isPublicGuilds }
@@ -68,7 +67,7 @@ export const UserSettings: React.FC = () => {
         `/users/current?redirectURI=${window.location.origin}/authentication/signin`,
         userData
       )
-      setInputValues(formData as any)
+      setInputValues(formData as unknown as any)
       const hasEmailChanged = user.email !== userCurrentData.user.email
       if (hasEmailChanged) {
         return {
@@ -165,7 +164,7 @@ export const UserSettings: React.FC = () => {
         setFetchState('idle')
       } catch (error) {
         setFetchState('error')
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
@@ -176,7 +175,7 @@ export const UserSettings: React.FC = () => {
       await authentication.signoutServerSide()
     } catch (error) {
       setFetchState('error')
-      setMessageTranslationKey('errors:server-error')
+      setMessage('errors:server-error')
     }
   }
 
@@ -195,10 +194,10 @@ export const UserSettings: React.FC = () => {
             )
           }
         })
-        setMessageTranslationKey('application:success-deleted-provider')
+        setMessage('application:success-deleted-provider')
       } catch (error) {
         setFetchState('error')
-        setMessageTranslationKey('errors:server-error')
+        setMessage('errors:server-error')
       }
     }
   }
@@ -217,7 +216,7 @@ export const UserSettings: React.FC = () => {
 
   return (
     <Form
-      onSubmit={handleSubmit(onSubmit)}
+      onSubmit={handleUseForm(onSubmit)}
       className='my-auto flex flex-col items-center justify-center py-12 lg:min-w-[875px]'
     >
       <div className='flex w-full flex-col items-center justify-center sm:w-fit lg:flex-row'>
@@ -257,7 +256,7 @@ export const UserSettings: React.FC = () => {
               className='!mt-0'
               onChange={onChange}
               value={inputValues.name ?? ''}
-              error={getErrorTranslation(errors.name)}
+              error={getFirstErrorTranslation(errors.name)}
             />
             <Input
               name='status'
@@ -266,7 +265,7 @@ export const UserSettings: React.FC = () => {
               className='!mt-4'
               onChange={onChange}
               value={inputValues.status ?? ''}
-              error={getErrorTranslation(errors.status)}
+              error={getFirstErrorTranslation(errors.status)}
             />
           </div>
         </div>
@@ -279,7 +278,7 @@ export const UserSettings: React.FC = () => {
             placeholder='Email'
             onChange={onChange}
             value={inputValues.email ?? ''}
-            error={getErrorTranslation(errors.email)}
+            error={getFirstErrorTranslation(errors.email)}
           />
           <Checkbox
             name='isPublicEmail'
@@ -294,7 +293,7 @@ export const UserSettings: React.FC = () => {
             placeholder={t('application:website')}
             onChange={onChange}
             value={inputValues.website ?? ''}
-            error={getErrorTranslation(errors.website)}
+            error={getFirstErrorTranslation(errors.website)}
           />
           <Textarea
             name='biography'
@@ -376,7 +375,10 @@ export const UserSettings: React.FC = () => {
             {t('application:signout')}
           </Button>
         </div>
-        <FormState state={fetchState} message={message} />
+        <FormState
+          state={fetchState}
+          message={message != null ? t(message) : undefined}
+        />
       </div>
     </Form>
   )

components/Authentication/Authentication.tsx

@@ -1,8 +1,11 @@
+import { useMemo } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 import { useTheme } from 'next-themes'
 import axios from 'axios'
+import { useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { Main } from '../design/Main'
 import { Input } from '../design/Input'
@@ -15,8 +18,8 @@ import {
   Tokens,
   Authentication as AuthenticationClass
 } from '../../tools/authentication'
-import { useForm, HandleSubmitCallback } from '../../hooks/useForm'
 import { AuthenticationSocialMedia } from './AuthenticationSocialMedia'
+import { useFormTranslation } from '../../hooks/useFormTranslation'
 
 export interface AuthenticationProps {
   mode: 'signup' | 'signin'
@@ -29,23 +32,28 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
   const { lang, t } = useTranslation()
   const { theme } = useTheme()
 
-  const { errors, fetchState, message, getErrorTranslation, handleSubmit } =
+  const schema = useMemo(() => {
-    useForm({
+    return {
-      validateSchema: {
       ...(mode === 'signup' && { name: userSchema.name }),
       email: userSchema.email,
       password: userSchema.password
-      },
+    }
-      resetOnSuccess: true
+  }, [mode])
-    })
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const { handleUseForm, errors, fetchState, message } = useForm(schema)
+  const { getFirstErrorTranslation } = useFormTranslation()
+
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (
+    formData,
+    formElement
+  ) => {
     if (mode === 'signup') {
       try {
         await api.post(
           `/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
           { ...formData, language: lang, theme }
         )
+        formElement.reset()
         return {
           type: 'success',
           value: 'authentication:success-signup'
@@ -97,14 +105,14 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
       <div className='pt-8 text-center font-paragraph text-lg'>
         {t('authentication:or')}
       </div>
-      <AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
+      <AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
         {mode === 'signup' && (
           <Input
             type='text'
             placeholder={t('common:name')}
             name='name'
             label={t('common:name')}
-            error={getErrorTranslation(errors.name)}
+            error={getFirstErrorTranslation(errors.name)}
           />
         )}
         <Input
@@ -112,7 +120,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           placeholder='Email'
           name='email'
           label='Email'
-          error={getErrorTranslation(errors.email)}
+          error={getFirstErrorTranslation(errors.email)}
         />
         <Input
           type='password'
@@ -120,7 +128,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           name='password'
           label={t('authentication:password')}
           showForgotPassword={mode === 'signin'}
-          error={getErrorTranslation(errors.password)}
+          error={getFirstErrorTranslation(errors.password)}
         />
         <Button data-cy='submit' className='mt-6 w-full' type='submit'>
           {t('authentication:submit')}
@@ -141,7 +149,11 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           </Link>
         </p>
       </AuthenticationForm>
-      <FormState id='message' state={fetchState} message={message} />
+      <FormState
+        id='message'
+        state={fetchState}
+        message={message != null ? t(message) : undefined}
+      />
     </Main>
   )
 }

components/Authentication/AuthenticationForm.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 import { Form, FormProps } from 'react-component-form'
 
 export const AuthenticationForm: React.FC<FormProps> = (props) => {

components/Header/Language/Language.tsx

@@ -1,11 +1,12 @@
-import { useCallback, useEffect, useState, useRef } from 'react'
+import { useCallback, useState, useRef } from 'react'
 import useTranslation from 'next-translate/useTranslation'
 import setLanguage from 'next-translate/setLanguage'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
+import i18n from '../../../i18n.json'
 import { Arrow } from './Arrow'
 import { LanguageFlag } from './LanguageFlag'
-import i18n from '../../../i18n.json'
+import { useClickOutsideAlerter } from '../../../hooks/useClickOutsideAlerter'
 
 export interface LanguageProps {
   className?: string
@@ -21,31 +22,19 @@ export const Language: React.FC<LanguageProps> = (props) => {
     setHiddenMenu((oldHiddenMenu) => !oldHiddenMenu)
   }, [])
 
-  useEffect(() => {
+  useClickOutsideAlerter(languageClickRef, () => setHiddenMenu(true))
-    const handleClickEvent = (event: MouseEvent): void => {
-      if (languageClickRef.current == null || event.target == null) {
-        return
-      }
-      if (!languageClickRef.current.contains(event.target as Node)) {
-        setHiddenMenu(true)
-      }
-    }
-
-    window.document.addEventListener('click', handleClickEvent)
-
-    return () => {
-      return window.removeEventListener('click', handleClickEvent)
-    }
-  }, [])
 
   const handleLanguage = async (language: string): Promise<void> => {
     await setLanguage(language)
+    handleHiddenMenu()
   }
 
   return (
-    <div className='relative flex cursor-pointer flex-col items-center justify-center'>
     <div
+      className='relative flex cursor-pointer flex-col items-center justify-center'
       ref={languageClickRef}
+    >
+      <div
         data-cy='language-click'
         className='mr-5 flex items-center'
         onClick={handleHiddenMenu}

components/design/Button/Button.tsx

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 const className =
   'py-2 px-6 font-paragraph rounded-lg bg-transparent border  hover:text-white dark:hover:text-black fill-current stroke-current transform transition-colors duration-300 ease-in-out focus:outline-none focus:text-white dark:focus:text-black'

components/design/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
   className?: string

components/design/FormState/FormState.tsx

@@ -1,7 +1,7 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 import useTranslation from 'next-translate/useTranslation'
+import type { FetchState as FormStateType } from 'react-component-form'
 
-import { FetchState as FormStateType } from '../../../hooks/useFetchState'
 import { Loader } from '../Loader'
 
 export interface FormStateProps extends React.ComponentPropsWithoutRef<'div'> {

components/design/IconButton/IconButton.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export interface IconButtonProps
   extends React.ComponentPropsWithoutRef<'button'> {}

components/design/IconLink/IconLink.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export interface IconLinkProps {
   selected?: boolean

components/design/Input/Input.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { FormState } from '../FormState'
 

components/design/Main/Main.tsx

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export interface MainProps {
   className?: string

components/design/SocialMediaButton/SocialMediaButton.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import Image from 'next/image'
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 import { ProviderOAuth } from '../../../models/OAuth'
 

cypress/component/hooks/useForm/getErrorTranslationKey.cy.ts

@@ -1,71 +0,0 @@
-import type { ErrorObject } from 'ajv'
-
-import { getErrorTranslationKey } from '../../../../hooks/useForm/getErrorTranslationKey'
-
-const errorObject: ErrorObject = {
-  instancePath: '/path',
-  keyword: 'keyword',
-  params: {},
-  schemaPath: '/path'
-}
-
-describe('hooks/useForm/getErrorTranslationKey', () => {
-  it('returns `errors:invalid` with unknown keyword', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'unknownkeyword'
-      })
-    ).equal('errors:invalid')
-  })
-
-  it('returns `errors:invalid` with format != email', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'format',
-        params: { format: 'email' }
-      })
-    ).equal('errors:email')
-  })
-
-  it('returns `errors:email` with format = email', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'format',
-        params: { format: 'email' }
-      })
-    ).equal('errors:email')
-  })
-
-  it('returns `errors:required` with minLength and limit = 1', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'minLength',
-        params: { limit: 1 }
-      })
-    ).equal('errors:required')
-  })
-
-  it('returns `errors:minLength` with minLength and limit > 1', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'minLength',
-        params: { limit: 5 }
-      })
-    ).equal('errors:minLength')
-  })
-
-  it('returns `errors:maxLength` with maxLength', () => {
-    expect(
-      getErrorTranslationKey({
-        ...errorObject,
-        keyword: 'maxLength',
-        params: { limit: 5 }
-      })
-    ).equal('errors:maxLength')
-  })
-})

cypress/component/hooks/useForm/handleCheckboxBoolean.cy.ts

@@ -1,22 +0,0 @@
-import { Type } from '@sinclair/typebox'
-
-import { handleCheckboxBoolean } from '../../../../hooks/useForm/handleCheckboxBoolean'
-
-const schema = Type.Object({
-  myBoolean: Type.Boolean(),
-  myString: Type.String()
-})
-
-describe('hooks/useForm/handleCheckboxBoolean', () => {
-  it('should convert all checkbox property to boolean', () => {
-    const object = {
-      myBoolean: 'on',
-      myString: 'on'
-    }
-    const result = handleCheckboxBoolean(object, schema)
-    expect(result).deep.equal({
-      myBoolean: true,
-      myString: 'on'
-    })
-  })
-})

cypress/component/hooks/useForm/replaceEmptyStringInObjectToNull.cy.ts

@@ -1,20 +0,0 @@
-import { replaceEmptyStringInObjectToNull } from '../../../../hooks/useForm/replaceEmptyStringInObjectToNull'
-
-describe('hooks/useForm/replaceEmptyStringInObjectToNull', () => {
-  it('should replace empty string in object to null except for required properties', () => {
-    expect(
-      replaceEmptyStringInObjectToNull(
-        {
-          foo: '',
-          bar: 'bar',
-          baz: ''
-        },
-        ['baz']
-      )
-    ).deep.equal({
-      foo: null,
-      bar: 'bar',
-      baz: ''
-    })
-  })
-})

generators/component/Component.tsx.hbs

@@ -1,4 +1,4 @@
-import classNames from 'classnames'
+import classNames from 'clsx'
 
 export interface {{ properCase name }}Props {
   className?: string

hooks/useClickOutsideAlerter.ts

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+export const useClickOutsideAlerter = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void
+): void => {
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent): void => {
+      if (
+        event.target != null &&
+        ref.current != null &&
+        !ref.current.contains(event.target as Node)
+      ) {
+        callback()
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [ref, callback])
+}

hooks/useFetchState.ts

@@ -1,15 +0,0 @@
-import { useState } from 'react'
-
-export const fetchState = ['idle', 'loading', 'error', 'success'] as const
-
-export type FetchState = typeof fetchState[number]
-
-export const useFetchState = (
-  initialFetchState: FetchState = 'idle'
-): [
-  fetchState: FetchState,
-  setFetchState: React.Dispatch<React.SetStateAction<FetchState>>
-] => {
-  const [fetchState, setFetchState] = useState<FetchState>(initialFetchState)
-  return [fetchState, setFetchState]
-}

hooks/useForm/getErrorTranslationKey.ts

@@ -1,19 +0,0 @@
-import type { ErrorObject } from 'ajv'
-
-const knownErrorKeywords = ['minLength', 'maxLength', 'format']
-
-export const getErrorTranslationKey = (error: ErrorObject): string => {
-  if (knownErrorKeywords.includes(error?.keyword)) {
-    if (error.keyword === 'minLength' && error.params.limit === 1) {
-      return 'errors:required'
-    }
-    if (error.keyword === 'format') {
-      if (error.params.format === 'email') {
-        return 'errors:email'
-      }
-      return 'errors:invalid'
-    }
-    return `errors:${error.keyword}`
-  }
-  return 'errors:invalid'
-}

hooks/useForm/handleCheckboxBoolean.ts

@@ -1,25 +0,0 @@
-import type { TObject } from '@sinclair/typebox'
-
-import type { ObjectAny } from '../../tools/types'
-
-export const handleCheckboxBoolean = (
-  object: ObjectAny,
-  validateSchemaObject: TObject<ObjectAny>
-): ObjectAny => {
-  const booleanProperties: string[] = []
-  for (const property in validateSchemaObject.properties) {
-    const rule = validateSchemaObject.properties[property]
-    if (rule.type === 'boolean') {
-      booleanProperties.push(property)
-    }
-  }
-  for (const booleanProperty of booleanProperties) {
-    if (object[booleanProperty] == null) {
-      object[booleanProperty] =
-        validateSchemaObject.properties[booleanProperty].default
-    } else {
-      object[booleanProperty] = object[booleanProperty] === 'on'
-    }
-  }
-  return object
-}

hooks/useForm/index.ts

@@ -1 +0,0 @@
-export * from './useForm'

hooks/useForm/replaceEmptyStringInObjectToNull.ts

@@ -1,19 +0,0 @@
-import type { ObjectAny } from '../../tools/types'
-
-export const replaceEmptyStringInObjectToNull = (
-  object: ObjectAny,
-  required: string[] = []
-): ObjectAny => {
-  return Object.fromEntries(
-    Object.entries(object).map(([key, value]) => {
-      if (
-        typeof value === 'string' &&
-        value.length === 0 &&
-        !required.includes(key)
-      ) {
-        return [key, null]
-      }
-      return [key, value]
-    })
-  )
-}

hooks/useForm/useForm.ts

@@ -1,134 +0,0 @@
-import { useMemo, useState } from 'react'
-import useTranslation from 'next-translate/useTranslation'
-import { Type } from '@sinclair/typebox'
-import type { HandleForm } from 'react-component-form'
-import type { ErrorObject } from 'ajv'
-
-import { FetchState, useFetchState } from '../useFetchState'
-import { ajv } from '../../tools/ajv'
-import { getErrorTranslationKey } from './getErrorTranslationKey'
-import { replaceEmptyStringInObjectToNull } from './replaceEmptyStringInObjectToNull'
-import type { ObjectAny } from '../../tools/types'
-import { handleCheckboxBoolean } from './handleCheckboxBoolean'
-
-interface Errors {
-  [key: string]: ErrorObject<string, any> | null | undefined
-}
-
-const findError = (
-  field: string
-): ((value: ErrorObject, index: number, object: ErrorObject[]) => boolean) => {
-  return (validationError) => validationError.instancePath === field
-}
-
-export type GetErrorTranslation = (error?: ErrorObject | null) => string | null
-
-export interface UseFormOptions {
-  validateSchema: { [key: string]: any }
-  replaceEmptyStringToNull?: boolean
-  resetOnSuccess?: boolean
-}
-
-export type HandleSubmit = (callback: HandleSubmitCallback) => HandleForm
-
-interface Message {
-  type: 'error' | 'success'
-  value: string
-}
-
-export type HandleSubmitCallback = (
-  formData: ObjectAny,
-  formElement: HTMLFormElement
-) => Promise<Message | null>
-
-export interface UseFormResult {
-  message: string | null
-  setMessageTranslationKey: React.Dispatch<
-    React.SetStateAction<string | undefined>
-  >
-  fetchState: FetchState
-  setFetchState: React.Dispatch<React.SetStateAction<FetchState>>
-  getErrorTranslation: GetErrorTranslation
-  handleSubmit: HandleSubmit
-  errors: Errors
-}
-
-export const useForm = (options: UseFormOptions): UseFormResult => {
-  const {
-    validateSchema,
-    replaceEmptyStringToNull = false,
-    resetOnSuccess = false
-  } = options
-  const { t } = useTranslation()
-  const [fetchState, setFetchState] = useFetchState()
-  const [messageTranslationKey, setMessageTranslationKey] = useState<
-    string | undefined
-  >(undefined)
-  const [errors, setErrors] = useState<Errors>({})
-
-  const validateSchemaObject = useMemo(() => {
-    return Type.Object(validateSchema)
-  }, [validateSchema])
-
-  const validate = useMemo(() => {
-    return ajv.compile(validateSchemaObject)
-  }, [validateSchemaObject])
-
-  const getErrorTranslation = (error?: ErrorObject | null): string | null => {
-    if (error != null) {
-      return t(getErrorTranslationKey(error)).replace(
-        '{expected}',
-        error?.params?.limit
-      )
-    }
-    return null
-  }
-
-  const handleSubmit: HandleSubmit = (callback) => {
-    return async (formData: ObjectAny, formElement) => {
-      setErrors({})
-      setMessageTranslationKey(undefined)
-      if (replaceEmptyStringToNull) {
-        formData = replaceEmptyStringInObjectToNull(
-          formData,
-          validateSchemaObject.required
-        )
-      }
-      formData = handleCheckboxBoolean(formData, validateSchemaObject)
-      const isValid = validate(formData)
-      if (!isValid) {
-        setFetchState('error')
-        const errors: Errors = {}
-        for (const property in validateSchemaObject.properties) {
-          errors[property] = validate.errors?.find(findError(`/${property}`))
-        }
-        setErrors(errors)
-      } else {
-        setErrors({})
-        setFetchState('loading')
-        const message = await callback(formData, formElement)
-        if (message != null) {
-          setMessageTranslationKey(message.value)
-          if (message.type === 'success') {
-            setFetchState('success')
-            if (resetOnSuccess) {
-              formElement.reset()
-            }
-          } else {
-            setFetchState('error')
-          }
-        }
-      }
-    }
-  }
-
-  return {
-    getErrorTranslation,
-    errors,
-    fetchState,
-    setFetchState,
-    handleSubmit,
-    message: messageTranslationKey != null ? t(messageTranslationKey) : null,
-    setMessageTranslationKey
-  }
-}

hooks/useFormTranslation.ts

@@ -0,0 +1,60 @@
+import useTranslation from 'next-translate/useTranslation'
+import type { Error } from 'react-component-form'
+
+const knownErrorKeywords = ['minLength', 'maxLength', 'format']
+
+const getErrorTranslationKey = (error: Error): string => {
+  if (knownErrorKeywords.includes(error?.keyword)) {
+    if (
+      error.keyword === 'minLength' &&
+      typeof error.data === 'string' &&
+      error.data.length === 0
+    ) {
+      return 'errors:required'
+    }
+    if (error.keyword === 'format') {
+      if (error.params.format === 'email') {
+        return 'errors:invalid-email'
+      }
+      return 'errors:invalid'
+    }
+    return `errors:${error.keyword}`
+  }
+  return 'errors:invalid'
+}
+
+export type GetErrorTranslation = (
+  error: Error | undefined
+) => string | undefined
+
+export type GetFirstErrorTranslation = (
+  errors: Error[] | undefined
+) => string | undefined
+
+export interface UseFormTranslationResult {
+  getErrorTranslation: GetErrorTranslation
+  getFirstErrorTranslation: GetFirstErrorTranslation
+}
+
+export const useFormTranslation = (): UseFormTranslationResult => {
+  const { t } = useTranslation()
+
+  const getErrorTranslation: GetErrorTranslation = (error) => {
+    if (error != null) {
+      return t(getErrorTranslationKey(error)).replace(
+        '{expected}',
+        error?.params?.limit
+      )
+    }
+    return undefined
+  }
+
+  const getFirstErrorTranslation: GetFirstErrorTranslation = (errors) => {
+    if (errors != null) {
+      return getErrorTranslation(errors[0])
+    }
+    return undefined
+  }
+
+  return { getFirstErrorTranslation, getErrorTranslation }
+}

hooks/usePagination.ts

@@ -1,7 +1,7 @@
 import { useState, useRef, useCallback } from 'react'
 import { AxiosInstance } from 'axios'
+import type { FetchState } from 'react-component-form'
 
-import { FetchState } from './useFetchState'
 import {
   CacheKey,
   getPaginationCache,

locales/en/errors.json

@@ -7,6 +7,6 @@
   "required": "Oops, this field is required 🙈.",
   "minLength": "The field must contain at least {expected} characters.",
   "maxLength": "The field must contain at most {expected} characters.",
-  "email": "Mmm… It seems that this email is not valid 🤔.",
+  "invalid-email": "Mmm… It seems that this email is not valid 🤔.",
   "invalid": "Invalid value."
 }

locales/fr/errors.json

@@ -7,6 +7,6 @@
   "required": "Oups, ce champ est obligatoire 🙈.",
   "minLength": "Le champ doit contenir au moins {expected} caractères.",
   "maxLength": "Le champ doit contenir au plus {expected} caractères.",
-  "email": "Mmm… Il semblerait que cet email ne soit pas valide 🤔.",
+  "invalid-email": "Mmm… Il semblerait que cet email ne soit pas valide 🤔.",
   "invalid": "Valeur invalide."
 }

models/Guild.ts

@@ -8,7 +8,7 @@ export const guildSchema = {
   id,
   name: Type.String({ minLength: 1, maxLength: 30 }),
   icon: Type.Union([Type.String({ format: 'uri-reference' }), Type.Null()]),
-  description: Type.Union([Type.String({ maxLength: 160 }), Type.Null()]),
+  description: Type.String({ maxLength: 160 }),
   createdAt: date.createdAt,
   updatedAt: date.updatedAt
 }

package.json

@@ -36,20 +36,18 @@
     "@fontsource/roboto": "4.5.8",
     "@heroicons/react": "1.0.6",
     "@sinclair/typebox": "0.24.28",
-    "ajv": "8.11.0",
-    "ajv-formats": "2.1.1",
     "axios": "0.26.1",
-    "classnames": "2.3.1",
+    "clsx": "1.2.1",
     "date-and-time": "2.4.1",
     "emoji-mart": "3.0.1",
-    "katex": "0.16.0",
+    "katex": "0.16.1",
     "next": "12.2.5",
     "next-pwa": "5.6.0",
     "next-themes": "0.2.0",
     "next-translate": "1.5.0",
     "pretty-bytes": "6.0.0",
     "react": "18.2.0",
-    "react-component-form": "3.0.1",
+    "react-component-form": "3.1.0",
     "react-dom": "18.2.0",
     "react-infinite-scroll-component": "6.1.0",
     "react-markdown": "8.0.3",
@@ -69,31 +67,31 @@
     "universal-cookie": "4.0.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.0.3",
+    "@commitlint/cli": "17.1.1",
-    "@commitlint/config-conventional": "17.0.3",
+    "@commitlint/config-conventional": "17.1.0",
     "@lhci/cli": "0.9.0",
     "@saithodev/semantic-release-backmerge": "2.1.2",
     "@semantic-release/git": "10.0.1",
     "@types/emoji-mart": "3.0.9",
     "@types/hast": "2.3.4",
     "@types/katex": "0.14.0",
-    "@types/node": "18.7.11",
+    "@types/node": "18.7.13",
     "@types/react": "18.0.17",
     "@types/react-responsive": "8.0.5",
-    "@types/react-syntax-highlighter": "15.5.4",
+    "@types/react-syntax-highlighter": "15.5.5",
     "@types/unist": "2.0.6",
-    "@typescript-eslint/eslint-plugin": "5.34.0",
+    "@typescript-eslint/eslint-plugin": "5.35.1",
-    "@typescript-eslint/parser": "5.34.0",
+    "@typescript-eslint/parser": "5.35.1",
     "autoprefixer": "10.4.8",
     "cypress": "10.6.0",
     "editorconfig-checker": "4.0.2",
-    "eslint": "8.22.0",
+    "eslint": "8.23.0",
     "eslint-config-conventions": "3.0.0",
     "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
     "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-promise": "6.0.1",
     "eslint-plugin-unicorn": "43.0.2",
     "html-w3c-validator": "1.2.0",
     "husky": "8.0.1",
@@ -108,7 +106,7 @@
     "serve": "14.0.1",
     "start-server-and-test": "1.14.0",
     "tailwindcss": "3.1.8",
-    "typescript": "4.7.4",
+    "typescript": "4.8.2",
-    "vercel": "28.1.2"
+    "vercel": "28.2.0"
   }
 }

pages/authentication/forgot-password.tsx

@@ -2,6 +2,8 @@ import { NextPage } from 'next'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 import axios from 'axios'
+import { useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { AuthenticationForm } from '../../components/Authentication'
 import { Head } from '../../components/Head'
@@ -15,24 +17,29 @@ import { authenticationFromServerSide } from '../../tools/authentication'
 import { ScrollableBody } from '../../components/ScrollableBody'
 import { userSchema } from '../../models/User'
 import { api } from '../../tools/api'
-import { HandleSubmitCallback, useForm } from '../../hooks/useForm'
+import { useFormTranslation } from '../../hooks/useFormTranslation'
+
+const schema = {
+  email: userSchema.email
+}
 
 const ForgotPassword: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const { version } = props
 
-  const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
+  const { handleUseForm, fetchState, message, errors } = useForm(schema)
-    useForm({
+  const { getFirstErrorTranslation } = useFormTranslation()
-      validateSchema: { email: userSchema.email },
-      resetOnSuccess: true
-    })
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (
+    formData,
+    formElement
+  ) => {
     try {
       await api.post(
         `/users/reset-password?redirectURI=${window.location.origin}/authentication/reset-password`,
         formData
       )
+      formElement.reset()
       return {
         type: 'success',
         value: 'authentication:success-forgot-password'
@@ -41,7 +48,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
       if (axios.isAxiosError(error) && error.response?.status === 400) {
         return {
           type: 'error',
-          value: 'errors:email'
+          value: 'errors:invalid-email'
         }
       }
       return {
@@ -56,7 +63,7 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
       <Head title={`Thream | ${t('authentication:forgot-password')}`} />
       <Header />
       <Main>
-        <AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
+        <AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
           <Input type='email' placeholder='Email' name='email' label='Email' />
           <Button data-cy='submit' className='mt-6 w-full' type='submit'>
             {t('authentication:submit')}
@@ -71,7 +78,9 @@ const ForgotPassword: NextPage<FooterProps> = (props) => {
           id='message'
           state={fetchState}
           message={
-            message != null ? message : getErrorTranslation(errors.email)
+            message != null
+              ? t(message)
+              : getFirstErrorTranslation(errors.email)
           }
         />
       </Main>

pages/authentication/reset-password.tsx

@@ -2,6 +2,8 @@ import { NextPage } from 'next'
 import { useRouter } from 'next/router'
 import useTranslation from 'next-translate/useTranslation'
 import axios from 'axios'
+import { useForm } from 'react-component-form'
+import type { HandleUseFormCallback } from 'react-component-form'
 
 import { Head } from '../../components/Head'
 import { Header } from '../../components/Header'
@@ -13,22 +15,23 @@ import { Button } from '../../components/design/Button'
 import { authenticationFromServerSide } from '../../tools/authentication'
 import { AuthenticationForm } from '../../components/Authentication'
 import { ScrollableBody } from '../../components/ScrollableBody'
-import { HandleSubmitCallback, useForm } from '../../hooks/useForm'
 import { api } from '../../tools/api'
 import { userSchema } from '../../models/User'
+import { useFormTranslation } from '../../hooks/useFormTranslation'
+
+const schema = {
+  password: userSchema.password
+}
 
 const ResetPassword: NextPage<FooterProps> = (props) => {
   const { t } = useTranslation()
   const router = useRouter()
   const { version } = props
 
-  const { fetchState, message, errors, getErrorTranslation, handleSubmit } =
+  const { handleUseForm, fetchState, message, errors } = useForm(schema)
-    useForm({
+  const { getFirstErrorTranslation } = useFormTranslation()
-      validateSchema: { password: userSchema.password },
-      resetOnSuccess: true
-    })
 
-  const onSubmit: HandleSubmitCallback = async (formData) => {
+  const onSubmit: HandleUseFormCallback<typeof schema> = async (formData) => {
     try {
       await api.put(`/users/reset-password`, {
         ...formData,
@@ -55,7 +58,7 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
       <Head title={`Thream | ${t('authentication:reset-password')}`} />
       <Header />
       <Main>
-        <AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
+        <AuthenticationForm onSubmit={handleUseForm(onSubmit)}>
           <Input
             type='password'
             placeholder='Password'
@@ -70,7 +73,9 @@ const ResetPassword: NextPage<FooterProps> = (props) => {
           id='message'
           state={fetchState}
           message={
-            message != null ? message : getErrorTranslation(errors.password)
+            message != null
+              ? t(message)
+              : getFirstErrorTranslation(errors.password)
           }
         />
       </Main>

tools/ajv.ts

@@ -1,26 +0,0 @@
-import Ajv from 'ajv'
-import addFormats from 'ajv-formats'
-
-export const ajv = addFormats(
-  new Ajv({
-    allErrors: true
-  }),
-  [
-    'date-time',
-    'time',
-    'date',
-    'email',
-    'hostname',
-    'ipv4',
-    'ipv6',
-    'uri',
-    'uri-reference',
-    'uuid',
-    'uri-template',
-    'json-pointer',
-    'relative-json-pointer',
-    'regex'
-  ]
-)
-  .addKeyword('kind')
-  .addKeyword('modifier')