Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import { Modal, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import { CKEditor } from 'ckeditor4-react'
import { addNotification } from '../../../redux/notification/notification.actions'
import { useDispatch } from 'react-redux'

const OverviewModal = ({
        isOpen = false,
        closeModal = function () { },
        overviewUrl,
        action,
        overview
}) => {

        const { register, handleSubmit, setValue, watch } = useForm()
        const [error, setError] = useState(null)
        const dispatch = useDispatch()

        const onSubmit = ({ description }) => {
                const formData = new FormData
                formData.append('description', description)

                axios.post(overviewUrl, formData)
                        .then(({ data }) => {
                                if (!data.success) {
                                        typeof data.data === 'string'
                                                ?
                                                dispatch(addNotification({
                                                        style: 'danger',
                                                        msg: data.data
                                                }))
                                                : Object.entries(data.data).map(([key, value]) =>
                                                        value.map(err =>
                                                                dispatch(addNotification({
                                                                        style: 'danger',
                                                                        msg: `${key}: ${err}`
                                                                }))
                                                        )
                                                )
                                        return
                                }
                                action(data.data.description)
                        })
                        .then(() => {
                                setError(null)
                                closeModal()
                        })
                        .catch((err) => setError(err))
        }

        useEffect(() => {
                register('description')
        }, [])

        return (
                <Modal
                        size="md"
                        show={isOpen}
                        onHide={closeModal}
                        autoFocus={false}
                >
                        <Modal.Header closeButton>
                                <Modal.Title>Cambiar</Modal.Title>
                        </Modal.Header>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                <Modal.Body>
                                        <div className="mb-3">
                                                <label className="form-label">Visión general</label>
                                                <CKEditor
                                                        data={watch('description')}
                                                        onChange={(e) => {
                                                                const text = e.editor.getData()
                                                                setValue('description', text)
                                                        }}
                                                        onInstanceReady={(e) => e.editor.setData(overview)}
                                                        config={{
                                                                toolbar: [
                                                                        { name: 'editing', items: ['Scayt'] },
                                                                        { name: 'links', items: ['Link', 'Unlink'] },
                                                                        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'] },
                                                                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Strike', 'RemoveFormat'] },
                                                                        '/',
                                                                        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
                                                                        { name: 'styles', items: ['Styles', 'Format'] },
                                                                        { name: 'tools', items: ['Maximize'] }
                                                                ],
                                                                removePlugins: 'elementspath,Anchor',
                                                                heigth: 100
                                                        }}
                                                        name="description"
                                                />
                                                {error && <p>{error}</p>}
                                        </div>
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button
                                                variant="primary"
                                                type="submit"
                                        >
                                                Enviar
                                        </Button>
                                        <Button className='btn-tertiary' onClick={closeModal}>
                                                Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal >
        )
}

export default OverviewModal