Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 8452 | Rev 14893 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
8452 stevensc 1 
import React, { useState } from 'react'
14167 stevensc 2 
import { useEffect } from 'react'
3 
import { useForm } from 'react-hook-form'
4 
import { getData } from '../../../helpers/fetchHelpers'
8452 stevensc 5 
import SubmitModal from './SubmitModal'
6 
 
7 
const ExperienceModal = ({
14167 stevensc 8 
	closeModal,
9 
	dataLink
8452 stevensc 10 
}) => {
11 
 
14167 stevensc 12 
	const [isActive, setIsActive] = useState(false)
13 
	const { register, watch, setValue } = useForm()
8452 stevensc 14 
 
14167 stevensc 15 
	useEffect(() => {
16 
		getData(dataLink)
17 
			.then(({
18 
				experience_visible,
19 
				experience_min,
20 
				experience_max }) => {
21 
				setValue('experience_min', experience_min)
22 
				setValue('experience_max', experience_max)
23 
				experience_visible === 'y' ? setIsActive(true) : setIsActive(false)
8452 stevensc 24 
 
14167 stevensc 25 
			})
26 
	}, [])
8452 stevensc 27 
 
14167 stevensc 28 
	return (
29 
		<SubmitModal
30 
			title='Experiencia'
31 
			closeModal={closeModal}
32 
			submitData={{
33 
				experience_visible: isActive ? 'y' : 'n',
34 
				experience_min: watch('experience_min'),
35 
				experience_max: watch('experience_max')
36 
			}}
37 
			postLink={dataLink}
38 
		>
39 
			<div
40 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
41 
				data-toggle="toggle"
42 
				role="button"
43 
				style={{ width: '130px' }}
44 
				onClick={() => setIsActive(!isActive)}
45 
			>
46 
				<input
47 
					type="checkbox"
48 
					checked={isActive}
49 
				/>
50 
				<div className="toggle-group">
51 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
52 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
53 
					<span className="toggle-handle btn btn-light"></span>
54 
				</div>
55 
			</div>
56 
			<div className='form-group'>
57 
				<label className="form-label">Minimo</label>
58 
				<input
59 
					type='text'
60 
					className='form-control'
61 
					disabled={!isActive}
62 
					name='experience_min'
63 
					ref={register({
64 
						required: true,
65 
						valueAsNumber: true,
66 
						min: 1
67 
					})}
68 
				/>
69 
			</div>
70 
			<div className='form-group'>
71 
				<label className="form-label">Maximo</label>
72 
				<input
73 
					type='text'
74 
					className='form-control'
75 
					disabled={!isActive}
76 
					name='experience_max'
77 
					ref={register({
78 
						required: true,
79 
						valueAsNumber: true,
80 
						validate: value => value > watch('experience_min')
81 
					})}
82 
				/>
83 
			</div>
84 
		</SubmitModal>
85 
	)
8452 stevensc 86 
}
87 
 
88 
export default ExperienceModal