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;