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/form/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