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