Breadcrumb Navigator

1import { useEffect, useState } from "react";
2import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
3 
4interface BreadcrumbNavigatorProps {
5    pathOrder: string[];
6    pathToDisplay: { [key: string]: string };
7    pathNormalizer?: (path: string) => string;
8    displayTextClassName?: string;
9}
10 
11export function BreadcrumbNavigator({ pathOrder = [], pathToDisplay = {}, pathNormalizer, displayTextClassName }: BreadcrumbNavigatorProps) {
12    const [searchParams] = useSearchParams();
13 
14    const navigate = useNavigate();
15    const location = useLocation();
16 
17    const [pathToParam, setPathToParam] = useState<{ [key: string]: any }>(() => {
18        const localParams = localStorage.getItem("navigator-params");
19 
20        if (localParams) {
21            return JSON.parse(localParams);
22        }
23 
24        const initialParams: { [key: string]: any } = {};
25        pathOrder.forEach(path => {
26            initialParams[path] = null;
27        });
28        return initialParams;
29    });
30 
31    useEffect(() => {
32        setPathToParam(prev => {
33            const filteredPath = pathNormalizer ? pathNormalizer(location.pathname) : location.pathname;
34 
35            let newParams = {
36                ...prev,
37                [filteredPath]: Object.fromEntries(searchParams) ? Object.fromEntries(searchParams) : "",
38            }
39 
40            Object.keys(newParams).forEach(path => {
41                if (pathOrder.indexOf(path) > pathOrder.indexOf(filteredPath)) {
42                    newParams[path] = null;
43                }
44            });
45            return newParams;
46        });
47    }, [location.pathname, searchParams]);
48 
49    useEffect(() => {
50        localStorage.setItem("navigator-params", JSON.stringify(pathToParam));
51    }, [pathToParam])
52 
53    return (
54        <div className="text-sm w-screen overflow-x-scroll px-10 my-5" aria-label="Breadcrumb">
55            <ol className="list-none p-0 inline-flex">
56                {
57                    pathOrder.map((path, index) => (
58                        (pathToParam[path] != null) ? <li key={path} className="flex items-center">
59                            <button
60                                onClick={() => {
61                                    if (path === "/") {
62                                        navigate(path);
63                                    } else {
64                                        const queryParams = new URLSearchParams(pathToParam[path] || {}).toString();
65// … truncated