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 = ({

    modalData,

    closeModal,

    dataLink

}) => {

    const currencyOptions = [

        { label: "Pesos mexicanos", value: "MXN" }

    ]

    const [isActive, setIsActive] = useState(false)

    const [currency, setCurrency] = useState("USD")

    const { register, watch } = useForm()

    useEffect(() => {

        getData(dataLink)

            .then(res => console.log(res))

    }, [])

    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)}

                    defaultValue={currencyOptions[0]}

                >

                    {

                        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