Rev 6861 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
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((error) => {
dispatch(addNotification({ style: 'danger', msg: error }))
throw new Error(error)
})
.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