@cccsaurora/howler-ui 3.1.0-dev.1466 → 3.1.0-dev.1602

package/components/app/hooks/useMatchers.js

@@ -10,13 +10,13 @@ const useMatchers = (lazy = false) => {
             return providedTemplate;
         }
         if (!hit) {
-            return null;
+            return;
         }
         if (has(hit, '__template')) {
             return hit.__template;
         }
         if (lazy) {
-            return null;
+            return;
         }
         // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
         // should also exist
@@ -24,18 +24,18 @@ const useMatchers = (lazy = false) => {
             return (await getRecord(hit.howler.id, true)).__template;
         }
         catch {
-            return null;
+            return;
         }
     }, [getRecord, lazy]);
     const getMatchingOverview = useCallback(async (hit) => {
         if (!hit) {
-            return null;
+            return;
         }
         if (has(hit, '__overview')) {
             return hit.__overview;
         }
         if (lazy) {
-            return null;
+            return;
         }
         // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
         // should also exist
@@ -43,18 +43,18 @@ const useMatchers = (lazy = false) => {
             return (await getRecord(hit.howler.id, true)).__overview;
         }
         catch {
-            return null;
+            return;
         }
     }, [getRecord, lazy]);
     const getMatchingDossiers = useCallback(async (hit) => {
         if (!hit) {
-            return null;
+            return [];
         }
         if (has(hit, '__dossiers')) {
-            return hit.__dossiers;
+            return hit.__dossiers ?? [];
         }
         if (lazy) {
-            return null;
+            return [];
         }
         // This is a fallback in case metadata is not included. In most cases templates are shown, the template metadata
         // should also exist
@@ -67,20 +67,20 @@ const useMatchers = (lazy = false) => {
     }, [getRecord, lazy]);
     const getMatchingAnalytic = useCallback(async (hit) => {
         if (!hit) {
-            return null;
+            return;
         }
         if (has(hit, '__analytic')) {
             return hit.__analytic;
         }
         if (lazy) {
-            return null;
+            return;
         }
         // This is a fallback in case metadata is not included.
         try {
             return (await getRecord(hit.howler.id, true)).__analytic;
         }
         catch {
-            return null;
+            return;
         }
     }, [getRecord, lazy]);
     return {

package/components/app/hooks/useMatchers.test.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { renderHook } from '@testing-library/react';
 import { useContextSelector } from 'use-context-selector';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
@@ -53,15 +54,15 @@ describe('useMatchers', () => {
         });
     });
     describe('getMatchingTemplate', () => {
-        it('should return null when hit is null', async () => {
+        it('should return undefined when hit is null', async () => {
             const { result } = renderHook(() => useMatchers());
             const template = await result.current.getMatchingTemplate(null);
-            expect(template).toBeNull();
+            expect(template).toBeUndefined();
         });
-        it('should return null when hit is undefined', async () => {
+        it('should return undefined when hit is undefined', async () => {
             const { result } = renderHook(() => useMatchers());
             const template = await result.current.getMatchingTemplate(undefined);
-            expect(template).toBeNull();
+            expect(template).toBeUndefined();
         });
         it('should prefer a provided template over hit metadata', async () => {
             const { has } = await import('lodash-es');
@@ -96,20 +97,20 @@ describe('useMatchers', () => {
             has.mockReturnValue(false);
             mockGetRecord.mockRejectedValue(new Error('Failed to fetch hit'));
             const { result } = renderHook(() => useMatchers());
-            await expect(result.current.getMatchingTemplate(mockHit)).resolves.toBeNull();
+            await expect(result.current.getMatchingTemplate(mockHit)).resolves.toBeUndefined();
             expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
     });
     describe('getMatchingOverview', () => {
-        it('should return null when hit is null', async () => {
+        it('should return undefined when hit is null', async () => {
             const { result } = renderHook(() => useMatchers());
             const overview = await result.current.getMatchingOverview(null);
-            expect(overview).toBeNull();
+            expect(overview).toBeUndefined();
         });
-        it('should return null when hit is undefined', async () => {
+        it('should return undefined when hit is undefined', async () => {
             const { result } = renderHook(() => useMatchers());
             const overview = await result.current.getMatchingOverview(undefined);
-            expect(overview).toBeNull();
+            expect(overview).toBeUndefined();
         });
         it('should return overview from metadata when it exists', async () => {
             const { has } = await import('lodash-es');
@@ -134,20 +135,20 @@ describe('useMatchers', () => {
             has.mockReturnValue(false);
             mockGetRecord.mockRejectedValue(new Error('Failed to fetch hit'));
             const { result } = renderHook(() => useMatchers());
-            await expect(result.current.getMatchingOverview(mockHit)).resolves.toBeNull();
+            await expect(result.current.getMatchingOverview(mockHit)).resolves.toBeUndefined();
             expect(mockGetRecord).toHaveBeenCalledWith('test-hit-id', true);
         });
     });
     describe('getMatchingDossiers', () => {
-        it('should return null when hit is null', async () => {
+        it('should return an empty array when hit is null', async () => {
             const { result } = renderHook(() => useMatchers());
             const dossiers = await result.current.getMatchingDossiers(null);
-            expect(dossiers).toBeNull();
+            expect(dossiers).toEqual([]);
         });
-        it('should return null when hit is undefined', async () => {
+        it('should return an empty array when hit is undefined', async () => {
             const { result } = renderHook(() => useMatchers());
             const dossiers = await result.current.getMatchingDossiers(undefined);
-            expect(dossiers).toBeNull();
+            expect(dossiers).toEqual([]);
         });
         it('should return dossiers from metadata when they exist', async () => {
             const { has } = await import('lodash-es');

package/components/app/hooks/useTitle.js

@@ -1,8 +1,8 @@
-import useMySitemap from '@cccsaurora/howler-ui/components/hooks/useMySitemap';
+import { useAppRouter } from '@tui/core';
 import { capitalize } from 'lodash-es';
 import { useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useParams, useSearchParams } from 'react-router-dom';
+import { useLocation, useParams, useSearchParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { AnalyticContext } from '../providers/AnalyticProvider';
 import { RecordContext } from '../providers/RecordProvider';
@@ -11,7 +11,7 @@ const useTitle = () => {
     const location = useLocation();
     const params = useParams();
     const searchParams = useSearchParams()[0];
-    const sitemap = useMySitemap();
+    const { breadcrumbs } = useAppRouter();
     const { getAnalyticFromId } = useContext(AnalyticContext) ?? {};
     const hits = useContextSelector(RecordContext, ctx => ctx.records);
     const getHit = useContextSelector(RecordContext, ctx => ctx.getRecord);
@@ -59,12 +59,13 @@ const useTitle = () => {
             setTitle(title);
         }
         else {
-            const matchingRoute = sitemap.routes.find(_route => _route.path === location.pathname);
-            if (matchingRoute) {
-                setTitle(`Howler - ${t(matchingRoute.title)}`);
+            const items = breadcrumbs();
+            const currentCrumb = items[items.length - 1];
+            if (currentCrumb) {
+                setTitle(`Howler - ${currentCrumb.i18nKey ? t(currentCrumb.i18nKey) : currentCrumb.title}`);
             }
         }
-    }, [location.pathname, params.id, searchParams, getAnalyticFromId, setTitle, t, hits, getHit, sitemap.routes]);
+    }, [location.pathname, params.id, searchParams, getAnalyticFromId, setTitle, t, hits, getHit, breadcrumbs]);
     useEffect(() => {
         void runChecks();
     }, [runChecks]);

package/components/app/providers/AnalyticProvider.d.ts

@@ -3,7 +3,7 @@ import { type FC, type PropsWithChildren } from 'react';
 interface AnalyticContextType {
     ready: boolean;
     analytics: Analytic[];
-    getAnalyticFromId: (id: string) => Promise<Analytic>;
+    getAnalyticFromId: (id: string) => Promise<Analytic | undefined>;
 }
 export declare const AnalyticContext: import("react").Context<AnalyticContextType>;
 declare const AnalyticProvider: FC<PropsWithChildren>;

package/components/app/providers/AnalyticProvider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
 import { createContext, useCallback, useEffect, useState } from 'react';
 export const AnalyticContext = createContext(null);
 /**
@@ -19,7 +19,10 @@ const AnalyticProvider = ({ children }) => {
         }
         try {
             setFetching(true);
-            setAnalytics(((await api.analytic.get()) ?? []));
+            const result = await api.analytic.get();
+            if (result) {
+                setAnalytics(result);
+            }
             setReady(true);
         }
         finally {
@@ -44,7 +47,7 @@ const AnalyticProvider = ({ children }) => {
         }
         try {
             const result = await PROMISES[id];
-            const analytic = result.items?.[0];
+            const analytic = result?.items[0];
             if (analytic) {
                 setAnalytics([...(analytics ?? []), analytic]);
                 return analytic;
@@ -54,7 +57,7 @@ const AnalyticProvider = ({ children }) => {
             // eslint-disable-next-line no-console
             console.error(e);
         }
-        return null;
+        return;
     }, [analytics]);
     return (_jsx(AnalyticContext.Provider, { value: { analytics, ready, getAnalyticFromId }, children: children }));
 };

package/components/app/providers/ApiConfigProvider.d.ts

@@ -1,8 +1,9 @@
 import type { ApiType } from '@cccsaurora/howler-ui/models/entities/generated/ApiType';
 import type { FC, PropsWithChildren } from 'react';
 export type ApiConfigContextType = {
-    config: ApiType;
+    config: Partial<ApiType>;
     setConfig: (config: ApiType) => void;
+    loaded: boolean;
 };
 export declare const ApiConfigContext: import("react").Context<ApiConfigContextType>;
 declare const ApiConfigProvider: FC<PropsWithChildren<{

package/components/app/providers/ApiConfigProvider.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isEmpty } from 'lodash-es';
 import { createContext, useMemo, useState } from 'react';
-export const ApiConfigContext = createContext(null);
-const ApiConfigProvider = ({ children, defaultConfig = {
-    indexes: null,
-    lookups: null,
-    configuration: null,
-    c12nDef: null,
-    mapping: null
-} }) => {
-    const [config, setConfig] = useState(defaultConfig);
+import { missingContext } from './contextUtils';
+const DEFAULT_API_CONFIG_CONTEXT = {
+    config: {},
+    setConfig: () => missingContext('ApiConfigContext'),
+    loaded: false
+};
+export const ApiConfigContext = createContext(DEFAULT_API_CONFIG_CONTEXT);
+const ApiConfigProvider = ({ children, defaultConfig }) => {
+    const [config, setConfig] = useState(defaultConfig ?? {});
     const context = useMemo(() => ({
         config,
-        setConfig
+        setConfig,
+        loaded: !isEmpty(config)
     }), [config, setConfig]);
     return _jsx(ApiConfigContext.Provider, { value: context, children: children });
 };

package/components/app/providers/AppDrawerProvider.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PageContent } from '@tui/core';
 import { Drawer, Typography } from '@mui/material';
-import PageContent from '@cccsaurora/howler-ui/commons/components/pages/PageContent';
 import { createContext, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 const APPDRAWER_INIT_STATE = {
-    props: { titleKey: null, children: null, onClosed: () => null },
+    props: { titleKey: '', children: null, onClosed: () => null },
     close: () => null,
     open: () => null
 };

package/components/app/providers/AvatarProvider.js

@@ -2,7 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import api from '@cccsaurora/howler-ui/api';
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { createContext, useCallback } from 'react';
-export const AvatarContext = createContext(null);
+import { missingContext } from './contextUtils';
+const DEFAULT_AVATAR_CONTEXT = {
+    getAvatar: () => missingContext('AvatarContext')
+};
+export const AvatarContext = createContext(DEFAULT_AVATAR_CONTEXT);
 /**
  * Because of the nature of requesting avatars, there's often LOTS of requests firing off in rapid succession,
  * too quickly for React to react (pardon the pun). To circumvent this, we just use a global object to remove race conditions.
@@ -14,17 +18,20 @@ const AvatarProvider = ({ children }) => {
         if (!id) {
             return Promise.resolve('');
         }
-        if (promises[id]) {
-            return promises[id];
-        }
-        try {
-            promises[id] = dispatchApi(api.user.avatar.get(id), { logError: false, showError: false, throwError: false });
-            return promises[id];
-        }
-        catch {
-            promises[id] = api.user.get(id).then(user => user.name);
-            return promises[id];
+        const cachedAvatar = promises[id];
+        if (cachedAvatar) {
+            return cachedAvatar;
         }
+        const fallback = async () => (await api.user.get(id))?.name ?? id;
+        const avatarRequest = dispatchApi(api.user.avatar.get(id), {
+            logError: false,
+            showError: false,
+            throwError: false
+        })
+            .then(avatar => avatar ?? fallback())
+            .catch(() => fallback());
+        promises[id] = avatarRequest;
+        return avatarRequest;
     }, [dispatchApi]);
     return _jsx(AvatarContext.Provider, { value: { getAvatar }, children: children });
 };

package/components/app/providers/FavouritesProvider.js

@@ -1,28 +1,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { QueryStats, SavedSearch } from '@mui/icons-material';
-import { useAppLeftNav, useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import { useAppLeftNav, useAppUser } from '@tui/core';
 import { sortBy, uniq } from 'lodash-es';
 import { createContext, useCallback, useContext, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';
+import { applyMainMenuOperations } from '@cccsaurora/howler-ui/utils/menuUtils';
 import { buildViewUrl } from '@cccsaurora/howler-ui/utils/viewUtils';
 import { AnalyticContext } from './AnalyticProvider';
 import { ViewContext } from './ViewProvider';
 export const FavouriteContext = createContext(null);
 const FavouriteProvider = ({ children }) => {
     const { t } = useTranslation();
-    const leftNav = useAppLeftNav();
+    const { setMenus } = useAppLeftNav();
     const appUser = useAppUser();
     const analytics = useContext(AnalyticContext);
+    const userReady = appUser.isReady();
+    const favouriteViews = appUser.user?.favourite_views;
+    const favouriteAnalytics = appUser.user?.favourite_analytics;
     const fetchViews = useContextSelector(ViewContext, ctx => ctx.fetchViews);
-    const processViewElement = useCallback(async () => {
-        const viewElement = leftNav.elements.find(el => el.element?.id === 'views');
-        const favourites = uniq(appUser.user?.favourite_views || []);
-        // There are no favourites and no nav elements - return
-        if (favourites.length < 1 && !viewElement) {
-            return null;
-        }
-        // There are no favourites, but the nav element exists - remove it
+    const processViewMenu = useCallback(async () => {
+        const favourites = uniq(favouriteViews || []);
         if (favourites.length < 1) {
             return null;
         }
@@ -31,101 +29,73 @@ const FavouriteProvider = ({ children }) => {
             .filter(view => !!view)
             .map(view => ({
             id: view.view_id,
-            text: t(view.title),
-            route: buildViewUrl(view),
-            nested: true
+            type: 'route',
+            label: t(view.title),
+            route: buildViewUrl(view)
         }));
-        if (viewElement) {
-            const newViewElement = {
-                type: 'group',
-                element: {
-                    ...viewElement.element,
-                    items
-                }
-            };
-            return newViewElement;
-        }
-        else {
-            return {
-                type: 'group',
-                element: {
-                    id: 'views',
-                    i18nKey: 'route.views.saved',
-                    icon: _jsx(SavedSearch, {}),
-                    items
-                }
-            };
-        }
-    }, [appUser.user?.favourite_views, fetchViews, leftNav.elements, t]);
-    const processAnalyticElement = useCallback(() => {
-        const analyticElement = leftNav.elements.find(el => el.element?.id === 'analytics');
-        const favourites = appUser.user?.favourite_analytics;
-        // There are no favourites and no nav elements - return
-        if (favourites.length < 1 && !analyticElement) {
-            return null;
-        }
-        // There are no favourites, but the nav element exists - remove it
+        return {
+            id: 'views',
+            type: 'menu',
+            i18nKey: 'route.views.saved',
+            icon: _jsx(SavedSearch, {}),
+            items
+        };
+    }, [favouriteViews, fetchViews, t]);
+    const processAnalyticMenu = useCallback(() => {
+        const favourites = favouriteAnalytics ?? [];
         if (favourites.length < 1) {
             return null;
         }
-        // The favourite list is fully represented, skip
-        if (favourites.length === analyticElement?.element?.items?.length) {
-            return analyticElement;
-        }
         const items = favourites
-            .map(aid => {
+            .map((aid) => {
             const analytic = analytics.analytics.find(v => v.analytic_id === aid);
             return analytic
                 ? {
                     id: analytic.analytic_id,
-                    text: t(analytic.name),
-                    route: `/analytics/${analytic.analytic_id}`,
-                    nested: true
+                    type: 'route',
+                    label: t(analytic.name),
+                    route: `/analytics/${analytic.analytic_id}`
                 }
                 : null;
         })
-            .filter(v => !!v);
-        if (analyticElement) {
-            return {
-                type: 'group',
-                element: {
-                    ...analyticElement.element,
-                    items
-                }
-            };
-        }
-        else {
-            return {
-                type: 'group',
-                element: {
-                    id: 'analytics',
-                    i18nKey: 'route.analytics.pinned',
-                    icon: _jsx(QueryStats, {}),
-                    items
-                }
-            };
-        }
-    }, [analytics.analytics, appUser.user?.favourite_analytics, leftNav, t]);
+            .filter((v) => !!v);
+        return {
+            id: 'analytics',
+            type: 'menu',
+            i18nKey: 'route.analytics.pinned',
+            icon: _jsx(QueryStats, {}),
+            items
+        };
+    }, [analytics.analytics, favouriteAnalytics, t]);
     useEffect(() => {
-        if (!appUser.isReady() || !analytics.ready) {
+        if (!userReady || !analytics.ready) {
             return;
         }
-        const newElements = leftNav.elements
-            .filter(el => !['views', 'analytics'].includes(el.element?.id))
-            .filter(el => !!el);
+        let cancelled = false;
         void (async () => {
-            const analyticElement = processAnalyticElement();
-            if (analyticElement) {
-                newElements.splice(2, 0, analyticElement);
+            const viewMenu = await processViewMenu();
+            if (cancelled) {
+                return;
+            }
+            const analyticMenu = processAnalyticMenu();
+            const operations = [
+                { type: 'remove', targetId: 'views' },
+                { type: 'remove', targetId: 'analytics' }
+            ];
+            let anchorId = 'cases';
+            if (viewMenu) {
+                operations.push({ type: 'insertRelative', anchorId, position: 'after', item: viewMenu });
+                anchorId = viewMenu.id;
             }
-            const viewElement = await processViewElement();
-            if (viewElement) {
-                newElements.splice(2, 0, viewElement);
+            if (analyticMenu) {
+                operations.push({ type: 'insertRelative', anchorId, position: 'after', item: analyticMenu });
             }
-            leftNav.setElements(newElements);
+            setMenus(current => current.map(menu => (menu.id === 'root' ? applyMainMenuOperations(menu, operations) : menu)));
         })();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [analytics.ready, appUser]);
+        return () => {
+            cancelled = true;
+        };
+    }, [analytics.ready, processAnalyticMenu, processViewMenu, setMenus, userReady]);
     return _jsx(FavouriteContext.Provider, { value: {}, children: children });
 };
 export default FavouriteProvider;

package/components/app/providers/FieldProvider.js

@@ -10,7 +10,7 @@ const FieldProvider = ({ children }) => {
         if (hitFields.length) {
             return hitFields;
         }
-        const fields = await dispatchApi(api.search.fields.hit.get());
+        const fields = (await dispatchApi(api.search.fields.hit.get())) ?? [];
         setHitFields(fields);
         return fields;
     }, [dispatchApi, hitFields]);

package/components/app/providers/GridColumnsProvider.d.ts

@@ -48,5 +48,5 @@ export declare const GridColumnsContext: import("react").Context<GridColumnsCont
  */
 declare const GridColumnsProvider: ({ children, viewSource }: PropsWithChildren<{
     viewSource?: 'params' | 'path';
-}>) => import("react/jsx-runtime").JSX.Element;
+}>) => import("react").JSX.Element;
 export default GridColumnsProvider;

package/components/app/providers/GridColumnsProvider.js

@@ -1,14 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { parsePixelSizeStringToInt } from '@cccsaurora/howler-ui/utils/stringUtils';
+import { notNil } from '@cccsaurora/howler-ui/utils/utils';
 import { ParameterContext } from './ParameterProvider';
 import { RecordSearchContext } from './RecordSearchProvider';
 import { ViewContext } from './ViewProvider';
-export const GridColumnsContext = createContext(null);
+import { missingContext } from './contextUtils';
+const DEFAULT_GRID_COLUMNS_CONTEXT = {
+    columns: [],
+    setColumns: () => missingContext('GridColumnsContext'),
+    columnWidths: {},
+    setColumnWidth: () => missingContext('GridColumnsContext'),
+    columnSources: {},
+    syncToStorage: () => missingContext('GridColumnsContext'),
+    isReady: false
+};
+export const GridColumnsContext = createContext(DEFAULT_GRID_COLUMNS_CONTEXT);
 /**
  * Manages which grid columns are active and how wide they are.
  *
@@ -28,7 +39,7 @@ const GridColumnsProvider = ({ children, viewSource = 'params' }) => {
     // Resolve view IDs from the appropriate source.
     const parameterViewIds = useContextSelector(ParameterContext, ctx => ctx.views);
     const pathViewIds = useMemo(() => (routeParams.id ? [routeParams.id] : []), [routeParams.id]);
-    const viewIds = viewSource === 'params' ? parameterViewIds : pathViewIds;
+    const viewIds = (viewSource === 'params' ? parameterViewIds : pathViewIds) ?? [];
     const getCurrentViews = useContextSelector(ViewContext, ctx => ctx.getCurrentViews);
     const setDisplayType = useContextSelector(RecordSearchContext, ctx => ctx.setDisplayType);
     // --- Local storage state (user's personal preferences) ---
@@ -117,7 +128,9 @@ const GridColumnsProvider = ({ children, viewSource = 'params' }) => {
                         if (!sources[field]) {
                             // First occurrence wins for column order and width.
                             columns.push(field);
-                            widths[field] = width ?? undefined;
+                            if (notNil(width)) {
+                                widths[field] = width;
+                            }
                             sources[field] = [view.title];
                         }
                         else {

package/components/app/providers/GridColumnsProvider.test.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+// @ts-nocheck
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { useContext } from 'react';
 import { setupContextSelectorMock, setupLocalStorageMock, setupReactRouterMock } from '@cccsaurora/howler-ui/tests/mocks';
@@ -10,7 +11,7 @@ import { ViewContext } from './ViewProvider';
 setupContextSelectorMock();
 setupReactRouterMock();
 const mockLocalStorage = setupLocalStorageMock();
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
 const mockParams = vi.mocked(useParams);
 const mockGetCurrentViews = vi.fn();
 const mockSetDisplayType = vi.fn();

package/components/app/providers/LocalStorageProvider.d.ts

@@ -4,9 +4,9 @@ type ValuesType = {
     [K in StorageKey]?: any;
 };
 export interface LocalStorageContextType {
-    set: <T>(key: string, value: T) => void;
+    set: <T>(key: StorageKey, value: T) => void;
     values: ValuesType;
-    remove: (key: string) => void;
+    remove: (key: StorageKey) => void;
 }
 export declare const LocalStorageContext: import("react").Context<LocalStorageContextType>;
 declare const LocalStorageProvider: FC<PropsWithChildren>;

package/components/app/providers/LocalStorageProvider.js

@@ -9,8 +9,9 @@ const LocalStorageProvider = ({ children }) => {
     useEffect(() => {
         const newData = {};
         for (const key in StorageKey) {
-            if (!values[StorageKey[key]]) {
-                newData[StorageKey[key]] = getStored(StorageKey[key]);
+            const storageKey = StorageKey[key];
+            if (!values[storageKey]) {
+                newData[storageKey] = getStored(storageKey);
             }
         }
         setValues(current => {
@@ -28,7 +29,7 @@ const LocalStorageProvider = ({ children }) => {
             [key]: value
         }));
     }, [setStored]);
-    const remove = useCallback((key) => {
+    const remove = useCallback(key => {
         removeStored(key);
         setValues(current => {
             const copy = { ...current };