Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'
import axios from '../../../utils/axios'
import { Modal, Button } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import ToggleComponent from '../../../shared/ToggleComponent'

const EditModal = ({
        title = '',
        isOpen = false,
        currentItem = null,
        url ='',
        onComplete = function(){},
        onClose = function () {}
}) => {
        const [isActive, setIsActive] = useState(currentItem?.status === 'a' ? true : false)
        const {register,handleSubmit,formState: { errors }} = useForm()

        const onSubmit = (data) => {
                const formData = new FormData()
                
                Object.entries(data).forEach(([key, value]) => formData.append(key, value))
                formData.append('status', isActive ? 'a' : 'i')

                axios.post(url, formData)
                        .then(({ data: response }) => {
                                if (response.success) {
                                        onComplete()
                                        onClose()
                                }
                        })
                        .catch((err) => console.log(err))
        }

        return (
                <Modal show={isOpen} onHide={onClose}>
                        <Modal.Header closeButton>
                                <Modal.Title>{title} - {currentItem ? '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>
                                        <ToggleComponent currentValue={isActive} setValue={(value)=> setIsActive(value)} />
                                </Modal.Body>
                                <Modal.Footer>
                                        <Button variant="primary" type="submit">
                        Enviar
                                        </Button>
                                        <Button variant="danger" onClick={onClose}>
                        Cancelar
                                        </Button>
                                </Modal.Footer>
                        </form>
                </Modal >
        )
}

export default EditModal