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 SalaryModal = ({
        closeModal,
        dataLink
}) => {

        const [currencyOptions, setCurrencyOptions] = useState([{ label: 'Pesos mexicanos', value: 'MXN' }])
        const [isActive, setIsActive] = useState(false)
        const [currency, setCurrency] = useState(currencyOptions[0].value)
        const { register, watch, setValue } = useForm()

        useEffect(() => {
                getData(dataLink)
                        .then(({
                                salary_visible,
                                salary_currency,
                                salary_min,
                                salary_max,
                                currencies }) => {
                                setCurrency(salary_currency)
                                setValue('salary_min', salary_min)
                                setValue('salary_max', salary_max)
                                salary_visible === 'y' ? setIsActive(true) : setIsActive(false)
                                setCurrencyOptions(Object.entries(currencies).map(([value, key]) => ({ label: key, value: value })))
                        })
        }, [])

        return (
                <SubmitModal
                        title='Salario'
                        closeModal={closeModal}
                        submitData={{
                                salary_visible: isActive ? 'y' : 'n',
                                salary_currency: currency,
                                salary_min: watch('salary_min'),
                                salary_max: watch('salary_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">Moneda</label>
                                <select
                                        className='form-control'
                                        name="employment_type"
                                        onChange={(e) => setCurrency(e.target.value)}
                                        value={currency}
                                >
                                        {
                                                !!currencyOptions.length &&
                                                currencyOptions.map(({ value, label }) => (
                                                        <option key={value} value={value}>{label}</option>
                                                ))
                                        }
                                </select>

                        </div>
                        <div className='form-group'>
                                <label className="form-label">Minimo</label>
                                <input
                                        type='text'
                                        className='form-control'
                                        disabled={!isActive}
                                        name='salary_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='salary_max'
                                        ref={register({
                                                required: true,
                                                valueAsNumber: true,
                                                validate: value => value > watch('salary_min')
                                        })}
                                />
                        </div>
                </SubmitModal>
        )
}

export default SalaryModal