Proyectos de Subversion LeadersLinked - SPA

import { useState, useEffect, useCallback } from 'react';

export function useDebouncedSearchParam(paramName, debounceDelay = 500) {
  const getQueryFromUrl = useCallback(() => {
    const params = new URLSearchParams(window.location.search);
    return params.get(paramName);
  }, [paramName]);

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

  // Effect to initialize inputValue from URL if it changes externally
  // or on initial load if not already set by useState initializer
  useEffect(() => {
    const queryFromUrl = getQueryFromUrl();
    if (queryFromUrl !== null && queryFromUrl !== inputValue) {
      setInputValue(queryFromUrl);
    }
  }, [getQueryFromUrl, inputValue]);

  // Effect for debouncing inputValue to debouncedValue
  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(inputValue);
    }, debounceDelay);

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

  // Effect for updating URL when debouncedValue changes
  useEffect(() => {
    const params = new URLSearchParams(window.location.search);
    const currentParamValue = params.get(paramName);

    if (debouncedValue) {
      if (currentParamValue !== debouncedValue) {
        params.set(paramName, debouncedValue);
        window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
      }
    } else {
      if (currentParamValue !== null) {
        params.delete(paramName);
        const newSearch = params.toString();
        window.history.replaceState(
          {},
          '',
          `${window.location.pathname}${newSearch ? '?' : ''}${newSearch}`
        );
      }
    }
  }, [debouncedValue, paramName]);

  return { inputValue, setInputValue, debouncedValue };
}