feat: Synced last viewed projects (#7208)

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -213,7 +213,7 @@ export const RecentProjectsNavigation: FC<{
         <Box>
             {mode === 'full' && (
                 <Typography
-                    sx={{ fontWeight: 'bold', fontSize: 'small', mb: 1, ml: 1 }}
+                    sx={{ fontWeight: 'bold', fontSize: 'small', mb: 1, ml: 2 }}
                 >
                     Recent project
                 </Typography>

frontend/src/hooks/useCustomEvent.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+
+/**
+ * A hook that provides methods to emit and listen to custom DOM events.
+ * @param eventName The name of the event to listen for and dispatch.
+ */
+export const useCustomEvent = (
+    eventName: string,
+    handler: (event: CustomEvent) => void,
+) => {
+    const emitEvent = () => {
+        const event = new CustomEvent(eventName);
+        document.dispatchEvent(event);
+    };
+
+    useEffect(() => {
+        const eventListener = (event: Event) => handler(event as CustomEvent);
+
+        document.addEventListener(eventName, eventListener);
+
+        return () => {
+            document.removeEventListener(eventName, eventListener);
+        };
+    }, [eventName, handler]);
+
+    return { emitEvent };
+};

frontend/src/hooks/useLastViewedProject.test.tsx

@@ -0,0 +1,58 @@
+import type React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useLastViewedProject } from './useLastViewedProject';
+
+const TestComponent: React.FC<{ testId: string; buttonLabel: string }> = ({
+    testId,
+    buttonLabel,
+}) => {
+    const { lastViewed, setLastViewed } = useLastViewedProject();
+
+    return (
+        <div>
+            <span data-testid={testId}>{lastViewed}</span>
+            <button
+                type='button'
+                onClick={() => setLastViewed(`${buttonLabel} Project`)}
+                data-testid={`update-${testId}`}
+            >
+                Update to {buttonLabel} Project
+            </button>
+        </div>
+    );
+};
+
+describe('Synchronization between multiple components using useLastViewedProject', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        render(
+            <>
+                <TestComponent testId='component1' buttonLabel='First' />
+                <TestComponent testId='component2' buttonLabel='Second' />
+            </>,
+        );
+    });
+
+    it('updates both components when one updates its last viewed project', async () => {
+        expect(screen.getByTestId('component1').textContent).toBe('');
+        expect(screen.getByTestId('component2').textContent).toBe('');
+
+        fireEvent.click(screen.getByTestId('update-component1'));
+
+        expect(await screen.findByTestId('component1')).toHaveTextContent(
+            'First Project',
+        );
+        expect(await screen.findByTestId('component2')).toHaveTextContent(
+            'First Project',
+        );
+
+        fireEvent.click(screen.getByTestId('update-component2'));
+
+        expect(await screen.findByTestId('component1')).toHaveTextContent(
+            'Second Project',
+        );
+        expect(await screen.findByTestId('component2')).toHaveTextContent(
+            'Second Project',
+        );
+    });
+});

frontend/src/hooks/useLastViewedProject.ts

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react';
 import { getLocalStorageItem, setLocalStorageItem } from '../utils/storage';
 import { basePath } from 'utils/formatPath';
+import { useCustomEvent } from './useCustomEvent';
 
 export const useLastViewedProject = () => {
     const key = `${basePath}:unleash-lastViewedProject`;
@@ -9,9 +10,14 @@ export const useLastViewedProject = () => {
         return getLocalStorageItem(key);
     });
 
+    const { emitEvent } = useCustomEvent('lastViewedProjectUpdated', () => {
+        setLastViewed(getLocalStorageItem(key));
+    });
+
     useEffect(() => {
         if (lastViewed) {
             setLocalStorageItem(key, lastViewed);
+            emitEvent();
         }
     }, [lastViewed, key]);