Rev 1975 | Rev 2521 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useEffect} from 'react'
import { useLocation } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { useForm } from 'react-hook-form'
import { CKEditor } from 'ckeditor4-react'
import { axios, CKEDITOR_OPTIONS } from '../../utils'
import { addNotification } from '../../redux/notification/notification.actions'
import FormErrorFeedback from 'components/UI/form/FormErrorFeedback'
import Modal from 'components/UI/modal/Modal'
const OverviewModal = ({
isOpen = false,
overview = '',
id = '',
closeModal = function () {},
onComplete = function () {}
}) => {
const { pathname } = useLocation()
const dispatch = useDispatch()
const { register, errors, handleSubmit, setValue } = useForm()
const onSubmit = handleSubmit(({ description }) => {
const typesUrl = {
profile: `/profile/my-profiles/extended/${id}`,
group: `/group/my-groups/extended/${id}`
}
const type = pathname.split('/')[1]
const formData = new FormData()
formData.append('description', description)
axios
.post(typesUrl[type], formData)
.then(({ data: responseData }) => {
const { data, success } = responseData
if (!success) {
const errorMessage =
typeof data === 'string'
? data
: Object.entries(data).map(
([key, value]) => `${key}: ${value}`
)[0]
throw new Error(errorMessage)
}
onComplete(data.description || data)
closeModal()
})
.catch((err) => {
dispatch(addNotification({ style: 'danger', msg: err.message }))
})
})
const removeModalTabIndex = () => {
const modal = document.querySelector('.fade.modal.show')
modal.removeAttribute('tabindex')
}
useEffect(() => {
register('description', { required: 'Este campo es requerido' })
}, [])
return (
<Modal
title='Visión general'
show={isOpen}
onClose={closeModal}
onAccept={onSubmit}
>
<CKEditor
onChange={(e) => setValue('description', e.editor.getData())}
onInstanceReady={(e) => e.editor.setData(overview)}
config={CKEDITOR_OPTIONS}
onDialogShow={removeModalTabIndex}
/>
{errors.description && (
<FormErrorFeedback>{errors.description.message}</FormErrorFeedback>
)}
</Modal>
)
}
export default OverviewModal