Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useState } from 'react'
import { Modal, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'

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

        const {
                register,
                handleSubmit,
                formState: { errors }
        } = useForm()
        const [isActive, setIsActive] = useState(true)

        const onSubmit = (data) => {
                let newData = { ...data, status: isActive ? '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))
        }

        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>
                                        <div className="form-group">
                                                <label>Mínimo</label>
                                                <input
                                                        className="form-control"
                                                        name="minimum_no_of_employee"
                                                        ref={register}
                                                        required
                                                        defaultValue={currentItem ? currentItem.minimum_no_of_employee : ''}
                                                />
                                                {errors.minimum_no_of_employee && <p>Este campo es requerido</p>}
                                        </div>
                                        <div className="form-group">
                                                <label>Máximo</label>
                                                <input
                                                        className="form-control"
                                                        name="maximum_no_of_employee"
                                                        ref={register}
                                                        defaultValue={currentItem ? currentItem.maximum_no_of_employee : ''}
                                                />
                                                {errors.maximum_no_of_employee && <p>Este campo es requerido</p>}
                                        </div>
                                        <div
                                                className={`toggle btn btn-primary ${!isActive && 'off'}`}
                                                data-toggle="toggle"
                                                role="button"
                                                onClick={() => setIsActive(!isActive)}
                                                style={{ width: '130px' }}
                                        >
                                                <input
                                                        type="checkbox"
                                                        name="status"
                                                        ref={register}
                                                        checked={isActive}
                                                />
                                                <div className="toggle-group">
                                                        <label htmlFor="status" className="btn btn-primary toggle-on">Activo</label>
                                                        <label htmlFor="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