feat: move recording recently visited into separate component (#7494)

frontend/src/component/commandBar/CommandBar.tsx

@@ -14,7 +14,6 @@ import { useKeyboardShortcut } from 'hooks/useKeyboardShortcut';
 import { SEARCH_INPUT } from 'utils/testIds';
 import { useOnClickOutside } from 'hooks/useOnClickOutside';
 import { useOnBlur } from 'hooks/useOnBlur';
-import { useRecentlyVisited } from 'hooks/useRecentlyVisited';
 import {
     CommandResultGroup,
     type CommandResultGroupItem,
@@ -27,6 +26,7 @@ import { CommandFeatures } from './CommandFeatures';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { CommandRecent } from './CommandRecent';
 import { CommandPages } from './CommandPages';
+import { RecentlyVisitedRecorder } from './RecentlyVisitedRecorder';
 
 export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
     position: 'absolute',
@@ -110,7 +110,6 @@ export const CommandBar = () => {
     >([]);
     const [searchedFlagCount, setSearchedFlagCount] = useState(0);
     const [value, setValue] = useState<string>('');
-    const { lastVisited } = useRecentlyVisited();
     const { routes } = useRoutes();
     const allRoutes: Record<string, IPageRouteInfo> = {};
     for (const route of [
@@ -200,6 +199,7 @@ export const CommandBar = () => {
 
     return (
         <StyledContainer ref={searchContainerRef} active={showSuggestions}>
+            <RecentlyVisitedRecorder />
             <StyledSearch>
                 <SearchIcon
                     sx={{
@@ -266,10 +266,7 @@ export const CommandBar = () => {
                 elseShow={
                     showSuggestions && (
                         <CommandResultsPaper>
-                            <CommandRecent
+                            <CommandRecent routes={allRoutes} />
-                                lastVisited={lastVisited}
-                                routes={allRoutes}
-                            />
                             <CommandPageSuggestions routes={allRoutes} />
                         </CommandResultsPaper>
                     )

frontend/src/component/commandBar/CommandRecent.tsx

@@ -5,7 +5,10 @@ import {
     RecentlyVisitedProjectButton,
 } from './RecentlyVisited/CommandResultGroup';
 import { List } from '@mui/material';
-import type { LastViewedPage } from 'hooks/useRecentlyVisited';
+import {
+    useRecentlyVisited,
+    type LastViewedPage,
+} from 'hooks/useRecentlyVisited';
 
 const toListItemButton = (
     item: LastViewedPage,
@@ -38,12 +41,11 @@ const toListItemButton = (
 };
 
 export const CommandRecent = ({
-    lastVisited,
     routes,
 }: {
-    lastVisited: LastViewedPage[];
     routes: Record<string, { path: string; route: string; title: string }>;
 }) => {
+    const { lastVisited } = useRecentlyVisited();
     const buttons = lastVisited.map((item, index) =>
         toListItemButton(item, routes, index),
     );

frontend/src/component/commandBar/RecentlyVisitedRecorder.tsx

@@ -0,0 +1,31 @@
+import { useRecentlyVisited } from 'hooks/useRecentlyVisited';
+import { useLocation, useMatch } from 'react-router-dom';
+import { routes } from 'component/menu/routes';
+import { useEffect } from 'react';
+
+export const RecentlyVisitedRecorder = () => {
+    const { setLastVisited } = useRecentlyVisited();
+    const featureMatch = useMatch('/projects/:projectId/features/:featureId');
+    const projectMatch = useMatch('/projects/:projectId');
+
+    const location = useLocation();
+
+    useEffect(() => {
+        if (!location.pathname) return;
+
+        const path = routes.find((r) => r.path === location.pathname);
+        if (path) {
+            setLastVisited({ pathName: path.path });
+        } else if (featureMatch?.params.featureId) {
+            setLastVisited({
+                featureId: featureMatch?.params.featureId,
+                projectId: featureMatch?.params.projectId,
+            });
+        } else if (projectMatch?.params.projectId) {
+            setLastVisited({
+                projectId: projectMatch?.params.projectId,
+            });
+        }
+    }, [location, featureMatch, projectMatch]);
+    return <></>;
+};

frontend/src/hooks/useRecentlyVisited.test.tsx

@@ -9,11 +9,13 @@ import {
     createMemoryRouter,
 } from 'react-router-dom';
 import { useRecentlyVisited } from './useRecentlyVisited';
+import { RecentlyVisitedRecorder } from 'component/commandBar/RecentlyVisitedRecorder';
 
 const RouteNameRender: FC<{}> = () => {
     const { lastVisited } = useRecentlyVisited();
     return (
         <div>
+            <RecentlyVisitedRecorder />
             {lastVisited.map((visited) => (
                 <div>{visited.pathName}</div>
             ))}
@@ -34,14 +36,22 @@ test('checks that routes that exist in routes.ts gets added to lastVisited', asy
                 <Route path='/search' element={<Navigate to={'/unknown1'} />} />
                 <Route
                     path='/unknown1'
-                    element={<Navigate to={'/integrations'} />}
-                />
-                <Route
-                    path='/integrations'
                     element={<Navigate to={'/unknown2'} />}
                 />
                 <Route
                     path='/unknown2'
+                    element={<Navigate to={'/integrations'} />}
+                />
+                <Route
+                    path='/integrations'
+                    element={<Navigate to={'/unknown3'} />}
+                />
+                <Route
+                    path='/unknown3'
+                    element={<Navigate to={'/unknown4'} />}
+                />
+                <Route
+                    path='/unknown4'
                     element={<Navigate to={'/segments'} />}
                 />
                 <Route path='/segments' element={<div>segment div</div>} />

frontend/src/hooks/useRecentlyVisited.ts

@@ -1,6 +1,4 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useLocation, useMatch } from 'react-router-dom';
-import { routes } from 'component/menu/routes';
 import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage';
 import { basePath } from 'utils/formatPath';
 import { useCustomEvent } from './useCustomEvent';
@@ -20,8 +18,6 @@ const localStorageItems = (key: string): LastViewedPage[] => {
 
 export const useRecentlyVisited = () => {
     const key = `${basePath}:unleash-lastVisitedPages`;
-    const featureMatch = useMatch('/projects/:projectId/features/:featureId');
-    const projectMatch = useMatch('/projects/:projectId');
 
     const [lastVisited, setLastVisited] = useState<LastViewedPage[]>(
         localStorageItems(key),
@@ -34,26 +30,6 @@ export const useRecentlyVisited = () => {
         },
     );
 
-    const location = useLocation();
-
-    useEffect(() => {
-        if (!location.pathname) return;
-
-        const path = routes.find((r) => r.path === location.pathname);
-        if (path) {
-            setCappedLastVisited({ pathName: path.path });
-        } else if (featureMatch?.params.featureId) {
-            setCappedLastVisited({
-                featureId: featureMatch?.params.featureId,
-                projectId: featureMatch?.params.projectId,
-            });
-        } else if (projectMatch?.params.projectId) {
-            setCappedLastVisited({
-                projectId: projectMatch?.params.projectId,
-            });
-        }
-    }, [location, featureMatch, projectMatch]);
-
     useEffect(() => {
         if (lastVisited) {
             setLocalStorageItem(key, lastVisited);