Rev 8522 | Rev 14843 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Modal, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { getData } from '../../../helpers/fetchHelpers'
const IndustryModal = ({
isOpen,
closeModal,
editUrl,
action
}) => {
const { handleSubmit, register } = useForm()
const [error, setError] = useState(null)
const [industries, setIndustries] = useState([])
const [currentIndustry, setCurrentIndustry] = useState('')
const onSubmit = ({ industry }) => {
const data = new FormData()
data.append('industry_id', industry)
axios.post(editUrl, data)
.then(({ data }) => {
if (!data.success) {
return setError('Error en la respuesta')
}
action(data.data)
})
.then(() => {
setError(null)
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 }])
})
setCurrentIndustry(industry_id)
})
}, [isOpen])
return (
<Modal
size="md"
show={isOpen}
onHide={closeModal}
autoFocus={false}
>
<Modal.Header closeButton>
<Modal.Title>Cambiar</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmit)}>
<Modal.Body>
<div className="mb-3">
<label className="form-label">Industria</label>
<select
className='form-control'
name="industry"
ref={register}
>
{
industries.map(({ value, name }) => (
<option key={value} value={value}>{name}</option>
))
}
</select>
</div>
{error && <p>{error}</p>}
</Modal.Body>
<Modal.Footer>
<Button
variant="primary"
type="submit"
>
Enviar
</Button>
<Button
className='btn-tertiary'
onClick={closeModal}
>
Cancelar
</Button>
</Modal.Footer>
</form>
</Modal >
)
}
export default IndustryModal