• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

198
Vistas
Send a single API request by waiting for both the fields to be selected

I am using React with Typescript. I have a requirement where we have a filters section with DateRangePicker as one field and dropdown of checkboxes as another. Whenever a date range is selected in the calendar and Ok is clicked we have a handler function that gets called which in turn dispatches a redux action and subsequently api request is sent to filter the data based on the selected date range. Similarly when we check or uncheck a checkbox in the second field another handler function gets called which in turn dispatches a redux action and subsequently api request is sent to filter the data based on the checked data. Now, I need to wait 5 seconds for the user after he/she selects the date range and see if the user checks a checkbox within 5 seconds. If yes, I need to just send a single api request instead of two(one for date range selection and one for checkbox selection). This is how my handler functions look like below

const dateChangeHandler = (value: DateRange | null, event: React.SyntheticEvent) => {
    setSelectedDateRange(value);
    dispatch(fetchFilteredData({ payload: { dateRange: value, selectedTools: selectedTools } }))
}

const selectionChangeHandler = (value: string[]) => {
    if (value.length > 0) {
        setSelectedTools(value);
        dispatch(fetchFilteredData({ payload: { dateRange: selectedDateRange, selectedTools: value } }))
    } else {
        dispatch(fetchFilteredData({ payload: { dateRange: selectedDateRange, selectedTools: [] } }))
    }

};

Any idea how I can proceed further with this? Any help would be much appreciated. Thanks in advance!

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You can set a timeout that, 5s later will trigger the dispatch event. Store the timeout ID in a state/ref and clearTimeout in the other input handler:

const [timeoutId, setTimeoutId] = useState(null);

const dateChangeHandler = (value: DateRange | null, event: React.SyntheticEvent) => {
    setSelectedDateRange(value);
    
    const _timeoutId = window.setTimeout(() => dispatch(fetchFilteredData({ payload: { dateRange: value, selectedTools: selectedTools } })), 5000)
    setTimeoutId(_timeoutId);
}

const selectionChangeHandler = (value: string[]) => {
    if (value.length > 0) {
        if (timeoutId) {
            window.clearTimeout(timeoutId);
            setTimeoutId(null);
        }
        setSelectedTools(value);
        dispatch(fetchFilteredData({ payload: { dateRange: selectedDateRange, selectedTools: value } }))
    }
    ...
};
about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda