6727 |
stevensc |
1 |
import React from 'react'
|
|
|
2 |
import { axios } from '../../utils'
|
|
|
3 |
import { useForm } from 'react-hook-form'
|
|
|
4 |
import { Button, Modal } from 'react-bootstrap'
|
|
|
5 |
import { addNotification } from '../../redux/notification/notification.actions'
|
|
|
6 |
import { connect, useSelector } from 'react-redux'
|
|
|
7 |
import FormErrorFeedback from '../UI/FormErrorFeedback'
|
|
|
8 |
|
|
|
9 |
const AddProfileModal = ({
|
|
|
10 |
show = '',
|
|
|
11 |
onHide = () => null,
|
|
|
12 |
getProfiles = () => null,
|
|
|
13 |
addNotification, // redux action
|
|
|
14 |
}) => {
|
|
|
15 |
const labels = useSelector(({ intl }) => intl.labels)
|
|
|
16 |
const { register, handleSubmit, errors } = useForm()
|
|
|
17 |
|
|
|
18 |
const onSubmitHandler = async (data) => {
|
|
|
19 |
const formData = new FormData()
|
|
|
20 |
Object.entries(data).map(([key, value]) => formData.append(key, value))
|
|
|
21 |
|
|
|
22 |
await axios.post('/profile/my-profiles/add', formData).then(({ data }) => {
|
|
|
23 |
if (data.success) {
|
|
|
24 |
return addNotification({ style: 'success', msg: data.data })
|
|
|
25 |
}
|
|
|
26 |
})
|
|
|
27 |
onHide()
|
|
|
28 |
getProfiles()
|
|
|
29 |
}
|
|
|
30 |
|
|
|
31 |
return (
|
|
|
32 |
<Modal show={show} onHide={onHide}>
|
|
|
33 |
<Modal.Header closeButton>
|
|
|
34 |
<Modal.Title id="contained-modal-title-vcenter">
|
|
|
35 |
{labels.new_profile}
|
|
|
36 |
</Modal.Title>
|
|
|
37 |
</Modal.Header>
|
|
|
38 |
<form onSubmit={handleSubmit(onSubmitHandler)}>
|
|
|
39 |
<Modal.Body>
|
|
|
40 |
<input
|
|
|
41 |
type="text"
|
|
|
42 |
name="name"
|
|
|
43 |
placeholder={labels.profile_name}
|
|
|
44 |
ref={register({ required: 'Este campo es requerido' })}
|
|
|
45 |
/>
|
|
|
46 |
{errors.name && (
|
|
|
47 |
<FormErrorFeedback>{errors.name.message}</FormErrorFeedback>
|
|
|
48 |
)}
|
|
|
49 |
</Modal.Body>
|
|
|
50 |
<Modal.Footer>
|
|
|
51 |
<Button type="submit">{labels.create_profile}</Button>
|
|
|
52 |
<Button onClick={onHide} variant="danger">
|
|
|
53 |
{labels.cancel}
|
|
|
54 |
</Button>
|
|
|
55 |
</Modal.Footer>
|
|
|
56 |
</form>
|
|
|
57 |
</Modal>
|
|
|
58 |
)
|
|
|
59 |
}
|
|
|
60 |
|
|
|
61 |
const mapDispatchToProps = {
|
|
|
62 |
addNotification: (notification) => addNotification(notification),
|
|
|
63 |
}
|
|
|
64 |
|
|
|
65 |
export default connect(null, mapDispatchToProps)(AddProfileModal)
|