Frontend: normalize and display server validation errors

import { useCallback, useState } from 'react';
import { UseFormReturn, Path, FieldValues } from 'react-hook-form';
import { normalizeApiError } from './errors';

export function useServerErrors<T extends FieldValues>(form: UseFormReturn<T>) {
  const [formError, setFormError] = useState<string | null>(null);

  const handleSubmit = useCallback(
    (submit: (values: T) => Promise<void>) =>
      form.handleSubmit(async (values) => {
        setFormError(null);
        try {
          await submit(values);
        } catch (err) {
          const { fields, formLevel } = normalizeApiError(err);
          const known = new Set(Object.keys(form.getValues()));
          const unknown: string[] = [];
          let focused = false;

          for (const [path, message] of Object.entries(fields)) {
            if (!known.has(path.split('.')[0])) {
              unknown.push(message);
              continue;
            }
            form.setError(path as Path<T>, { type: 'server', message }, { shouldFocus: !focused });
            focused = true;
          }

          setFormError(formLevel ?? unknown[0] ?? null);
        }
      }),
    [form]
  );

  const clearServerError = useCallback(
    (name: Path<T>) => {
      if (form.formState.errors[name]?.type === 'server') form.clearErrors(name);
    },
    [form]
  );

  return { formError, handleSubmit, clearServerError };
}

import { useForm } from 'react-hook-form';
import { useServerErrors } from './useServerErrors';
import { api } from './api';

type SignupValues = {
  email: string;
  password: string;
};

export function SignupForm() {
  const form = useForm<SignupValues>({ defaultValues: { email: '', password: '' } });
  const { register, formState } = form;
  const { formError, handleSubmit, clearServerError } = useServerErrors(form);

  const onSubmit = handleSubmit(async (values) => {
    await api.post('/signup', values);
  });

  return (
    <form onSubmit={onSubmit} noValidate>
      {formError && <p role="alert" className="form-error">{formError}</p>}

      <label>
        Email
        <input
          type="email"
          {...register('email', { onChange: () => clearServerError('email') })}
        />
        {formState.errors.email && <span className="field-error">{formState.errors.email.message}</span>}
      </label>

      <label>
        Password
        <input
          type="password"
          {...register('password', { onChange: () => clearServerError('password') })}
        />
        {formState.errors.password && <span className="field-error">{formState.errors.password.message}</span>}
      </label>

      <button type="submit" disabled={formState.isSubmitting}>
        Create account
      </button>
    </form>
  );
}