diff --git a/src/components/viewManager/ViewManagerPage.tsx b/src/components/viewManager/ViewManagerPage.tsx index dd2b386e29..ccdbfbddd1 100644 --- a/src/components/viewManager/ViewManagerPage.tsx +++ b/src/components/viewManager/ViewManagerPage.tsx @@ -1,5 +1,6 @@ +import { Action } from 'history'; import { FunctionComponent, useEffect } from 'react'; -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigationType } from 'react-router-dom'; import globalize from '../../scripts/globalize'; import type { RestoreViewFailResponse } from '../../types/viewManager'; @@ -15,6 +16,34 @@ export interface ViewManagerPageProps { transition?: string } +interface ViewOptions { + url: string + type?: string + // eslint-disable-next-line @typescript-eslint/no-explicit-any + state: any + autoFocus: boolean + fullscreen?: boolean + transition?: string + options: { + supportsThemeMedia?: boolean + enableMediaControl?: boolean + } +} + +const loadView = async (controller: string, view: string, viewOptions: ViewOptions) => { + const [ controllerFactory, viewHtml ] = await Promise.all([ + import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`), + import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`) + .then(html => globalize.translateHtml(html)) + ]); + + viewManager.loadView({ + ...viewOptions, + controllerFactory, + view: viewHtml + }); +}; + /** * Page component that renders legacy views via the ViewManager. * NOTE: Any new pages should use the generic Page component instead. @@ -29,6 +58,7 @@ const ViewManagerPage: FunctionComponent = ({ transition }) => { const location = useLocation(); + const navigationType = useNavigationType(); useEffect(() => { const loadPage = () => { @@ -45,20 +75,17 @@ const ViewManagerPage: FunctionComponent = ({ } }; - viewManager.tryRestoreView(viewOptions) + if (navigationType !== Action.Pop) { + console.debug('[ViewManagerPage] loading view [%s]', view); + return loadView(controller, view, viewOptions); + } + + console.debug('[ViewManagerPage] restoring view [%s]', view); + return viewManager.tryRestoreView(viewOptions) .catch(async (result?: RestoreViewFailResponse) => { if (!result?.cancelled) { - const [ controllerFactory, viewHtml ] = await Promise.all([ - import(/* webpackChunkName: "[request]" */ `../../controllers/${controller}`), - import(/* webpackChunkName: "[request]" */ `../../controllers/${view}`) - .then(html => globalize.translateHtml(html)) - ]); - - viewManager.loadView({ - ...viewOptions, - controllerFactory, - view: viewHtml - }); + console.debug('[ViewManagerPage] restore failed; loading view [%s]', view); + return loadView(controller, view, viewOptions); } }); }; @@ -76,7 +103,8 @@ const ViewManagerPage: FunctionComponent = ({ isThemeMediaSupported, transition, location.pathname, - location.search + location.search, + navigationType ]); return null;