Rev 15267 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { getData } from '../../../helpers/fetchHelpers'
import { addNotification } from '../../../redux/notification/notification.actions'
const IndustryModal = ({
isOpen,
closeModal,
editUrl,
action
}) => {
const { handleSubmit, register, setValue } = useForm()
const [industries, setIndustries] = useState([])
const dispatch = useDispatch()
const onSubmit = ({ industry }) => {
const data = new FormData()
data.append('industry_id', industry)
axios.post(editUrl, data)
.then(({ data }) => {
if (!data.success) {
typeof data.data === 'string'
?
dispatch(addNotification({
style: 'danger',
msg: data.data
}))
: Object.entries(data.data).map(([key, value]) =>
value.map(err =>
dispatch(addNotification({
style: 'danger',
msg: `${key}: ${err}`
}))
)
)
return
}
action(data.data)
closeModal()
})
.catch((err) => console.log(err))
}
useEffect(() => {
getData(editUrl)
.then(({ industries, industry_id }) => {
Object.entries(industries).map(([key, value]) => {
setIndustries(prev => [...prev, { value: key, name: value }])
})
setValue('industry', industry_id)
})
}, [isOpen])
return (
<Modal
size="md"
show={isOpen}
onHide={closeModal}
autoFocus={false}
>
<Modal.Header closeButton>
<Modal.Title>Industria</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmit)}>
<Modal.Body>
<div className="form-group">
<select
className='form-control'
name="industry"
ref={register}
>
{industries.map(({ value, name }) =>
<option key={value} value={value}>{name}</option>
)}
</select>
</div>
</Modal.Body>
<Modal.Footer>
<button
className="btn btn-primary"
type="submit"
>
Enviar
</button>
<button
className='btn btn-tertiary'
onClick={closeModal}
>
Cancelar
</button>
</Modal.Footer>
</form>
</Modal >
)
}
export default IndustryModal