prisma-home-challenge/hooks/useForm.ts

import { ApiResulState, FetchApiInterface } from "./../utils/api";
import { FormEventHandler, useState } from "react";

type FormMessage = {
  message: string;
};

type Success = FormMessage & {
  result: Partial<User>;
};

type SubmitHandler = FormEventHandler<HTMLFormElement>;

type UseForm = {
  loading: boolean;
  submitHandler: SubmitHandler;
  error?: FormMessage;
  success?: Success;
};

const useForm = <T>(fetchApi: FetchApiInterface<T>): UseForm => {
  const [error, setError] = useState<FormMessage>();
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState<Success>();

  const submitHandler: FormEventHandler<HTMLFormElement> = async (event) => {
    event.preventDefault();
    setLoading(true);
    const formData = new FormData(event.currentTarget);
    const body = Object.fromEntries(formData.entries()) as unknown as T;
    const result = await fetchApi(body);
    setLoading(false);
    switch (result.state) {
      case ApiResulState.SUCCESS: {
        setSuccess({ message: result.message, result: result.user });
        break;
      }
      case ApiResulState.ERROR: {
        setError({ message: result.error });
        break;
      }
    }
  };
  return { error, loading, success, submitHandler };
};

export default useForm;