Rev 6753 | AutorÃa | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect, useState } from 'react'
import { axios } from '../../utils'
import { useForm } from 'react-hook-form'
import { useDispatch, useSelector } from 'react-redux'
import { Button, Modal } from 'react-bootstrap'
import { addNotification } from '../../redux/notification/notification.actions'
import Spinner from '../../../shared/loading-spinner/Spinner'
import TagsInput from '../../../shared/tags-input/TagsInput'
import useFetchHelper from '../../hooks/useFetchHelper'
const AptitudesModal = ({
show = false,
userId = '',
userAptitudes = [],
onClose = () => {},
onComplete = () => {},
}) => {
const [modalLoading, setModalLoading] = useState(false)
const { data: aptitudes } = useFetchHelper('aptitudes')
const labels = useSelector(({ intl }) => intl.labels)
const dispatch = useDispatch()
const { register, handleSubmit, setValue } = useForm()
const handleTagsChange = (tags) => {
setValue('aptitudes', tags)
}
const onSubmitHandler = async ({ aptitudes }) => {
setModalLoading(true)
const formData = new FormData()
aptitudes.map((aptitude) => formData.append('aptitudes[]', aptitude.value))
axios
.post(`/profile/my-profiles/aptitude/${userId}`, formData)
.then(({ data: response }) => {
const { data, success } = response
if (!success) {
const errorMessage = data.aptitudes[0]
dispatch(addNotification({ style: 'danger', msg: errorMessage }))
return
}
onComplete(aptitudes)
dispatch(
addNotification({ style: 'success', msg: 'Registro actualizado' })
)
onClose()
})
.catch((error) => {
dispatch(addNotification({ style: 'danger', msg: error }))
throw new Error(error)
})
.finally(() => setModalLoading(false))
}
useEffect(() => {
register('aptitudes')
}, [])
useEffect(() => {
show ? setValue('aptitudes', userAptitudes) : setValue('aptitudes', [''])
}, [show])
return (
<Modal show={show} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>{labels.aptitudes}</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<Modal.Body>
<div className="form-group">
<TagsInput
suggestions={aptitudes}
settedTags={userAptitudes}
onChange={handleTagsChange}
/>
</div>
</Modal.Body>
<Modal.Footer>
<Button size="sm" type="submit">
{labels.accept}
</Button>
<Button size="sm" variant="danger" onClick={onClose}>
{labels.cancel}
</Button>
</Modal.Footer>
</form>
{modalLoading && <Spinner />}
</Modal>
)
}
export default AptitudesModal