AutorÃa | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React from 'react'
import { Button, Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { connect } from 'react-redux'
import { axios } from '../../../../utils'
import { addNotification } from '../../../../redux/notification/notification.actions'
import FormErrorFeedback from '../../../../shared/form-error-feedback/FormErrorFeedback'
const AddProfileModal = ({
show = '',
onHide = () => null,
getProfiles = () => null,
addNotification // redux action
}) => {
// React hook form
const { register, handleSubmit, errors } = useForm()
const onSubmitHandler = async (data) => {
const formData = new FormData()
Object.entries(data).map(([key, value]) => formData.append(key, value))
await axios.post('/profile/my-profiles/add', formData)
.then(({ data }) => {
if (data.success) {
return addNotification({ style: 'success', msg: data.data })
}
})
onHide()
getProfiles()
}
return (
<Modal show={show} onHide={onHide}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">
{LABELS.NEW_PROFILE}
</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<Modal.Body>
<input
type="text"
name="name"
placeholder={LABELS.PROFILE_MAME}
ref={register({ required: 'Este campo es requerido' })}
/>
{errors.name && <FormErrorFeedback>{errors.name.message}</FormErrorFeedback>}
</Modal.Body>
<Modal.Footer>
<Button type="submit">
{LABELS.CREATE_PROFILE}
</Button>
<Button onClick={onHide} variant="danger">
{LABELS.CANCEL}
</Button>
</Modal.Footer>
</form>
</Modal>
)
}
const mapDispatchToProps = {
addNotification: (notification) => addNotification(notification)
}
export default connect(null, mapDispatchToProps)(AddProfileModal)