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 = [
        { 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 }) => {
                setCurrency(salary_currency)
                setValue("salary_min", salary_min)
                setValue("salary_max", salary_max)
                salary_visible === "y" ? setIsActive(true) : setIsActive(false)

            })
    }, [])

    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 for="status" className="btn btn-primary toggle-on">Mostrar</label>
                    <label for="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.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