Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from 'react'

import { useForm } from 'react-hook-form'

import { CKEditor } from 'ckeditor4-react'

import { Modal, Button } from 'react-bootstrap'

import { axios, CKEDITOR_OPTIONS } from '../../../utils'

import ToggleComponent from '../../../shared/ToggleComponent'

const EditModal = ({

	title = 'Indusrias',

	url = '',

	isOpen = false,

	currentItem = null,

	onClose = function () { },

	onComplete = function () { }

}) => {

	const [isActive, setIsActive] = useState(currentItem?.status === 'a' ? true : false)

	const { register, handleSubmit, getValues, setValue, clearErrors, formState: { errors } } = useForm({

		defaultValues: {

			description: '',

		}

	})

	const onSubmit = (data) => {

		const formData = new FormData()

		Object.entries(data).forEach(([key, value]) => formData.append(key, value))

		formData.append('status', isActive === true ? 'a' : 'i')

		axios.post(url, formData)

			.then(({ data: response }) => {

				if (response.success) {

					onComplete()

					onClose()

				}

			})

			.catch((err) => console.log(err))

	}

	useEffect(() => {

		register('description', {

			required: { value: 'true' },

		})

	}, [currentItem])

	useEffect(() => {

		if (currentItem?.status === 'a') {

			setIsActive(true)

		}

	}, [currentItem])

	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>

					<CKEditor

						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={CKEDITOR_OPTIONS}

					/>

					{errors.description && <p>Este campo es requerido</p>}

					<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