Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 15237 | Rev 15248 | 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)
14893 stevensc 17 
			.then(({ experience_visible, experience_min }) => {
14167 stevensc 18 
				setValue('experience_min', experience_min)
19 
				experience_visible === 'y' ? setIsActive(true) : setIsActive(false)
20 
			})
21 
	}, [])
8452 stevensc 22 
 
14167 stevensc 23 
	return (
24 
		<SubmitModal
14893 stevensc 25 
			title='Años de experiencia'
14167 stevensc 26 
			closeModal={closeModal}
27 
			submitData={{
28 
				experience_visible: isActive ? 'y' : 'n',
29 
				experience_min: watch('experience_min'),
14893 stevensc 30 
				experience_max: 40
14167 stevensc 31 
			}}
32 
			postLink={dataLink}
33 
		>
34 
			<div
35 
				className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
36 
				data-toggle="toggle"
37 
				role="button"
38 
				style={{ width: '130px' }}
39 
				onClick={() => setIsActive(!isActive)}
40 
			>
41 
				<input
42 
					type="checkbox"
43 
					checked={isActive}
44 
				/>
45 
				<div className="toggle-group">
46 
					<label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
47 
					<label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
48 
					<span className="toggle-handle btn btn-light"></span>
49 
				</div>
50 
			</div>
51 
			<div className='form-group'>
14893 stevensc 52 
				<label className="form-label">Minimo de años</label>
14167 stevensc 53 
				<input
14893 stevensc 54 
					type='number'
14167 stevensc 55 
					className='form-control'
56 
					disabled={!isActive}
57 
					name='experience_min'
58 
					ref={register({
59 
						required: true,
60 
						valueAsNumber: true,
15237 stevensc 61 
						min: 1,
62 
						max: 40
14167 stevensc 63 
					})}
64 
				/>
65 
			</div>
15237 stevensc 66 
			<div className='form-group'>
67 
				<label className="form-label">Máximo de años</label>
14167 stevensc 68 
				<input
69 
					type='text'
70 
					className='form-control'
15237 stevensc 71 
					disabled
14167 stevensc 72 
					name='experience_max'
15237 stevensc 73 
					value={40}
15247 stevensc 74 
					ref={register({
75 
						required: true,
76 
						valueAsNumber: true,
77 
						min: 1,
78 
						max: 40,
79 
						validate: value => value > watch('experience_min')
80 
					})}
14167 stevensc 81 
				/>
15237 stevensc 82 
			</div>
14167 stevensc 83 
		</SubmitModal>
84 
	)
8452 stevensc 85 
}
86 
 
87 
export default ExperienceModal