From ca9d905a8af4c49811fb65085520d4a98b9a54af Mon Sep 17 00:00:00 2001 From: Anton Lantukh <alantukh@jwplayer.com> Date: Wed, 10 Jan 2024 16:32:52 +0100 Subject: [PATCH] fix(project): fix error state for preview and demo modes (#423) --- src/components/DemoConfigDialog/DemoConfigDialog.tsx | 4 +++- .../__snapshots__/DemoConfigDialog.test.tsx.snap | 5 +++++ src/components/ErrorPage/ErrorPage.module.scss | 10 ++++++++-- src/components/ErrorPage/ErrorPage.tsx | 3 ++- .../ErrorPage/__snapshots__/ErrorPage.test.tsx.snap | 5 +++++ src/components/Root/Root.tsx | 8 ++++---- src/stores/AppController.ts | 3 ++- 7 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/components/DemoConfigDialog/DemoConfigDialog.tsx b/src/components/DemoConfigDialog/DemoConfigDialog.tsx index 166cfcf0d..322c7b6fd 100644 --- a/src/components/DemoConfigDialog/DemoConfigDialog.tsx +++ b/src/components/DemoConfigDialog/DemoConfigDialog.tsx @@ -47,6 +47,7 @@ export function getConfigNavigateCallback(navigate: NavigateFunction) { const DemoConfigDialog = ({ query }: { query: BootstrapData }) => { const { data, isLoading, error, refetch, isSuccess } = query; const { configSource: selectedConfigSource } = data || {}; + const { t } = useTranslation('demo'); const navigate = useNavigate(); const navigateCallback = getConfigNavigateCallback(navigate); @@ -160,7 +161,8 @@ const DemoConfigDialog = ({ query }: { query: BootstrapData }) => { {!isSuccess && ( <div className={styles.configModal}> <ErrorPage - title={t('app_config_not_found')} + title={error?.payload?.title || t('app_config_not_found')} + message={error?.payload?.description || ''} learnMoreLabel={t('app_config_learn_more')} helpLink={'https://docs.jwplayer.com/platform/docs/ott-create-an-app-config'} error={typeof state.error === 'string' ? undefined : state.error} diff --git a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap index 89576b5fe..52d6e97fe 100644 --- a/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap +++ b/src/components/DemoConfigDialog/__snapshots__/DemoConfigDialog.test.tsx.snap @@ -45,6 +45,11 @@ exports[`<DemoConfigDialog> > renders and matches snapshot error dialog 1`] = ` <main class="_main_8c5621" > + <p + class="_message_8c5621" + > + generic_error_description + </p> <form method="GET" target="/" diff --git a/src/components/ErrorPage/ErrorPage.module.scss b/src/components/ErrorPage/ErrorPage.module.scss index e902f7ce1..5931fda13 100644 --- a/src/components/ErrorPage/ErrorPage.module.scss +++ b/src/components/ErrorPage/ErrorPage.module.scss @@ -8,7 +8,10 @@ align-items: center; min-height: 70vh; - a, a:visited, a:hover, a:active { + a, + a:visited, + a:hover, + a:active { color: inherit; font-weight: var(--body-font-weight-bold); text-decoration: underline; @@ -28,6 +31,10 @@ font-size: 34px; } +.message { + padding-bottom: 16px; +} + .main { color: variables.$white; @@ -50,7 +57,6 @@ .links { position: relative; - } .stack { diff --git a/src/components/ErrorPage/ErrorPage.tsx b/src/components/ErrorPage/ErrorPage.tsx index b7bb166b4..341621811 100644 --- a/src/components/ErrorPage/ErrorPage.tsx +++ b/src/components/ErrorPage/ErrorPage.tsx @@ -42,7 +42,8 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor </header> <main className={styles.main}> <> - {children || <p>{message || 'Try refreshing this page or come back later.'}</p>} + <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p> + {children} {(IS_DEVELOPMENT_BUILD || IS_DEMO_MODE || IS_PREVIEW_MODE) && helpLink && ( <p className={styles.links}> <a href={helpLink} target={'_blank'} rel={'noreferrer'}> diff --git a/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap b/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap index 15887cab6..249b11354 100644 --- a/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap +++ b/src/components/ErrorPage/__snapshots__/ErrorPage.test.tsx.snap @@ -23,6 +23,11 @@ exports[`<ErrorPage> > renders and matches snapshot 1`] = ` <main class="_main_8c5621" > + <p + class="_message_8c5621" + > + generic_error_description + </p> This is the content </main> </div> diff --git a/src/components/Root/Root.tsx b/src/components/Root/Root.tsx index 11cf0abbe..bcf3b9011 100644 --- a/src/components/Root/Root.tsx +++ b/src/components/Root/Root.tsx @@ -34,17 +34,17 @@ const DemoContentLoader = ({ query }: { query: BootstrapData }) => { return <LoadingOverlay />; } - const { configSource, settings } = data || {}; + const { configSource } = data || {}; return ( <> - {/*Show the error page when error except in demo mode (the demo mode shows its own error)*/} + {/* Show the error page when error except in demo mode (the demo mode shows its own error) */} {!IS_DEMO_OR_PREVIEW && error && ( <ErrorPage title={error?.payload?.title} message={error?.payload?.description} error={error} helpLink={error?.payload?.helpLink} /> )} - {IS_DEMO_OR_PREVIEW && settings && <DemoConfigDialog query={query} />} + {IS_DEMO_OR_PREVIEW && <DemoConfigDialog query={query} />} {/* Config select control to improve testing experience */} - {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && settings && <DevConfigSelector selectedConfig={configSource} />} + {(IS_DEVELOPMENT_BUILD || IS_PREVIEW_MODE) && <DevConfigSelector selectedConfig={configSource} />} </> ); }; diff --git a/src/stores/AppController.ts b/src/stores/AppController.ts index 74cc8c15a..846482cfb 100644 --- a/src/stores/AppController.ts +++ b/src/stores/AppController.ts @@ -65,11 +65,12 @@ export default class AppController { initializeApp = async () => { const settings = await this.settingsService.initialize(); const configSource = this.settingsService.getConfigSource(settings); - const config = await this.loadAndValidateConfig(configSource); // update settings in the config store useConfigStore.setState({ settings }); + const config = await this.loadAndValidateConfig(configSource); + if (config.features?.continueWatchingList && config.content.some((el) => el.type === PersonalShelf.ContinueWatching)) { await getModule(WatchHistoryController).initialize(); }