From 1ddc36be5f36a88ab04d32fcb64104d506935e36 Mon Sep 17 00:00:00 2001 From: Dylan Decrulle Date: Wed, 31 Jul 2024 09:14:03 +0200 Subject: [PATCH 1/4] Listen and dispatch navigation events for mfe --- src/pages/QueenPage.jsx | 35 +++++++++++++++++++++++-- src/ui/Questionnaire/Questionnaires.jsx | 6 +++-- 2 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/pages/QueenPage.jsx b/src/pages/QueenPage.jsx index cda238622..a77cd07f6 100644 --- a/src/pages/QueenPage.jsx +++ b/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} ref */ const ref = useRef(null); const location = useLocation(); const navigate = useNavigate(); + useQueenListener(navigate); + // Listen to navigation events dispatched inside Drama Queen mfe. + useEffect(() => { + const app1NavigationEventHandler = event => { + const pathname = event.detail; + const newPathname = `${queenPathname}${pathname}`; + if (newPathname === location.pathname) { + return; + } + navigate(newPathname); + }; + window.addEventListener('[Drama Queen] navigated', app1NavigationEventHandler); + + return () => { + window.removeEventListener('[Drama Queen] navigated', app1NavigationEventHandler); + }; + }, [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]); diff --git a/src/ui/Questionnaire/Questionnaires.jsx b/src/ui/Questionnaire/Questionnaires.jsx index ebfb60a01..6a71b3016 100644 --- a/src/ui/Questionnaire/Questionnaires.jsx +++ b/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={} - component="a" - href={`/queen/survey-unit/${id}`} + component={RouterLink} + to={`/queen/survey-unit/${id}`} > {D.accessTheQuestionnaire} From 675f99abe7a6c9ca3d3b81fc49e9e55bc478ff9c Mon Sep 17 00:00:00 2001 From: Dylan Decrulle Date: Wed, 31 Jul 2024 18:32:34 +0200 Subject: [PATCH 2/4] Lazy import Queen --- src/App.jsx | 11 ++++++++--- src/pages/QueenPage.jsx | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 81dfe114c..40d7a2487 100644 --- a/src/App.jsx +++ b/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: , + element: ( + + + + ), }, { path: '/', diff --git a/src/pages/QueenPage.jsx b/src/pages/QueenPage.jsx index a77cd07f6..7afef0ee8 100644 --- a/src/pages/QueenPage.jsx +++ b/src/pages/QueenPage.jsx @@ -11,7 +11,7 @@ const queenPathname = '/queen'; * @constructor */ -export function QueenPage() { +export default function QueenPage() { const ref = useRef(null); const location = useLocation(); From c160788170fbf1e8a527fc2e076234aa80e3a0be Mon Sep 17 00:00:00 2001 From: Dylan Decrulle Date: Thu, 22 Aug 2024 09:55:22 +0200 Subject: [PATCH 3/4] rename handler --- src/pages/QueenPage.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/QueenPage.jsx b/src/pages/QueenPage.jsx index 7afef0ee8..b2c4566de 100644 --- a/src/pages/QueenPage.jsx +++ b/src/pages/QueenPage.jsx @@ -21,7 +21,7 @@ export default function QueenPage() { // Listen to navigation events dispatched inside Drama Queen mfe. useEffect(() => { - const app1NavigationEventHandler = event => { + const dramaQueenNavigationEventHandler = event => { const pathname = event.detail; const newPathname = `${queenPathname}${pathname}`; if (newPathname === location.pathname) { @@ -29,10 +29,10 @@ export default function QueenPage() { } navigate(newPathname); }; - window.addEventListener('[Drama Queen] navigated', app1NavigationEventHandler); + window.addEventListener('[Drama Queen] navigated', dramaQueenNavigationEventHandler); return () => { - window.removeEventListener('[Drama Queen] navigated', app1NavigationEventHandler); + window.removeEventListener('[Drama Queen] navigated', dramaQueenNavigationEventHandler); }; }, [location]); From 4688ce6e27d6b992669e624c94814f0211998802 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Demazi=C3=A8re?= Date: Thu, 22 Aug 2024 14:15:46 +0200 Subject: [PATCH 4/4] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ff48f4f1d..d936d980d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "pearl", - "version": "2.1.2", + "version": "2.1.3", "private": true, "dependencies": { "@emotion/react": "^11.11.1",