Proyectos de Subversion LeadersLinked - Backend

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

import axios from 'axios'

import React from 'react'

import { useState } from 'react'

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

import { useDispatch } from 'react-redux'

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

import DescriptionInput from '../../../shared/DescriptionInput'

const AddModal = ({ closeModal, email_link, isOpen, add_link }) => {

	//Hooks

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

	const dispatch = useDispatch()

	//States

	const [isShowSecondPage, setIsShowSecondPage] = useState(false)

	const [pointsOptions] = useState([

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

		{ 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(add_link, submitData)

			.then(({ data }) => {

				if (!data.success) {

					dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				clearErrors()

				closeModal()

				dispatch(addNotification({

					style: 'success',

					msg: 'Usuario registrado'

				}))

			})

	}

	const showSecondPage = () => {

		if (watch('first_name') && watch('last_name') && watch('email')) {

			return setIsShowSecondPage(true)

		}

		setError('first_name', { message: 'Este campo es requerido' })

		setError('last_name', { message: 'Este campo es requerido' })

		setError('email', { message: 'Este campo es requerido' })

	}

	const checkEmail = () => {

		axios.get(email_link, { params: { email: watch('email') } })

			.then(({ data }) => {

				if (!data.success) {

					dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				setValue('user_id', data.data.user_id)

				setValue('first_name', data.data.first_name)

				setValue('last_name', data.data.last_name)

				clearErrors()

			})

	}

	return (

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

			<Modal.Header closeButton>

				<Modal.Title>Nuevo candidato</Modal.Title>

			</Modal.Header>

			<form onSubmit={handleSubmit(onSubmit)}>

				<Modal.Body>

					{

						isShowSecondPage

							?

							<div style={isShowSecondPage ? { display: 'none' } : { display: 'inline-flex' }}>

								<div className='form-group'>

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

									<DescriptionInput

										name='comment'

										setValue={setValue}

									/>

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

								</div>

								<div className='form-group'>

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

									<select className='form-control' name='evaluation' ref={register}>

										{

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

												return <option key={value} value={value}>{label}</option>

											})

										}

									</select>

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

								<div className='form-group'>

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

									<select className='form-control' name='evaluation' ref={register}>

										{

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

												return <option key={value} value={value}>{label}</option>

											})

										}

									</select>

								</div>

							</div>

							:

							<div style={!isShowSecondPage ? { display: 'none' } : { display: 'inline-flex' }}>

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

								<button

									type="button"

									className="btn btn-primary"

									onClick={checkEmail}

								>

									Verificar Email

								</button>

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

					}

				</Modal.Body>

				<Modal.Footer>

					{

						isShowSecondPage

							?

							<>

								<Button variant="danger" onClick={() => setIsShowSecondPage(false)}>

									Cancelar

								</Button>

								<Button

									variant="primary"

									type='submit'

								>

									Enviar

								</Button>

							</>

							:

							<Button

								variant="primary"

								onClick={showSecondPage}

							>

								Siguiente

							</Button>

					}

				</Modal.Footer>

			</form>

		</Modal >

	)

}

export default AddModal