Proyectos de Subversion LeadersLinked - Backend

import axios from 'axios'
import React, { useEffect, 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 EditView = ({ actionLink }) => {

        const { register, handleSubmit, setValue, watch } = useForm()
        const [currentJobDescription, setCurretJobDescription] = useState('')
        const [jobDescriptionOptions, setJobDescriptionOptions] = useState([])
        const [status, setStatus] = useState('a')
        const dispatch = useDispatch()

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

        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)
                                setCurretJobDescription(data.data.job_description_id)
                                setStatus(data.data.status)
                        })
        }, [actionLink])

        useEffect(() => {
                axios.get(`/settings/jobs-description/edit/${currentJobDescription}`)
                        .then(({ data }) => {
                                if (!data.success) {
                                        return dispatch(addNotification({
                                                style: 'danger',
                                                msg: 'Ha ocurrido un error'
                                        }))
                                }

                                setJobDescriptionOptions([...data.data.jobs_description, { job_description_id: data.data.uuid, name: data.data.name }])
                        })
        }, [currentJobDescription])

        return (
                <section className="content">
                        <div className="row" style={{ padding: 16 }}>
                                <div className="col-xs-12 col-md-12">
                                        <form onSubmit={handleSubmit}>
                                                <div className="form-group">
                                                        <label htmlFor="form-name">Nombre</label>
                                                        <input type="text" name="name" ref={register({ required: true, maxLength: 50 })} />
                                                </div>
                                                <div className="form-group">
                                                        <label>Cargo a evaluar</label>
                                                        <select name="job_description_id" ref={register({ required: true })} className="form-control select2-hidden-accessible">
                                                                {
                                                                        jobDescriptionOptions.map(({ name, job_description_id }) => (
                                                                                <option selected={job_description_id === currentJobDescription} key={job_description_id} value={job_description_id}>{name}</option>
                                                                        ))
                                                                }
                                                        </select>
                                                </div>
                                                <div className="form-group">
                                                        <label htmlFor="form-description">Descripción</label>
                                                        <DescriptionInput
                                                                defaultValue={watch('description')}
                                                                name='description'
                                                                onChange={setValue}
                                                        />
                                                </div>
                                                <div className="form-group">
                                                        <label htmlFor="form-status">Estatus</label>
                                                        <select name="form-status" className="form-control">
                                                                <option selected={status === 'i'} value="i">Inactivo</option>
                                                                <option selected={status === 'a'} value="a">Activo</option>
                                                        </select>
                                                </div>
                                                <br />
                                                <div className="row">
                                                        <div className="col-xs-12 col-md-12">
                                                                <div className="panel-group" id="rows" />
                                                        </div>
                                                </div>
                                                <div className="form-group" id="competencies-to-job" style={{}}>
                                                        <div className="row">
                                                                <div className="col-xs-12 col-md-12">
                                                                        <hr />
                                                                        <h4 style={{ fontSize: 18, fontWeight: 'bold' }}>Competencias asociadas al cargo:</h4>
                                                                        <br />
                                                                        <div className="panel-group" id="rows-job-competencies">
                                                                                <div className="panel panel-default" id="panel-46d0f805-03ad-4c06-93c2-2a4ec87f6b97">
                                                                                        <div className="panel-heading">
                                                                                                <h4 className="panel-title" style={{ fontSize: 18 }}>
                                                                                                        <a className="accordion-toggle" data-toggle="collapse" aria-expanded="true" data-parent="#panel-46d0f805-03ad-4c06-93c2-2a4ec87f6b97" href="#collapse-46d0f805-03ad-4c06-93c2-2a4ec87f6b97">
                                                                                                                <span className="competency-name46d0f805-03ad-4c06-93c2-2a4ec87f6b97">
                                                                                                                        Competencias Transversales - Servicio
                                                                                                                </span>
                                                                                                        </a>
                                                                                                </h4>
                                                                                        </div>
                                                                                        <div id="collapse-46d0f805-03ad-4c06-93c2-2a4ec87f6b97" className="panel-collapse in collapse show">
                                                                                                <div className="panel-body">
                                                                                                        <div className="table-responsive">
                                                                                                                <table className="table table-bordered">
                                                                                                                        <thead>
                                                                                                                                <tr>
                                                                                                                                        <th style={{ width: '80%' }}>Conducta Observable</th>
                                                                                                                                        <th style={{ width: '20%' }}>Nivel</th>
                                                                                                                                </tr>
                                                                                                                        </thead>
                                                                                                                        <tbody>
                                                                                                                                <tr>
                                                                                                                                        <td className="text-left">
                                                                                                                                                Enfocar sus acciones al logro de los resultados planteados.
                                                                                                                                        </td>
                                                                                                                                        <td>
                                                                                                                                                Uno
                                                                                                                                        </td>
                                                                                                                                </tr>
                                                                                                                        </tbody>
                                                                                                                </table>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                                <div className="form-group">
                                                        <button type="button" form="form-main" className="btn btn-info">Guardar & Continuar</button>
                                                        <button type="button" className="btn btn-primary">Guardar & Cerrar</button>
                                                        <button type="button" className="btn btn-secondary">Cancelar</button>
                                                </div>
                                        </form>
                                </div>
                        </div>
                </section>

        )
}

export default EditView