packages/hooks/useSearchParams.ts

   1 import { useCallback, useEffect, useMemo } from 'react';
   2 import { useHistory, useLocation } from 'react-router-dom';
   3
   4 import type { ParsedSearchParams } from '@proton/shared/lib/helpers/url';
   5 import { changeSearchParams, getSearchParams } from '@proton/shared/lib/helpers/url';
   6
   7 type SetSearchParams = (nextInit: ParsedSearchParams | ((prev: ParsedSearchParams) => ParsedSearchParams)) => void;
   8
   9 /**
  10  * A convenient wrapper for reading and writing search parameters via the
  11  * URLSearchParams interface.
  12  */
  13 export default function useSearchParams(init?: ParsedSearchParams): [ParsedSearchParams, SetSearchParams] {
  14     const location = useLocation();
  15     const history = useHistory();
  16
  17     const searchParams = useMemo(() => getSearchParams(location.hash), [location.hash]);
  18
  19     const setSearchParams = useCallback<SetSearchParams>(
  20         (update) => {
  21             const newParams = typeof update === 'function' ? update(searchParams) : update;
  22             const newRoute = changeSearchParams(location.pathname, location.hash, newParams);
  23             history.push(newRoute);
  24         },
  25         [history, searchParams]
  26     );
  27
  28     useEffect(() => {
  29         if (init) {
  30             setSearchParams(init);
  31         }
  32     }, [init]);
  33
  34     return [searchParams, setSearchParams];
  35 }