guild_front/src/components/Form/Form.jsx

import React, { useEffect, useState } from "react";
import PhoneInput from "react-phone-input-2";
import "react-phone-input-2/lib/style.css";
import { useNavigate, useParams } from "react-router-dom";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

import { apiRequest } from "@api/request";

import { Loader } from "@components/Common/Loader/Loader";

import "./form.scss";

const SweetAlert = withReactContent(Swal);

const Form = () => {
  const navigate = useNavigate();

  const urlParams = useParams();

  const [status, setStatus] = useState(null);
  const [data, setData] = useState({
    email: "",
    phone: "",
    comment: "",
  });
  const [isFetching, setIsFetching] = useState(false);

  const handleModal = (status) => {
    SweetAlert.fire({
      text:
        // eslint-disable-next-line no-constant-condition
        status !== 200 || 201 ? "Какие-то неполадки =(" : "Форма отправлена",
      preConfirm: () =>
        // eslint-disable-next-line no-constant-condition
        status !== 200 || 201
          ? () => {
              setStatus(null);
            }
          : () => {
              setStatus(null);
              navigate(`/candidate/${urlParams.id}`);
            },
    });
  };

  useEffect(() => {
    if (status) {
      handleModal(status);
    }
  }, [status]);

  const handleChange = (e) => {
    const { id, value } = e.target;

    setData((prev) => ({
      ...prev,
      [id]: value,
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    setIsFetching(true);
    const formData = new FormData();
    formData.append("profile_id", urlParams.id);
    formData.append("Email", data.email);
    formData.append("phone", data.phone);
    formData.append("comment", data.comment);

    apiRequest("/interview-request/create-interview-request", {
      method: "POST",
      params: {
        profile_id: urlParams.id,
        ...data,
      },
    }).then((res) => {
      setStatus(res);
      setIsFetching(false);
    });
  };

  return (
    <div className="row">
      <div className="col-sm-12">
        <form className="form" id="test">
          <label htmlFor="email">Емейл:</label>
          <input
            onChange={handleChange}
            id="email"
            name="Email"
            type="email"
            placeholder="Емейл"
            value={data.email}
          />

          <label htmlFor="phone">Номер телефона:</label>
          <PhoneInput
            id="phone"
            name="Phone"
            country={"ru"}
            value={data.phone}
            onChange={(e) =>
              handleChange({ target: { value: e, id: "phone" } })
            }
          />

          <textarea
            onChange={handleChange}
            id="comment"
            rows="5"
            cols="40"
            name="Comment"
            placeholder="Оставьте комментарий"
            value={data.comment}
          ></textarea>

          <button onClick={handleSubmit} className="form__btn" type="submit">
            {isFetching ? <Loader /> : "Отправить"}
          </button>
        </form>
      </div>
    </div>
  );
};

export default Form;