Proyectos de Subversion LeadersLinked - Backend

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

import axios from 'axios'

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

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

import { CKEditor } from 'ckeditor4-react'

import { useDispatch } from 'react-redux'

import { addNotification } from '../../../redux/notification/notification.actions'

import { config } from '../../../shared/helpers/ckeditor_config'

const EditModal = ({ closeModal, isOpen, edit_link, resetLink }) => {

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

	const dispatch = useDispatch()

	const [fileUrl, setFileUrl] = useState('')

	const [pointsOptions] = useState([

		{ label: 'Evaluación', value: 0 },

		{ label: 'Sugerir otro cargo', value: 0 },

		{ label: '25%', value: 1 },

		{ label: '50%', value: 2 },

		{ label: '75%', value: 3 },

		{ label: '100%', value: 4 }

	])

	const [statusOptions] = useState([

		{ label: 'Estatus', value: '' },

		{ label: 'Aceptado', value: 'a' },

		{ label: 'Rechazado', value: 'r' }

	])

	const onSubmit = (data) => {

		const submitData = new FormData()

		Object.entries(data)

			.map(([key, value]) => submitData.append(key, value))

		axios.post(edit_link, submitData)

			.then(({ data }) => {

				if (!data.success) {

					typeof data.data === 'string'

						?

						dispatch(addNotification({

							style: 'danger',

							msg: data.data

						}))

						: Object.entries(data.data).map(([key, value]) =>

							value.map(err =>

								dispatch(addNotification({

									style: 'danger',

									msg: `${key}: ${err}`

								}))

							)

						)

					return

				}

				clearErrors()

				closeModal()

				resetLink()

				dispatch(addNotification({

					style: 'success',

					msg: 'Registro actualizado'

				}))

			})

	}

	const getData = ({ editor }) => {

		axios.get(edit_link)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				setFileUrl(data.data.file)

				Object.keys(data.data).map((key) => register(key))

				Object.entries(data.data).map(([key, value]) => {

					key === 'coment' && editor.setData(value)

					key !== 'file' && setValue(key, value)

				})

				clearErrors()

			})

	}

	useEffect(() => getData(), [isOpen])

	return (

		<Modal size="md" onHide={closeModal} show={isOpen}>

			<Modal.Header closeButton>

				<Modal.Title>Editar candidato</Modal.Title>

			</Modal.Header>

			<form onSubmit={handleSubmit(onSubmit)}>

				<Modal.Body>

					<div className='form-group'>

						<label className="form-label">Nombre</label>

						<input type="text" name='first_name' className='form-control' ref={register({ required: true })} />

						{errors.first_name && <p>{errors.first_name.message}</p>}

					</div>

					<div className='form-group'>

						<label className="form-label">Apellido</label>

						<input type="text" name='last_name' className='form-control' ref={register({ required: true })} />

						{errors.last_name && <p>{errors.last_name.message}</p>}

					</div>

					<div className='form-group'>

						<label className="form-label">Correo electrónico</label>

						<input type="email" name='email' className='form-control' ref={register({ required: true })} />

						{errors.email && <p>{errors.email.message}</p>}

					</div>

					<div className='form-group'>

						<label className="form-label">Comentario</label>

						<CKEditor

							onChange={(e) => setValue('coment', e.editor.getData())}

							onInstanceReady={getData}

							config={config} />

						{errors.coment && <p>{errors.coment.message}</p>}

					</div>

					<div className='form-group'>

						<label className="form-label">Evaluación</label>

						<select className='form-control' name='evaluation' ref={register({ required: true })}>

							{pointsOptions.map(({ label, value }) =>

								<option

									key={value}

									selected={watch('evaluation') === value}

									value={value}>

									{label}

								</option>

							)}

						</select>

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

					</div>

					<div className='form-group'>

						<label className="form-label">Resumen Curricular</label>

						<input

							className="form-control p-0"

							type="file"

							name="file"

							accept='pdf/docx'

							ref={register}

							style={{ height: '2rem' }}

						/>

					</div>

					<a href={fileUrl} className="btn btn-primary" target='_blank' rel="noreferrer">

						CV Actual

					</a>

					<div className='form-group'>

						<label className="form-label">Estatus</label>

						<select className='form-control' name='status' ref={register({ required: true })}>

							{statusOptions.map(({ label, value }) =>

								<option

									key={value}

									selected={watch('status') === value}

									value={value}>

									{label}

								</option>

							)}

						</select>

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

					</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