Proyectos de Subversion LeadersLinked - SPA

import { useState, useEffect, useCallback } from 'react';
import { useSearchParams } from 'react-router-dom';

export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
  const [searchParams, setSearchParams] = useSearchParams();

  const getQueryFromUrl = useCallback(() => {
    return searchParams.get(paramName);
  }, [searchParams, paramName]);

  const [inputValue, setInputValue] = useState(() => getQueryFromUrl() || '');
  const [debouncedValue, setDebouncedValue] = useState(() => getQueryFromUrl() || '');

  // Efecto para inicializar inputValue desde la URL si cambia externamente
  // o en la carga inicial si no está configurado por el inicializador de useState
  useEffect(() => {
    const queryFromUrl = getQueryFromUrl();
    if (queryFromUrl !== null && queryFromUrl !== inputValue) {
      setInputValue(queryFromUrl);
    }
  }, [getQueryFromUrl, inputValue]);

  // Efecto para retardar (debounce) inputValue a debouncedValue
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, debounceDelay);

    return () => {
      clearTimeout(handler);
    };
  }, [inputValue, debounceDelay]);

  // Efecto para actualizar la URL cuando debouncedValue cambia
  useEffect(() => {
    const currentParamValue = searchParams.get(paramName);

    if (debouncedValue) {
      if (currentParamValue !== debouncedValue) {
        const newSearchParams = new URLSearchParams(searchParams);
        newSearchParams.set(paramName, debouncedValue);
        setSearchParams(newSearchParams);
      }
    } else {
      if (currentParamValue !== null) {
        const newSearchParams = new URLSearchParams(searchParams);
        newSearchParams.delete(paramName);
        setSearchParams(newSearchParams);
      }
    }
  }, [debouncedValue, paramName, searchParams, setSearchParams]);

  return { inputValue, setInputValue, debouncedValue };
}