Répare la navigation dans les iframes

fix #2528
pull/2782/head
Johan Girod 2023-08-02 10:10:40 +02:00
parent 439adb571b
commit c8b48af193
2 changed files with 48 additions and 33 deletions

View File

@ -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>
)
}

View File

@ -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>
)
}