Proyectos de Subversion LeadersLinked - Backend

import React, { useState } 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()
                        })
        }

        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={isOpen && 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