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, errors } = 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='Años de 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 de años</label>
                                <input
                                        type='number'
                                        hidden={!isActive}
                                        className='form-control'
                                        name='experience_min'
                                        ref={register({
                                                required: isActive && true,
                                                valueAsNumber: true,
                                                min: 1,
                                                max: 40
                                        })}
                                />
                                {errors.experience_min?.type === 'required' && <p>Este campo es requerido</p>}
                        </div>
                        <div className='form-group'>
                                <label className="form-label">Máximo de años</label>
                                <input
                                        type='text'
                                        hidden={!isActive}
                                        className='form-control'
                                        name='experience_max'
                                        ref={register({
                                                required: isActive && true,
                                                valueAsNumber: true,
                                                min: 1,
                                                max: 40,
                                                validate: value => value > watch('experience_min')
                                        })}
                                />
                                {errors.experience_max?.type === 'validate' && <p>El máximo de años debe ser mayor que el minimo</p>}
                                {errors.experience_max?.type === 'max' && <p>El máximo de años permitidos es de 40</p>}
                                {errors.experience_max?.type === 'required' && <p>Este campo es requerido</p>}
                        </div>
                </SubmitModal>
        )
}

export default ExperienceModal