Proyectos de Subversion LeadersLinked - Backend

import React, { useState } from 'react'
import { useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { getData } from '../../../helpers/fetchHelpers'
import SubmitModal from './SubmitModal'

const ExperienceModal = ({
        closeModal,
        dataLink
}) => {

        const [isActive, setIsActive] = useState(false)
        const { register, watch, setValue } = useForm()

        useEffect(() => {
                getData(dataLink)
                        .then(({
                                experience_visible,
                                experience_min,
                                experience_max }) => {
                                setValue('experience_min', experience_min)
                                setValue('experience_max', experience_max)
                                experience_visible === 'y' ? setIsActive(true) : setIsActive(false)

                        })
        }, [])

        return (
                <SubmitModal
                        title='Experiencia'
                        closeModal={closeModal}
                        submitData={{
                                experience_visible: isActive ? 'y' : 'n',
                                experience_min: watch('experience_min'),
                                experience_max: watch('experience_max')
                        }}
                        postLink={dataLink}
                >
                        <div
                                className={`toggle btn btn-block btn-primary ${!isActive && 'off'}`}
                                data-toggle="toggle"
                                role="button"
                                style={{ width: '130px' }}
                                onClick={() => setIsActive(!isActive)}
                        >
                                <input
                                        type="checkbox"
                                        checked={isActive}
                                />
                                <div className="toggle-group">
                                        <label htmlFor="status" className="btn btn-primary toggle-on">Mostrar</label>
                                        <label htmlFor="status" className="btn btn-light toggle-off">No mostrar</label>
                                        <span className="toggle-handle btn btn-light"></span>
                                </div>
                        </div>
                        <div className='form-group'>
                                <label className="form-label">Minimo</label>
                                <input
                                        type='text'
                                        className='form-control'
                                        disabled={!isActive}
                                        name='experience_min'
                                        ref={register({
                                                required: true,
                                                valueAsNumber: true,
                                                min: 1
                                        })}
                                />
                        </div>
                        <div className='form-group'>
                                <label className="form-label">Maximo</label>
                                <input
                                        type='text'
                                        className='form-control'
                                        disabled={!isActive}
                                        name='experience_max'
                                        ref={register({
                                                required: true,
                                                valueAsNumber: true,
                                                validate: value => value > watch('experience_min')
                                        })}
                                />
                        </div>
                </SubmitModal>
        )
}

export default ExperienceModal