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(data)

		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