Autoría | Ultima modificación | Ver Log |
import React from 'react'
import { axios } from '../../utils'
import { Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { addNotification } from '../../redux/notification/notification.actions'
import FormErrorFeedback from '../UI/FormErrorFeedback'
const CreateGroupModal = ({ isOpen, onClose }) => {
const { register, handleSubmit, errors } = useForm()
const dispatch = useDispatch()
const onSubmitHandler = async (data) => {
const formData = new FormData()
Object.entries(data).map(([key, value]) => formData.append(key, value))
axios
.post('/chat/create-group', formData)
.then(({ data: response }) => {
const { success } = response
if (!success) {
dispatch(
addNotification({
style: 'danger',
message: 'Ha ocurrido un error, por favor intente más tarde.',
})
)
return
}
onClose()
})
.catch((error) => {
dispatch(
addNotification({
style: 'danger',
message: 'Ha ocurrido un error, por favor intente más tarde.',
})
)
throw new Error(error)
})
}
return (
<Modal show={isOpen} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>Crear grupo</Modal.Title>
</Modal.Header>
<Modal.Body>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<label className="mb-1" htmlFor="name">
Nombre del grupo
</label>
<input
type="text"
name="name"
id="name"
ref={register({ required: 'Este campo es requerido' })}
/>
{errors.name && (
<FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
)}
<div className="mt-3 d-flex gap-3">
<button className="btn btn-primary" type="submit">
Enviar
</button>
<button className="btn btn-secondary" onClick={onClose}>
Cancelar
</button>
</div>
</form>
</Modal.Body>
</Modal>
)
}
export default CreateGroupModal