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";

const EditModal = ({
    title = '',
    isEdit = false,
    isOpen = false,
    closeModal = function () { },
    currentItem,
    url,
    action
}) => {

    const {
        register,
        handleSubmit,
        getValues,
        setValue,
        watch,
        clearErrors,
        formState: { errors }
    } = useForm({
        defaultValues: {
            description: '',
        }
    });
    const [isActive, setIsActive] = useState(false);

    const onSubmit = (data) => {
        let newData = { ...data, status: isActive === true ? "a" : "i" }
        let formData = new URLSearchParams(newData).toString()
        axios.post(url, formData)
            .then(async ({ data }) => {
                if (data.success) {
                    try {
                        await action()
                        closeModal()
                    }
                    catch (err) { console.log(err) }
                }
            })
            .catch((err) => console.log(err))
    };

    useEffect(() => {
        register("description", {
            required: { value: "true" },
        });
    }, [currentItem]);

    useEffect(() => {
        if (currentItem && currentItem.status === "a") {
            setIsActive(true)
        }
    }, [currentItem]);

    return (
        <Modal
            size="lg"
            show={isOpen}
            onHide={closeModal}
            autoFocus={false}
        >
            <Modal.Header closeButton>
                <Modal.Title>{title} - {isEdit ? 'Editar' : 'Agregar'}</Modal.Title>
            </Modal.Header>
            <form onSubmit={handleSubmit(onSubmit)}>
                <Modal.Body>
                    <div className="form-group">
                        <label>Nombre</label>
                        <input
                            className='form-control'
                            name='name'
                            ref={register}
                            defaultValue={currentItem ? currentItem.name : ''}
                        />
                        {errors.name && <p>Este campo es requerido</p>}
                    </div>
                    <CKEditor
                        data={watch("description")}
                        onChange={(e) => {
                            const text = e.editor.getData();
                            setValue("description", text);
                            if (errors.description && getValues(description)) {
                                clearErrors("description");
                            }
                        }}
                        onInstanceReady={(e) => currentItem && e.editor.setData(currentItem.name)}
                        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"
                    />
                    {errors.description && <p>Este campo es requerido</p>}
                    <div
                        className={`toggle btn btn-primary ${!isActive && "off"}`}
                        data-toggle="toggle"
                        role="button"
                        style={{ width: '130px' }}
                        onClick={() => setIsActive(!isActive)}
                    >
                        <input
                            type="checkbox"
                            name="status"
                            checked={isActive}
                        />
                        <div className="toggle-group">
                            <label for="status" className="btn btn-primary toggle-on">Activo</label>
                            <label for="status" className="btn btn-light toggle-off">Inactivo</label>
                            <span className="toggle-handle btn btn-light"></span>
                        </div>
                    </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 EditModal