Proyectos de Subversion LeadersLinked - SPA

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

import { axios } from 'utils/index'
import { addNotification } from '../../redux/notification/notification.actions'
import useFetchHelper from '../../hooks/useFetchHelper'

import Modal from 'components/UI/modal/Modal'
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'

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 { register, handleSubmit, 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(({ data: response }) => {
        if (!response.success) {
          const errorMessage =
            typeof response.data === 'string'
              ? response.data
              : Object.entries(response.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}
    >
      <div className='form-group'>
        <input
          type='text'
          name='name'
          placeholder={labels.name_of_company}
          ref={register({
            required: 'Por favor ingrese el nombre de la Empresa'
          })}
        />
        {errors.name && (
          <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
        )}
      </div>

      <div className='form-group'>
        <select
          name='industry_id'
          ref={register({
            required: labels.select_industry
          })}
        >
          <option value='' hidden>
            {labels.industry}
          </option>
          {industries.map(({ name, value }) => (
            <option value={value} key={value}>
              {name}
            </option>
          ))}
        </select>
        {errors.industry_id && (
          <FormErrorFeedback>{errors.industry_id.message}</FormErrorFeedback>
        )}
      </div>

      <div className='form-group'>
        <select
          name='company_size_id'
          ref={register({
            required: labels.select_company_size
          })}
        >
          <option value='' hidden>
            {labels.company_size}
          </option>
          {companySizes.map(({ name, value }) => (
            <option value={value} key={value}>
              {name}
            </option>
          ))}
        </select>
        {errors.company_size_id && (
          <FormErrorFeedback>
            {errors.company_size_id.message}
          </FormErrorFeedback>
        )}
      </div>

    </Modal>
  )
}

export default AddCompanyModal