Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react'
import { axios } from '../../utils'
import { Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { useDispatch, useSelector } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'

import Spinner from '../UI/Spinner'
import FormErrorFeedback from '../UI/FormErrorFeedback'
import useFetchHelper from '../../hooks/useFetchHelper'

const AddCompanyModal = ({
  show = false,
  onHide = () => null,
  fetchCompanies = () => []
}) => {
  const [loading, setLoading] = useState(false)
  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 onSubmitHandler = (data) => {
    setLoading(true)
    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 }))
      })
      .finally(() => setLoading(false))
  }

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title>{labels.new_company}</Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(onSubmitHandler)}>
        <Modal.Body className='position-relative'>
          <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>

          {loading && <Spinner />}
        </Modal.Body>
        <Modal.Footer>
          <button type='submit' className='btn btn-primary'>
            {labels.accept}
          </button>
          <button type='button' className='btn btn-secondary' onClick={onHide}>
            {labels.cancel}
          </button>
        </Modal.Footer>
      </form>
    </Modal>
  )
}

export default AddCompanyModal