Rev 6861 | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import { axios } from '../../utils'
import { useForm } from 'react-hook-form'
import { Button, Modal } from 'react-bootstrap'
import { addNotification } from '../../redux/notification/notification.actions'
import { connect, useSelector } from 'react-redux'
import FormErrorFeedback from '../UI/FormErrorFeedback'
const AddProfileModal = ({
show = '',
onHide = () => null,
getProfiles = () => null,
addNotification, // redux action
}) => {
const labels = useSelector(({ intl }) => intl.labels)
const { register, handleSubmit, errors } = useForm()
const onSubmitHandler = async (data) => {
const formData = new FormData()
Object.entries(data).map(([key, value]) => formData.append(key, value))
axios
.post('/profile/my-profiles/add', formData)
.then(({ data: response }) => {
const { data, success } = response
if (!success) {
const errorMessage =
typeof data === 'string'
? data
: 'Ha ocurrido un error, por favor intente más tarde'
addNotification({ style: 'success', msg: errorMessage })
return
}
getProfiles()
addNotification({ style: 'success', msg: data })
onHide()
})
.catch((err) => {
console.log(err)
throw new Error(err)
})
}
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_name}
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)