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 };

}