Proyectos de Subversion LeadersLinked - Antes de SPA

/* eslint-disable react/prop-types */
import React, { useState } from 'react'
import { Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { connect } from 'react-redux'
import { axios } from '../../../../utils'
import { addNotification } from '../../../../redux/notification/notification.actions'
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
import Spinner from '../../../../shared/loading-spinner/Spinner'

const AddCompanyModal = ({
  show = false,
  onHide = () => null,
  fetchCompanies = () => [],
  companySizes = {},
  industries = {},
  addNotification // redux action
}) => {
  const [loading, setLoading] = useState(false)

  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]}`)

          addNotification({ style: 'danger', msg: errorMessage })
          return
        }

        fetchCompanies()
        onHide()
      })
      .catch((error) => {
        const errorMessage = new Error(error)
        addNotification({ style: 'danger', msg: errorMessage })
      })
      .finally(() => setLoading(false))
  }

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title>
          Nueva Empresa
        </Modal.Title>
      </Modal.Header>
      <form onSubmit={handleSubmit(onSubmitHandler)}>

        <Modal.Body className='position-relative'>

          <div className="form-group">
            <input
              type="text"
              name="name"
              placeholder="Nombre de la empresa"
              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: 'Por favor eliga una industria'
              })}
            >
              <option value="" hidden>Industria</option>
              {Object.entries(industries).map(([key, value]) =>
                <option value={key} key={key}>
                  {value}
                </option>
              )}
            </select>
            {errors.industry_id && <FormErrorFeedback>{errors.industry_id.message}</FormErrorFeedback>}
          </div>

          <div className="form-group">
            <select
              name="company_size_id"
              ref={register({
                required: 'Por favor eliga el tamaño de la empresa'
              })}
            >
              <option value="" hidden>Tamaño de la empresa</option>
              {Object.entries(companySizes).map(([key, value]) =>
                <option value={key} key={key}>
                  {value}
                </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'>Crear</button>
          <button type="button" className='btn btn-secondary' onClick={onHide}>Cancelar</button>
        </Modal.Footer>
      </form>
    </Modal>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
}

export default connect(null, mapDispatchToProps)(AddCompanyModal)