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