Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'

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

import axios from 'axios'

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

import { useDispatch } from 'react-redux'

import Datetime from 'react-datetime'

import 'react-datetime/css/react-datetime.css'

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

const AddModal = ({

	action_link,

	closeModal,

	isOpen,

	onComplete,

	email_link

}) => {

	//Hooks

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

	const [year, setYear] = useState(new Intl.DateTimeFormat('en-CA').format(new Date()))

	const dispatch = useDispatch()

	const onSubmit = (data) => {

		const submitData = new FormData()

		submitData.append('date', year)

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

			submitData.append(key, value)

		})

		axios.post(action_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()

				onComplete()

				dispatch(addNotification({

					style: 'success',

					msg: 'Resgistro guardadof'

				}))

			})

	}

	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="md" onHide={closeModal} show={isOpen}>

			<Modal.Header closeButton>

				<Modal.Title>

                    Evaluación

				</Modal.Title>

			</Modal.Header>

			<form onSubmit={handleSubmit(onSubmit)}>

				<Modal.Body>

					<div className='form-group'>

						<label className="form-label">Último día</label>

						<Datetime

							dateFormat="DD-MM-YYYY"

							timeFormat={false}

							onChange={(e) =>

								setYear(new Intl.DateTimeFormat('en-CA', { year: 'numeric', month: 'numeric', day: 'numeric' }).format(e.toDate()))

							}

							inputProps={{ className: 'form-control' }}

							initialValue={Date.parse(year)}

							closeOnSelect

							value={year}

						/>

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

					<button

						type="button"

						className="btn btn-primary mb-1"

						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>

				</Modal.Body>

				<Modal.Footer>

					<Button variant="primary" type='submit'>

                        Enviar

					</Button>

					<Button variant="danger" onClick={closeModal}>

                        Cancelar

					</Button>

				</Modal.Footer>

			</form>

		</Modal >

	)

}

export default AddModal