feat: create a guild (#1)

components/Authentication/Authentication.tsx

@@ -1,11 +1,7 @@
-import { useMemo, useState } from 'react'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
 import useTranslation from 'next-translate/useTranslation'
 import { useTheme } from 'next-themes'
-import { Type } from '@sinclair/typebox'
-import type { ErrorObject } from 'ajv'
-import type { HandleForm } from 'react-component-form'
 import axios from 'axios'
 
 import { SocialMediaButton } from '../design/SocialMediaButton'
@@ -13,26 +9,14 @@ import { Main } from '../design/Main'
 import { Input } from '../design/Input'
 import { Button } from '../design/Button'
 import { FormState } from '../design/FormState'
-import { useFormState } from '../../hooks/useFormState'
 import { AuthenticationForm } from './'
 import { userSchema } from '../../models/User'
-import { ajv } from '../../utils/ajv'
 import { api } from 'utils/api'
 import {
   Tokens,
   Authentication as AuthenticationClass
 } from '../../utils/authentication'
-import { getErrorTranslationKey } from './getErrorTranslationKey'
-
-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
-}
+import { useForm, HandleSubmitCallback } from '../../hooks/useForm'
 
 export interface AuthenticationProps {
   mode: 'signup' | 'signin'
@@ -44,84 +28,57 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
   const router = useRouter()
   const { lang, t } = useTranslation()
   const { theme } = useTheme()
-  const [formState, setFormState] = useFormState()
-  const [messageTranslationKey, setMessageTranslationKey] = useState<
-    string | undefined
-  >(undefined)
-  const [errors, setErrors] = useState<Errors>({
-    name: null,
-    email: null,
-    password: null
-  })
 
-  const validateSchema = useMemo(() => {
-    return Type.Object({
-      ...(mode === 'signup' && { name: userSchema.name }),
-      email: userSchema.email,
-      password: userSchema.password
+  const { errors, formState, message, getErrorTranslation, handleSubmit } =
+    useForm({
+      validateSchemaObject: {
+        ...(mode === 'signup' && { name: userSchema.name }),
+        email: userSchema.email,
+        password: userSchema.password
+      }
     })
-  }, [mode])
 
-  const validate = useMemo(() => {
-    return ajv.compile(validateSchema)
-  }, [validateSchema])
-
-  const getErrorTranslation = (error?: ErrorObject | null): string | null => {
-    if (error != null) {
-      return t(getErrorTranslationKey(error)).replace(
-        '{expected}',
-        error?.params?.limit
-      )
-    }
-    return null
-  }
-
-  const handleSubmit: HandleForm = async (formData, formElement) => {
-    const isValid = validate(formData)
-    if (!isValid) {
-      setFormState('error')
-      const nameError = validate?.errors?.find(findError('/name'))
-      const emailError = validate?.errors?.find(findError('/email'))
-      const passwordError = validate?.errors?.find(findError('/password'))
-      setErrors({
-        name: nameError,
-        email: emailError,
-        password: passwordError
-      })
-    } else {
-      setErrors({})
-      setFormState('loading')
-      if (mode === 'signup') {
-        try {
-          await api.post(
-            `/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
-            { ...formData, language: lang, theme }
-          )
-          formElement.reset()
-          setFormState('success')
-          setMessageTranslationKey('authentication:success-signup')
-        } catch (error) {
-          setFormState('error')
-          if (axios.isAxiosError(error) && error.response?.status === 400) {
-            setMessageTranslationKey('authentication:alreadyUsed')
-          } else {
-            setMessageTranslationKey('errors:server-error')
+  const onSubmit: HandleSubmitCallback = async (formData) => {
+    if (mode === 'signup') {
+      try {
+        await api.post(
+          `/users/signup?redirectURI=${window.location.origin}/authentication/signin`,
+          { ...formData, language: lang, theme }
+        )
+        return {
+          type: 'success',
+          value: 'authentication:success-signup'
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 400) {
+          return {
+            type: 'error',
+            value: 'authentication:alreadyUsed'
           }
         }
-      } else {
-        try {
-          const { data } = await api.post<Tokens>('/users/signin', formData)
-          const authentication = new AuthenticationClass(data)
-          authentication.signin()
-          await router.push('/application')
-        } catch (error) {
-          setFormState('error')
-          if (axios.isAxiosError(error) && error.response?.status === 400) {
-            setMessageTranslationKey('authentication:wrong-credentials')
-          } else {
-            setMessageTranslationKey('errors:server-error')
+        return {
+          type: 'error',
+          value: 'errors:server-error'
+        }
+      }
+    } else {
+      try {
+        const { data } = await api.post<Tokens>('/users/signin', formData)
+        const authentication = new AuthenticationClass(data)
+        authentication.signin()
+        await router.push('/application')
+        return null
+      } catch (error) {
+        if (axios.isAxiosError(error) && error.response?.status === 400) {
+          return {
+            type: 'error',
+            value: 'authentication:wrong-credentials'
           }
         }
+        return {
+          type: 'error',
+          value: 'errors:server-error'
+        }
       }
     }
   }
@@ -138,13 +95,13 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
       <section className='text-center text-lg font-paragraph pt-8'>
         {t('authentication:or')}
       </section>
-      <AuthenticationForm onSubmit={handleSubmit}>
+      <AuthenticationForm onSubmit={handleSubmit(onSubmit)}>
         {mode === 'signup' && (
           <Input
             type='text'
-            placeholder={t('authentication:name')}
+            placeholder={t('common:name')}
             name='name'
-            label={t('authentication:name')}
+            label={t('common:name')}
             error={getErrorTranslation(errors.name)}
           />
         )}
@@ -182,13 +139,7 @@ export const Authentication: React.FC<AuthenticationProps> = (props) => {
           </Link>
         </p>
       </AuthenticationForm>
-      <FormState
-        id='message'
-        state={formState}
-        message={
-          messageTranslationKey != null ? t(messageTranslationKey) : null
-        }
-      />
+      <FormState id='message' state={formState} message={message} />
     </Main>
   )
 }

components/Authentication/getErrorTranslationKey.test.ts

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

components/Authentication/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'
-}