ContactForm.tsx

import React, { useEffect, useState } from "react";
import { useForm, SubmitHandler } from "react-hook-form";
import "isomorphic-unfetch";

interface InputValues {
  name: string;
  email: string;
  message: string;
}

const ContactForm: React.FC = () => {
  const { register, handleSubmit, errors, formState } = useForm<InputValues>();
  const [submitMessage, setSubmitMessage] = useState("");

  const onSubmit: SubmitHandler<InputValues> = async (data) => {
    const res = await fetch("/api/contact", {
      method: "post",
      headers: {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
    
    // console.log(await res.json());
    res.status === 200 &&
      setSubmitMessage("The message has been sent successfully.");
    res.status !== 200 &&
      setSubmitMessage(
        "There was a problem processing this request, please try again."
      );
  };

  const { isSubmitting, isSubmitted } = formState;

  useEffect(() => {
    setTimeout(() => setSubmitMessage(""), 5000);
  }, [isSubmitted, isSubmitting]);

  return (
    <div className="contact-form" data-testid="_ContactForm_">
      <div className="contact-form__wraper">
        <form onSubmit={handleSubmit(onSubmit)}>
          <ul className="contact-form__list">
            <li className="contact-form__list-item" key="name">
              <input
                className="form-field"
                id="name"
                name="name"
                placeholder="Name"
                data-testid="name"
                ref={register({ required: true })}
              />
              {errors.name && (
                <span className="error" role="alert">
                  This field is required.
                </span>
              )}
            </li>
            <li className="contact-form__list-item" key="email">
              <input
                className="form-field"
                id="email"
                name="email"
                placeholder="Email"
                data-testid="email"
                ref={register({
                  required: true,
                })}
                type="email"
              />
              {errors.email && (
                <span className="error" role="alert">
                  Invalid email address.
                </span>
              )}
            </li>
            <li className="contact-form__list-item flex-1" key="message">
              <label htmlFor="message" className="form-field__label">
                How can we help?
              </label>
              <textarea
                className="form-field text-area"
                id="message"
                name="message"
                data-testid="message"
                ref={register({ required: true })}
              />
              {errors.message && (
                <span className="error" role="alert">
                  This field is required.
                </span>
              )}
            </li>
            <li className="contact-form__list-item">
              <button className="contact-form__button" role="button" type="submit">
                Submit
              </button>
              <div className="contact-form__message">
                {isSubmitting && <span>Sending message, please wait...</span>}
              </div>
              <div className="contact-form__message">
                {isSubmitted && <span>{submitMessage}</span>}
              </div>
            </li>
          </ul>
        </form>
      </div>