Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3512 | Rev 3521 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3512 Rev 3514
Línea 1... Línea 1...
1 
import { useState, useEffect, useCallback } from 'react';
 1 
import { useState, useEffect, useCallback } from 'react';
- 
 
 2 
import { useSearchParams } from 'react-router-dom';
Línea 2... Línea 3...
2 
 
 3 
 
- 
 
 4 
export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
- 
 
 5 
  const [searchParams, setSearchParams] = useSearchParams();
3 
export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
 6 
 
4 
  const getQueryFromUrl = useCallback(() => {
 - 
 
5 
    const params = new URLSearchParams(window.location.search);
 7 
  const getQueryFromUrl = useCallback(() => {
6 
    return params.get(paramName);
 8 
    return searchParams.get(paramName);
Línea 7... Línea 9...
7 
  }, [paramName]);
 9 
  }, [searchParams, paramName]);
8 
 
 10 
 
Línea 9... Línea 11...
9 
  const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
 11 
  const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
10 
  const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');
 12 
  const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');
11 
 
 13 
 
12 
  // Effect to initialize inputValue from URL if it changes externally
 14 
  // Efecto para inicializar inputValue desde la URL si cambia externamente
13 
  // or on initial load if not already set by useState initializer
 15 
  // o en la carga inicial si no está configurado por el inicializador de useState
14 
  useEffect(() => {
 16 
  useEffect(() => {
15 
    const queryFromUrl = getQueryFromUrl();
 17 
    const queryFromUrl = getQueryFromUrl();
16 
    if (queryFromUrl !== null && queryFromUrl !== inputValue) {
 18 
    if (queryFromUrl !== null && queryFromUrl !== inputValue) {
Línea 17... Línea 19...
17 
      setInputValue(queryFromUrl);
 19 
      setInputValue(queryFromUrl);
18 
    }
 20 
    }
19 
  }, [getQueryFromUrl, inputValue]);
 21 
  }, [getQueryFromUrl, inputValue]);
20 
 
 22 
 
21 
  // Effect for debouncing inputValue to debouncedValue
 23 
  // Efecto para retardar (debounce) inputValue a debouncedValue
Línea 22... Línea 24...
22 
  useEffect(() => {
 24 
  useEffect(() => {
23 
    const handler = setTimeout(() => {
 25 
    const handler = setTimeout(() => {
24 
      setDebouncedValue(inputValue);
 26 
      setDebouncedValue(inputValue);
25 
    }, debounceDelay);
 27 
    }, debounceDelay);
Línea 26... Línea 28...
26 
 
 28 
 
27 
    return () => {
 29 
    return () => {
28 
      clearTimeout(handler);
 - 
 
29 
    };
 30 
      clearTimeout(handler);
Línea 30... Línea 31...
30 
  }, [inputValue, debounceDelay]);
 31 
    };
31 
 
 32 
  }, [inputValue, debounceDelay]);
- 
 
 33 
 
32 
  // Effect for updating URL when debouncedValue changes
 34 
  // Efecto para actualizar la URL cuando debouncedValue cambia
33 
  useEffect(() => {
 35 
  useEffect(() => {
34 
    const params = new URLSearchParams(window.location.search);
 36 
    const currentParamValue = searchParams.get(paramName);
35 
    const currentParamValue = params.get(paramName);
 37 
 
36 
 
 38 
    if (debouncedValue) {
37 
    if (debouncedValue) {
 39 
      if (currentParamValue !== debouncedValue) {
38 
      if (currentParamValue !== debouncedValue) {
 40 
        const newSearchParams = new URLSearchParams(searchParams);
39 
        params.set(paramName, debouncedValue);
 41 
        newSearchParams.set(paramName, debouncedValue);
40 
        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
 - 
 
41 
      }
 - 
 
42 
    } else {
 - 
 
43 
      if (currentParamValue !== null) {
 - 
 
44 
        params.delete(paramName);
 42 
        setSearchParams(newSearchParams);
45 
        const newSearch = params.toString();
 43 
      }
46 
        window.history.replaceState(
 44 
    } else {
Línea 47... Línea 45...
47 
          {},
 45 
      if (currentParamValue !== null) {
48 
          '',
 46 
        const newSearchParams = new URLSearchParams(searchParams);