website/hooks/useFormTranslation.ts

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 }
}