Proyectos de Subversion LeadersLinked - SPA

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { useForm } from "react-hook-form";

import { axios } from "@app/utils";
import { useFetchHelper } from "@hooks";
import { addNotification } from "@app/redux/notification/notification.actions";

import Modal from "@components/UI/modal/Modal";
import Input from "@components/UI/inputs/Input";
import Select from "@components/UI/inputs/Select";

const AddCompanyModal = ({
  show = false,
  onHide = () => null,
  fetchCompanies = () => [],
}) => {
  const { data: companySizes } = useFetchHelper("company-sizes");
  const { data: industries } = useFetchHelper("industries");
  const labels = useSelector(({ intl }) => intl.labels);
  const dispatch = useDispatch();

  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm();

  const onSubmit = handleSubmit((data) => {
    const formData = new FormData();
    Object.entries(data).map(([key, value]) => formData.append(key, value));

    axios
      .post("/company/my-companies/add", formData)
      .then((response) => {
        const { success, data } = response.data;
        if (!success) {
          const errorMessage =
            typeof data === "string"
              ? data
              : Object.entries(data).map(
                  ([key, value]) => `${key}: ${value[0]}`
                );

          dispatch(addNotification({ style: "danger", msg: errorMessage }));
          return;
        }

        fetchCompanies();
        onHide();
      })
      .catch((err) => {
        dispatch(addNotification({ style: "danger", msg: err.message }));
      });
  });

  return (
    <Modal
      title={labels.new_company}
      show={show}
      onClose={onHide}
      onAccept={onSubmit}
    >
      <Input
        name="name"
        placeholder={labels.name_of_company}
        error={errors.name?.message}
        control={control}
        rules={{ required: "Por favor ingrese el nombre de la Empresa" }}
      />

      <Select
        name="industry_id"
        options={industries}
        control={control}
        rules={{ required: labels.select_industry }}
        error={errors.industry_id?.message}
      />

      <Select
        name="company_size_id"
        options={companySizes}
        control={control}
        rules={{ required: labels.select_company_size }}
        error={errors.company_size_id?.message}
      />
    </Modal>
  );
};

export default AddCompanyModal;