github.com/treeverse/lakefs@v1.24.1-0.20240520134607-95648127bfb0/webui/src/lib/hooks/router.ts (about)

     1  import {
     2    useNavigate,
     3    useLocation,
     4    useParams,
     5    generatePath,
     6  } from "react-router-dom";
     7  
     8  export const useQuery = <T>(): Partial<T> => {
     9    const location = useLocation();
    10    const result: Record<string, string> = {};
    11    for (const [key, value] of new URLSearchParams(location.search).entries()) {
    12      result[key] = value;
    13    }
    14    return result as Partial<T>;
    15  };
    16  
    17  interface URLDetails {
    18    pathname: string;
    19    params: Record<string, string>;
    20    query: Record<string, string>;
    21  }
    22  
    23  type URLBuilderInput = URLDetails | string;
    24  
    25  // TODO(elad): Return URL
    26  export const buildURL = (url: URLBuilderInput): string => {
    27    if (typeof url === "string") return url;
    28    // otherwise, assume query, params and pathname
    29    const path = generatePath(url.pathname, url.params ? url.params : {});
    30    if (!url.query) return path;
    31    const query = new URLSearchParams(url.query).toString();
    32    return `${path}?${query}`;
    33  };
    34  
    35  export const useRouter = <
    36    Q = Record<string, string | undefined>,
    37    T extends { [K in keyof T]?: string | undefined } = Record<
    38      string,
    39      string | undefined
    40    >
    41  >() => {
    42    const location = useLocation();
    43    const query = useQuery<Q>();
    44    const params = useParams<T>();
    45    const navigate = useNavigate();
    46    return {
    47      query,
    48      params,
    49      route: location.pathname,
    50      navigate,
    51      push: (url: URLBuilderInput) => navigate(buildURL(url)),
    52    };
    53  };