AutorÃa | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { axios } from '../../utils/axios'
import { useForm } from 'react-hook-form'
import { addNotification } from '../../redux/notification/notification.actions'
import Spinner from '../UI/Spinner'
import LoaderContainer from '../UI/LoaderContainer'
import FormErrorFeedback from '../UI/FormErrorFeedback'
import { useDispatch } from 'react-redux'
const AddGroupModal = ({
show,
onHide,
groupTypes,
industries,
fetchGroups,
}) => {
const [loading, setLoading] = useState(false)
const dispatch = useDispatch()
const { register, handleSubmit, errors, getValues, setError } = useForm()
const onSubmitHandler = (data) => {
setLoading(true)
const formData = new FormData()
Object.entries(data).map(([key, value]) => formData.append(key, value))
axios
.post(`/group/my-groups/add`, formData)
.then(({ data: response }) => {
const { data, success } = response
if (!success) {
const errorMessage = data
errorMessage === 'object'
? Object.entries(errorMessage).map(
([key, value]) =>
key in getValues() &&
setError(key, {
type: 'manual',
message: Array.isArray(value) ? value[0] : value,
})
)
: dispatch(addNotification({ style: 'danger', msg: errorMessage }))
}
fetchGroups()
onHide()
})
.catch((err) => {
addNotification({ style: 'danger', msg: err })
throw new Error(err)
})
.finally(() => setLoading(false))
}
return (
<Modal show={show} onHide={onHide}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
Nuevo Grupo
</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<Modal.Body>
<div style={{ position: 'relative' }}>
<div className="form-group">
<input
type="text"
name="name"
id="name"
placeholder="Nombre del grupo"
ref={register({
required: 'Por favor ingrese el nombre del grupo',
})}
/>
{errors.name && (
<FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
)}
</div>
<div className="form-group">
<select
name="type_id"
id="type_id"
defaultValue=""
ref={register({
required: 'Por favor eliga un tipo',
})}
>
<option value="" hidden>
Tipo
</option>
{Object.entries(groupTypes).map(([key, value]) => (
<option value={key} key={key}>
{value}
</option>
))}
</select>
{errors.type_id && (
<FormErrorFeedback>{errors.type_id.message}</FormErrorFeedback>
)}
</div>
<div className="form-group">
<select
name="industry_id"
id="industry_id"
defaultValue=""
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>
{loading && (
<LoaderContainer>
<Spinner />
</LoaderContainer>
)}
</div>
</Modal.Body>
<Modal.Footer>
<Button type="submit">Crear</Button>
<Button onClick={onHide} variant="danger">
Cancelar
</Button>
</Modal.Footer>
</form>
</Modal>
)
}
export default AddGroupModal