Proyectos de Subversion LeadersLinked - Backend

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()

	// State

	const [currentJobDescription, setCurretJobDescription] = useState('')

	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', currentJobDescription)

		submitData.append('content', '[]')

		axios.post(actionLink, submitData)

			.then(({ data }) => {

				if (!data.success) {

					return dispatch(addNotification({

						style: 'danger',

						msg: 'Ha ocurrido un error'

					}))

				}

				dispatch(addNotification({

					style: 'success',

					msg: data.data

				}))

			})

	}

	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>

					</div>

					<div className="form-group">

						<label>Cargo a evaluar</label>

						<select name="job_description_id" className="form-control" onChange={(e) => setCurretJobDescription(e.target.value)}>

							{

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