ContactForm.tsx

ContactForm.tsx

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

type 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),
    });
    
    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(() => {
    register({ name: "name" }, { required: true });
    register({ name: "email" }, { required: true });
    register({ name: "message" }, { required: true });
  }, [register]);

  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"
                ref={register}
              />
              {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"
                ref={register}
                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"
                ref={register}
              />
              {errors.message && (
                <span className="error" role="alert">
                  This field is required.
                </span>
              )}
            </li>
            <li className="contact-form__list-item">
              <button
                className="contact-form__button"
                type="submit"
                role="button"
              >
                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>
    </div>
  );
};

export default ContactForm;