Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, useState } from 'react'
import parse from 'html-react-parser'
import { useForm } from 'react-hook-form'
import { useDispatch } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { addNotification } from '../../../redux/notification/notification.actions'
import DescriptionInput from '../../../shared/DescriptionInput'

const AddView = ({ actionLink, jobsDescription: jobDescriptionOptions }) => {

        // Hooks
        const history = useHistory()
        const { register, setValue, watch, reset } = useForm()
        const dispatch = useDispatch()

        const [status, setStatus] = useState('a')

        const onSubmit = () => {
                const submitData = new FormData()
                submitData.append('name', watch('name'))
                submitData.append('description', watch('description'))
                submitData.append('status', status)
                submitData.append('job_description_id', watch('job_description_id'))
                submitData.append('content', '[]')

                axios.post(actionLink, 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
                                }

                                dispatch(addNotification({
                                        style: 'success',
                                        msg: data.data
                                }))
                        })
        }

        useEffect(() => {
                axios.get(actionLink)
                        .then(({ data }) => {
                                if (!data.success) {
                                        return dispatch(addNotification({
                                                style: 'danger',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

                                setValue('name', data.data.name)
                                setValue('description', data.data.description)
                                setValue('job_description_id', data.data.job_description_id)
                                setStatus(data.data.status)
                        })
        }, [actionLink])

        const submitAndClose = () => {
                onSubmit()
                reset()
                history.goBack()
        }

        useEffect(() => {
                register('description')
        }, [])

        return (
                <section className="content">
                        <div className="row" style={{ padding: 16 }}>
                                <div className="col-xs-12 col-md-12">
                                        <div className="form-group">
                                                <label>Nombre</label>
                                                <input type="text" name="name" className='form-control' ref={register({ required: true, maxLength: 50 })} />
                                        </div>
                                        <div className="form-group">
                                                <label>Cargo a evaluar</label>
                                                <select name="job_description_id" className="form-control" ref={register}>
                                                        {
                                                                jobDescriptionOptions.map(({ name, uuid }) => (
                                                                        <option key={uuid} value={uuid}>{name}</option>
                                                                ))
                                                        }
                                                </select>
                                        </div>
                                        <div className="form-group">
                                                <label htmlFor="form-description">Descripción</label>
                                                <DescriptionInput
                                                        defaultValue={typeof watch('description') === 'string' ? parse(watch('description')) : ''}
                                                        name='description'
                                                        onChange={setValue}
                                                />
                                        </div>
                                        <div className="form-group">
                                                <label htmlFor="form-status">Estatus</label>
                                                <select name="form-status" className="form-control" onChange={(e) => setStatus(e.target.value)} value={status}>
                                                        <option selected={status === 'i'} value="i">Inactivo</option>
                                                        <option selected={status === 'a'} value="a">Activo</option>
                                                </select>
                                        </div>
                                        <br />
                                        <div className="d-flex" style={{ gap: '5px' }}>
                                                <button type="button" className="btn btn-info" onClick={onSubmit}>Guardar & Continuar</button>
                                                <button type="button" className="btn btn-primary" onClick={submitAndClose}>Guardar & Cerrar</button>
                                                <button type="button" className="btn btn-secondary" onClick={() => history.goBack()}>Cancelar</button>
                                        </div>
                                </div>
                        </div >
                </section >

        )
}

export default AddView