feat: create a guild (#1)

hooks/useForm/getErrorTranslationKey.test.ts

@@ -0,0 +1,71 @@
+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')
+  })
+})

hooks/useForm/getErrorTranslationKey.ts

@@ -0,0 +1,19 @@
+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/index.ts

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

hooks/useForm/useForm.ts

@@ -0,0 +1,108 @@
+import { useMemo, useState } from 'react'
+import useTranslation from 'next-translate/useTranslation'
+import { Type } from '@sinclair/typebox'
+import type { FormDataObject, HandleForm } from 'react-component-form'
+import type { ErrorObject } from 'ajv'
+
+import { FormState, useFormState } from '../useFormState'
+import { ajv } from '../../utils/ajv'
+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
+}
+
+export type GetErrorTranslation = (error?: ErrorObject | null) => string | null
+
+export interface UseFormOptions {
+  validateSchemaObject: { [key: string]: any }
+}
+
+export type HandleSubmit = (callback: HandleSubmitCallback) => HandleForm
+
+interface Message {
+  type: 'error' | 'success'
+  value: string
+}
+
+export type HandleSubmitCallback = (
+  formData: FormDataObject,
+  formElement: HTMLFormElement
+) => Promise<Message | null>
+
+export interface UseFormResult {
+  message: string | null
+  formState: FormState
+  getErrorTranslation: GetErrorTranslation
+  handleSubmit: HandleSubmit
+  errors: Errors
+}
+
+export const useForm = (options: UseFormOptions): UseFormResult => {
+  const { validateSchemaObject } = options
+  const { t } = useTranslation()
+  const [formState, setFormState] = useFormState()
+  const [messageTranslationKey, setMessageTranslationKey] = useState<
+    string | undefined
+  >(undefined)
+  const [errors, setErrors] = useState<Errors>({})
+
+  const validateSchema = useMemo(() => {
+    return Type.Object(validateSchemaObject)
+  }, [validateSchemaObject])
+
+  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: HandleSubmit = (callback) => {
+    return async (formData, formElement) => {
+      const isValid = validate(formData)
+      if (!isValid) {
+        setFormState('error')
+        const errors: Errors = {}
+        for (const property in validateSchema.properties) {
+          errors[property] = validate.errors?.find(findError(`/${property}`))
+        }
+        setErrors(errors)
+      } else {
+        setErrors({})
+        setFormState('loading')
+        const message = await callback(formData, formElement)
+        if (message != null) {
+          setMessageTranslationKey(message.value)
+          if (message.type === 'success') {
+            setFormState('success')
+            formElement.reset()
+          } else {
+            setFormState('error')
+          }
+        }
+      }
+    }
+  }
+
+  return {
+    getErrorTranslation,
+    errors,
+    formState,
+    handleSubmit,
+    message: messageTranslationKey != null ? t(messageTranslationKey) : null
+  }
+}