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 { getData } from '../../../helpers/fetchHelpers';

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

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

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

        axios.post(overviewUrl, formData)
            .then(({ data }) => {
                if (!data.success) {
                    return setError(data.data)
                }
                action(data.data)
            })
            .then(() => {
                setError(null)
                closeModal()
            })
            .catch((err) => setError(err))
    };

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

    useEffect(() => {
        getData(overviewUrl)
            .then(({ description }) => {
                setValue("description", description)
            })
            .catch(err => setError(err))
    }, [isOpen]);

    return (
        <Modal
            size="lg"
            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">
                        <CKEditor
                            data={watch("description")}
                            onChange={(e) => {
                                const text = e.editor.getData();
                                setValue("description", text);
                            }}
                            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 variant="danger" onClick={closeModal}>
                        Cancelar
                    </Button>
                </Modal.Footer>
            </form>
        </Modal >
    )
}

export default OverviewModal