Rev 6808 | 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 SkillsModal = ({
show = false,
userId = '',
userSkills = [],
onComplete = () => null,
onClose = () => null,
}) => {
const [modalLoading, setModalLoading] = useState(false)
const { data: skills } = useFetchHelper('skills', [])
const labels = useSelector(({ intl }) => intl.labels)
const dispatch = useDispatch()
const { register, handleSubmit, setValue } = useForm()
const onSubmitHandler = ({ skills }) => {
setModalLoading(true)
const formData = new FormData()
skills.map((skills) => formData.append('skills[]', skills.value))
axios
.post(`/profile/my-profiles/skill/${userId}`, formData)
.then(({ data: response }) => {
const { data, success } = response
if (!success) {
const errorMessage = typeof data === 'string' ? data : data.skills[0]
dispatch(addNotification({ style: 'danger', msg: errorMessage }))
return
}
onComplete(skills)
dispatch(
addNotification({ style: 'success', msg: 'Registro agregado' })
)
onClose()
})
.catch((error) => {
dispatch(addNotification({ style: 'danger', msg: error }))
throw new Error(error)
})
.finally(() => setModalLoading(false))
}
const handleTagsChange = (tags) => {
setValue('skills', tags)
}
useEffect(() => {
register('skills')
}, [])
useEffect(() => {
setValue('skills', userSkills.length ? userSkills : [''])
}, [userSkills])
return (
<Modal show={show} onHide={onClose}>
<Modal.Header closeButton>
<Modal.Title>{labels.skills}</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(onSubmitHandler)}>
<Modal.Body>
<div className="form-group">
<TagsInput
suggestions={skills}
settedTags={userSkills}
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 SkillsModal