From c8b48af193d1ea8b738165d47cd35c1f82e79b62 Mon Sep 17 00:00:00 2001
From: Johan Girod <johan.girod@beta.gouv.fr>
Date: Wed, 2 Aug 2023 10:10:40 +0200
Subject: [PATCH] =?UTF-8?q?R=C3=A9pare=20la=20navigation=20dans=20les=20if?=
 =?UTF-8?q?rames?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

fix #2528
---
 site/source/components/Provider.tsx | 53 +++++++++++++++--------------
 site/source/hooks/useIsEmbedded.tsx | 28 ++++++++++-----
 2 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/site/source/components/Provider.tsx b/site/source/components/Provider.tsx
index a7453d971..0dce9d644 100644
--- a/site/source/components/Provider.tsx
+++ b/site/source/components/Provider.tsx
@@ -16,6 +16,7 @@ import { H1, H4 } from '@/design-system/typography/heading'
 import { Link } from '@/design-system/typography/link'
 import { Body, Intro } from '@/design-system/typography/paragraphs'
 import { useIframeResizer } from '@/hooks/useIframeResizer'
+import { EmbededContextProvider } from '@/hooks/useIsEmbedded'
 
 import { Message } from '../design-system'
 import * as safeLocalStorage from '../storage/safeLocalStorage'
@@ -42,31 +43,33 @@ export default function Provider({
 	useIframeResizer()
 
 	return (
-		<DarkModeProvider>
-			<DesignSystemThemeProvider>
-				<ErrorBoundary showDialog fallback={ErrorFallback}>
-					{!import.meta.env.SSR &&
-						import.meta.env.MODE === 'production' &&
-						'serviceWorker' in navigator &&
-						!inIframe() && <ServiceWorker />}
-					<OverlayProvider>
-						<ReduxProvider store={store}>
-							<ThemeColorsProvider>
-								<DisableAnimationOnPrintProvider>
-									<SiteNameContext.Provider value={basename}>
-										<I18nextProvider i18n={i18next}>
-											<BrowserRouterProvider basename={basename}>
-												{children}
-											</BrowserRouterProvider>
-										</I18nextProvider>
-									</SiteNameContext.Provider>
-								</DisableAnimationOnPrintProvider>
-							</ThemeColorsProvider>
-						</ReduxProvider>
-					</OverlayProvider>
-				</ErrorBoundary>
-			</DesignSystemThemeProvider>
-		</DarkModeProvider>
+		<EmbededContextProvider>
+			<DarkModeProvider>
+				<DesignSystemThemeProvider>
+					<ErrorBoundary showDialog fallback={ErrorFallback}>
+						{!import.meta.env.SSR &&
+							import.meta.env.MODE === 'production' &&
+							'serviceWorker' in navigator &&
+							!inIframe() && <ServiceWorker />}
+						<OverlayProvider>
+							<ReduxProvider store={store}>
+								<ThemeColorsProvider>
+									<DisableAnimationOnPrintProvider>
+										<SiteNameContext.Provider value={basename}>
+											<I18nextProvider i18n={i18next}>
+												<BrowserRouterProvider basename={basename}>
+													{children}
+												</BrowserRouterProvider>
+											</I18nextProvider>
+										</SiteNameContext.Provider>
+									</DisableAnimationOnPrintProvider>
+								</ThemeColorsProvider>
+							</ReduxProvider>
+						</OverlayProvider>
+					</ErrorBoundary>
+				</DesignSystemThemeProvider>
+			</DarkModeProvider>
+		</EmbededContextProvider>
 	)
 }
 
diff --git a/site/source/hooks/useIsEmbedded.tsx b/site/source/hooks/useIsEmbedded.tsx
index 2754bd0d1..2f02e272a 100644
--- a/site/source/hooks/useIsEmbedded.tsx
+++ b/site/source/hooks/useIsEmbedded.tsx
@@ -1,13 +1,25 @@
-import { useMatch } from 'react-router-dom'
+import { createContext, useContext, useState } from 'react'
 
 export function useIsEmbedded(): boolean {
-	try {
-		if (useMatch('/iframes/*')) {
-			return true
-		}
-	} catch (e) {
-		// When useMatch is called outside ReactRouter context, it raise an error. We can safely ignore it.
+	return useContext(EmbededContext)
+}
+
+const EmbededContext = createContext(false)
+
+export function EmbededContextProvider({
+	children,
+}: {
+	children: React.ReactNode
+}) {
+	const [isEmbedded, setIsEmbedded] = useState(false)
+	const isIframePath = document.location.pathname.includes('/iframes/')
+	if (isIframePath && !isEmbedded) {
+		setIsEmbedded(true)
 	}
 
-	return false
+	return (
+		<EmbededContext.Provider value={isEmbedded}>
+			{children}
+		</EmbededContext.Provider>
+	)
 }