Proyectos de Subversion LeadersLinked - Backend

import { Button, Modal } from '@material-ui/core'
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 } = 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: 'error',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

                                setValue('user_id', data.data.user_id)
                                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: 'error',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

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

        return (
                <Modal size="sm" onHide={closeModal} show={isOpen}>
                        <Modal.Header closeButton>
                                <Modal.Title>Nuevo candidato</Modal.Title>
                        </Modal.Header>
                        <form onSubmit={handleSubmit(onSubmit)}>
                                {
                                        isShowSecondPage
                                                ?
                                                <>
                                                        <Modal.Body>
                                                                <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"
                                                                                type="file"
                                                                                name="file"
                                                                                accept='pdf/docx'
                                                                                ref={register}
                                                                                style={{ padding: '1px' }}
                                                                        />
                                                                </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>
                                                        </Modal.Body>
                                                        <Modal.Footer>
                                                                <Button
                                                                        variant="primary"
                                                                        type='submit'
                                                                >
                                                                        Enviar
                                                                </Button>
                                                                <Button variant="danger" onClick={closeModal}>
                                                                        Cancelar
                                                                </Button>
                                                        </Modal.Footer>
                                                </>
                                                :
                                                <>
                                                        <Modal.Body>
                                                                <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>

                                                        </Modal.Body>
                                                        <Modal.Footer>
                                                                <Button
                                                                        variant="primary"
                                                                        onClick={showSecondPage}
                                                                >
                                                                        Enviar
                                                                </Button>
                                                                <Button variant="danger" onClick={closeModal}>
                                                                        Cancelar
                                                                </Button>
                                                        </Modal.Footer>
                                                </>
                                }
                        </form>
                </Modal >
        )
}

export default AddModal