Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3521 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3521 Rev 3719
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';
 2 
import { useSearchParams } from 'react-router-dom';
3 
 
 3 
 
4 
export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
 4 
export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
5 
  const [searchParams, setSearchParams] = useSearchParams();
 5 
  const [searchParams, setSearchParams] = useSearchParams();
6 
 
 6 
 
7 
  const getQueryFromUrl = useCallback(() => {
 7 
  const getQueryFromUrl = useCallback(() => {
8 
    return searchParams.get(paramName);
 8 
    return searchParams.get(paramName);
9 
  }, [searchParams, paramName]);
 9 
  }, [searchParams, paramName]);
10 
 
 10 
 
11 
  const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
 11 
  const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
12 
  const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');
 12 
  const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');
13 
 
 13 
 
14 
  useEffect(() => {
 14 
  useEffect(() => {
15 
    const handler = setTimeout(() => {
 15 
    const handler = setTimeout(() => {
16 
      setDebouncedValue(inputValue);
 16 
      setDebouncedValue(inputValue);
17 
    }, debounceDelay);
 17 
    }, debounceDelay);
18 
 
 18 
 
19 
    return () => {
 19 
    return () => {
20 
      clearTimeout(handler);
 20 
      clearTimeout(handler);
21 
    };
 21 
    };
22 
  }, [inputValue, debounceDelay]);
 22 
  }, [inputValue, debounceDelay]);
23 
 
 23 
 
24 
  useEffect(() => {
 24 
  useEffect(() => {
25 
    setSearchParams((prev) => {
 25 
    setSearchParams((prev) => {
26 
      prev.set(paramName, debouncedValue);
 26 
      prev.set(paramName, debouncedValue);
27 
      return prev;
 27 
      return prev;
28 
    });
 28 
    });
29 
  }, [debouncedValue, paramName, setSearchParams]);
 29 
  }, [debouncedValue, paramName, setSearchParams]);
30 
 
 30 
 
31 
  return { inputValue, setInputValue, debouncedValue };
 31 
  return { inputValue, setInputValue, debouncedValue };
32 
}
 32 
}