Merge pull request #149 from InseeFr/develop

fix MFE issue

Author: SimonDmz

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pearl",
-  "version": "2.1.2",
+  "version": "2.1.3",
   "private": true,
   "dependencies": {
     "@emotion/react": "^11.11.1",

src/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 import { loadConfiguration, useConfiguration } from './utils/hooks/useConfiguration';
 import { PearlTheme } from './ui/PearlTheme';
@@ -14,15 +14,20 @@ import './app.css';
 import { SuiviPage } from './pages/SuiviPage';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { QueenPage } from './pages/QueenPage';
 import { ServiceWorkerStatus } from './ui/ServiceWorkerStatus';
 import { ResetData } from './pages/ResetData';
 import { enUS, fr } from 'date-fns/locale';
 
+const QueenPage = lazy(() => import('./pages/QueenPage'));
+
 const router = createBrowserRouter([
   {
     path: '/queen/*',
-    element: <QueenPage />,
+    element: (
+      <Suspense>
+        <QueenPage />
+      </Suspense>
+    ),
   },
   {
     path: '/',

src/pages/QueenPage.jsx

@@ -3,19 +3,50 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { mount } from 'dramaQueen/DramaIndex';
 import { useQueenListener } from '../utils/hooks/useQueenListener';
 
+const queenPathname = '/queen';
+
 /**
  * Mount Queen to sync data
  * @returns {JSX.Element}
  * @constructor
  */
-export function QueenPage() {
-  /** @var {import('react').Ref<HTMLDivElement>} ref */
+
+export default function QueenPage() {
   const ref = useRef(null);
   const location = useLocation();
 
   const navigate = useNavigate();
+
   useQueenListener(navigate);
 
+  // Listen to navigation events dispatched inside Drama Queen mfe.
+  useEffect(() => {
+    const dramaQueenNavigationEventHandler = event => {
+      const pathname = event.detail;
+      const newPathname = `${queenPathname}${pathname}`;
+      if (newPathname === location.pathname) {
+        return;
+      }
+      navigate(newPathname);
+    };
+    window.addEventListener('[Drama Queen] navigated', dramaQueenNavigationEventHandler);
+
+    return () => {
+      window.removeEventListener('[Drama Queen] navigated', dramaQueenNavigationEventHandler);
+    };
+  }, [location]);
+
+  // Listen for Pearl location changes and dispatch a notification.
+  useEffect(() => {
+    if (location.pathname.startsWith(queenPathname)) {
+      window.dispatchEvent(
+        new CustomEvent('[Pearl] navigated', {
+          detail: location.pathname.replace(queenPathname, ''),
+        })
+      );
+    }
+  }, [location]);
+
   const isFirstRunRef = useRef(true);
   const unmountRef = useRef(() => {});
 
@@ -25,7 +56,7 @@ export function QueenPage() {
     }
     unmountRef.current = mount({
       mountPoint: ref.current,
-      initialPathname: location.pathname.replace('', ''),
+      initialPathname: location.pathname.replace(queenPathname, ''),
     });
     isFirstRunRef.current = false;
   }, [location]);

src/ui/Questionnaire/Questionnaires.jsx

@@ -5,6 +5,8 @@ import { Row } from '../Row';
 import Stack from '@mui/material/Stack';
 import React from 'react';
 import Button from '@mui/material/Button';
+import { Link as RouterLink } from 'react-router-dom';
+
 import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
 import StickyNote2Icon from '@mui/icons-material/StickyNote2';
 import D from 'i18n';
@@ -28,8 +30,8 @@ export function Questionnaires({ surveyUnit }) {
             variant="contained"
             disabled={!isAvailable}
             startIcon={<LibraryBooksIcon />}
-            component="a"
-            href={`/queen/survey-unit/${id}`}
+            component={RouterLink}
+            to={`/queen/survey-unit/${id}`}
           >
             {D.accessTheQuestionnaire}
           </Button>