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 OverviewModal = ({

	isOpen = false,

	closeModal = function () { },

	overviewUrl,

	action,

	overview

}) => {

	const { register, handleSubmit, setValue, watch } = useForm()

	const [error, setError] = useState(null)

	const onSubmit = ({ description }) => {

		const formData = new FormData

		formData.append('description', description)

		axios.post(overviewUrl, formData)

			.then(({ data }) => {

				if (!data.success) {

					return setError('Error')

				}

				action(data.data.description)

			})

			.then(() => {

				setError(null)

				closeModal()

			})

			.catch((err) => setError(err))

	}

	useEffect(() => {

		register('description')

	}, [])

	return (

		<Modal

			size="md"

			show={isOpen}

			onHide={closeModal}

			autoFocus={false}

		>

			<Modal.Header closeButton>

				<Modal.Title>Cambiar</Modal.Title>

			</Modal.Header>

			<form onSubmit={handleSubmit(onSubmit)}>

				<Modal.Body>

					<div className="mb-3">

						<label className="form-label">Visión general</label>

						<CKEditor

							data={watch('description')}

							onChange={(e) => {

								const text = e.editor.getData()

								setValue('description', text)

							}}

							onInstanceReady={(e) => e.editor.setData(overview)}

							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"

						/>

						{error && <p>{error}</p>}

					</div>

				</Modal.Body>

				<Modal.Footer>

					<Button

						variant="primary"

						type="submit"

					>

						Enviar

					</Button>

					<Button className='btn-tertiary' onClick={closeModal}>

						Cancelar

					</Button>

				</Modal.Footer>

			</form>

		</Modal >

	)

}

export default OverviewModal