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