fix: preview feature improvements (#729)

LIIKUNTA-668
City-of-Helsinki · Aug 29, 2024 · 4807af1 · 4807af1
1 parent ba88a84
commit 4807af1
Show file tree

Hide file tree

Showing 25 changed files with 262 additions and 175 deletions.
diff --git a/apps/events-helsinki/config/jest/index.test.tsx b/apps/events-helsinki/config/jest/index.test.tsx
@@ -3,7 +3,7 @@ import App from '../../src/pages/index';
 
 describe('App', () => {
   it.skip('renders without crashing', () => {
-    render(<App page={undefined} locale={'fi'} preview={false} />);
+    render(<App page={undefined} locale={'fi'} previewToken="" />);
     expect(screen.getByText('Hobbies-Helsinki')).toBeInTheDocument();
   });
 });
diff --git a/apps/events-helsinki/src/pages/articles/[...slug].tsx b/apps/events-helsinki/src/pages/articles/[...slug].tsx
@@ -15,8 +15,8 @@ import {
   getQlLanguage,
   defaultArticleArchiveBreadcrumbTitle,
   PageByTemplateBreadcrumbTitleDocument,
-  usePreview,
   PageMeta,
+  PreviewNotification,
 } from '@events-helsinki/components';
 import type {
   AppLanguage,
@@ -59,11 +59,11 @@ import serverSideTranslationsWithCommon from '../../domain/i18n/serverSideTransl
 const CATEGORIES_AMOUNT = 20;
 
 const NextCmsArticle: NextPage<{
-  preview: boolean;
+  previewToken: string;
   article: ArticleType;
   breadcrumbs: BreadcrumbListItem[] | null;
   collections: CollectionType[];
-}> = ({ article, breadcrumbs, collections, preview }) => {
+}> = ({ article, breadcrumbs, collections, previewToken }) => {
   const router = useRouter();
   const {
     currentLanguageCode,
@@ -72,7 +72,6 @@ const NextCmsArticle: NextPage<{
 
   const { t: commonTranslation } = useCommonTranslation();
   const { resilientT } = useResilientTranslation();
-  usePreview(resilientT('page:preview'), preview);
 
   const { footerMenu } = useContext(NavigationContext);
 
@@ -116,6 +115,7 @@ const NextCmsArticle: NextPage<{
       navigation={<Navigation page={article} />}
       content={
         <>
+          <PreviewNotification token={previewToken} />
           <RouteMeta origin={AppConfig.origin} page={article} />
           <PageMeta
             {...article?.seo}
@@ -174,7 +174,7 @@ export async function getStaticPaths() {
 
 type ResultProps =
   | {
-      preview: boolean;
+      previewToken: string;
       initialApolloState: NormalizedCacheObject;
       article: ArticleQuery['post'];
       breadcrumbs?: BreadcrumbListItem[];
@@ -259,7 +259,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         );
         return {
           props: {
-            preview: Boolean(previewData?.token),
+            previewToken: previewData?.token ?? '',
             initialApolloState: eventsApolloClient.cache.extract(),
             ...(await serverSideTranslationsWithCommon(language, ['event'])),
             article,
@@ -272,7 +272,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         logger.error('Error while generating content page', e);
         return {
           props: {
-            preview: false,
             error: {
               statusCode: 500,
             },

diff --git a/apps/events-helsinki/src/pages/articles/index.tsx b/apps/events-helsinki/src/pages/articles/index.tsx
@@ -13,8 +13,8 @@ import {
   getLanguageCodeFilter,
   useResilientTranslation,
   getFilteredBreadcrumbs,
-  usePreview,
   PageMeta,
+  PreviewNotification,
 } from '@events-helsinki/components';
 import type { BreadcrumbListItem } from 'hds-react';
 import type { GetStaticPropsContext } from 'next';
@@ -56,17 +56,16 @@ interface ArticleFilters {
 }
 
 export default function ArticleArchive({
-  preview,
+  previewToken,
   page,
   breadcrumbs,
 }: EventsGlobalPageProps & {
-  preview: boolean;
+  previewToken: string;
   page: PageType;
   breadcrumbs?: BreadcrumbListItem[];
 }) {
   const router = useRouter();
   const { resilientT } = useResilientTranslation();
-  usePreview(resilientT('page:preview'), preview);
 
   const getArticlesSearchQuery = (
     text: string,
@@ -172,6 +171,7 @@ export default function ArticleArchive({
       navigation={<Navigation page={page} />}
       content={
         <>
+          <PreviewNotification token={previewToken} />
           <RouteMeta origin={AppConfig.origin} page={page} />
           <PageMeta
             {...page?.seo}
@@ -314,7 +314,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
     return {
       props: {
-        preview: Boolean(previewData?.token),
+        previewToken: previewData?.token ?? '',
         page,
         breadcrumbs,
         ...(await serverSideTranslationsWithCommon(language, ['event'])),

diff --git a/apps/events-helsinki/src/pages/index.tsx b/apps/events-helsinki/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import type { NormalizedCacheObject } from '@apollo/client';
 import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   DEFAULT_LANGUAGE,
@@ -8,10 +9,14 @@ import {
   FooterSection,
   RouteMeta,
   useResilientTranslation,
-  usePreview,
+  PreviewNotification,
 } from '@events-helsinki/components';
 import { logger } from '@events-helsinki/components/loggers/logger';
-import type { GetStaticPropsContext, NextPage } from 'next';
+import type {
+  GetStaticPropsContext,
+  GetStaticPropsResult,
+  NextPage,
+} from 'next';
 import dynamic from 'next/dynamic';
 import React, { useContext } from 'react';
 import type { PageType, ArticleType } from 'react-helsinki-headless-cms';
@@ -23,6 +28,7 @@ import {
 import type {
   PageByTemplateQuery,
   PageByTemplateQueryVariables,
+  PageQuery,
 } from 'react-helsinki-headless-cms/apollo';
 import { PageByTemplateDocument } from 'react-helsinki-headless-cms/apollo';
 import AppConfig from '../domain/app/AppConfig';
@@ -32,16 +38,15 @@ import serverSideTranslationsWithCommon from '../domain/i18n/serverSideTranslati
 import { LandingPageContentLayout } from '../domain/search/landingPage/LandingPage';
 
 const HomePage: NextPage<{
-  preview: boolean;
   page: PageType;
   locale: string;
-}> = ({ page, locale, preview }) => {
+  previewToken: string;
+}> = ({ page, locale, previewToken }) => {
   const {
     utils: { getRoutedInternalHref },
   } = useConfig();
   const { footerMenu } = useContext(NavigationContext);
   const { resilientT } = useResilientTranslation();
-  usePreview(resilientT('page:preview'), preview);
 
   const RHHCPageContentNoSSR = dynamic(
     () => import('react-helsinki-headless-cms').then((mod) => mod.PageContent),
@@ -56,6 +61,7 @@ const HomePage: NextPage<{
       navigation={<Navigation />}
       content={
         <>
+          <PreviewNotification token={previewToken} />
           <RouteMeta origin={AppConfig.origin} />
           <RHHCPageContentNoSSR
             page={page}
@@ -78,73 +84,89 @@ const HomePage: NextPage<{
   );
 };
 
+type ResultProps =
+  | {
+      page: PageQuery['page'];
+      previewToken: string;
+      initialApolloState?: NormalizedCacheObject;
+    }
+  | {
+      error?: {
+        statusCode: number;
+      };
+    };
+
 export async function getStaticProps(context: GetStaticPropsContext) {
-  return getEventsStaticProps(context, async ({ apolloClient }) => {
-    try {
-      const language = getLanguageOrDefault(context.locale);
+  return getEventsStaticProps(
+    context,
+    async ({ apolloClient }): Promise<GetStaticPropsResult<ResultProps>> => {
+      try {
+        const language = getLanguageOrDefault(context.locale);
 
-      const previewData = context.previewData as PreviewDataObject;
-      const { data: pageData } = await apolloClient.query<
-        PageByTemplateQuery,
-        PageByTemplateQueryVariables
-      >({
-        query: PageByTemplateDocument,
-        variables: {
-          template: TemplateEnum.FrontPage,
-          language: getQlLanguage(language).toLocaleLowerCase(),
-        },
-        fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
-        ...(previewData?.token && {
-          context: {
-            headers: {
-              authorization: previewData.token,
+        const previewData = context.previewData as PreviewDataObject;
+        const { data: pageData } = await apolloClient.query<
+          PageByTemplateQuery,
+          PageByTemplateQueryVariables
+        >({
+          query: PageByTemplateDocument,
+          variables: {
+            template: TemplateEnum.FrontPage,
+            language: getQlLanguage(language).toLocaleLowerCase(),
+          },
+          fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+          ...(previewData?.token && {
+            context: {
+              headers: {
+                authorization: previewData.token,
+              },
             },
+          }),
+        });
+        if (!pageData) {
+          return {
+            notFound: true,
+          };
+        }
+        const page = pageData.pageByTemplate;
+
+        logger.info(
+          'pages/index.tsx',
+          'getStaticProps',
+          'getEventsStaticProps',
+          'Revalidating the front page'
+        );
+        return {
+          props: {
+            ...(await serverSideTranslationsWithCommon(language, [
+              'home',
+              'search',
+              'event',
+            ])),
+            previewToken: previewData?.token ?? '',
+            initialApolloState: apolloClient.cache.extract(),
+            page: page,
           },
-        }),
-      });
-      if (!pageData) {
+        };
+      } catch (e) {
+        logger.error(
+          'An error occured in the getStaticProps of the Next-js Index-page!',
+          'Tried to fetch the front page and the landing page from the Headless CMS, but an error occured!!',
+          e
+        );
         return {
-          notFound: true,
+          props: {
+            ...(await serverSideTranslationsWithCommon(DEFAULT_LANGUAGE, [
+              'home',
+              'search',
+              'event',
+            ])),
+            page: null,
+            previewToken: '',
+          },
         };
       }
-      const page = pageData.pageByTemplate;
-
-      logger.info(
-        'pages/index.tsx',
-        'getStaticProps',
-        'getEventsStaticProps',
-        'Revalidating the front page'
-      );
-      return {
-        props: {
-          preview: Boolean(previewData?.token),
-          ...(await serverSideTranslationsWithCommon(language, [
-            'home',
-            'search',
-            'event',
-          ])),
-          page: page,
-        },
-      };
-    } catch (e) {
-      logger.error(
-        'An error occured in the getStaticProps of the Next-js Index-page!',
-        'Tried to fetch the front page and the landing page from the Headless CMS, but an error occured!!',
-        e
-      );
-      return {
-        props: {
-          preview: false,
-          ...(await serverSideTranslationsWithCommon(DEFAULT_LANGUAGE, [
-            'home',
-            'search',
-            'event',
-          ])),
-          page: null,
-        },
-      };
     }
-  });
+  );
 }
 
 export default HomePage;
diff --git a/apps/events-helsinki/src/pages/pages/[...slug].tsx b/apps/events-helsinki/src/pages/pages/[...slug].tsx
@@ -14,8 +14,8 @@ import {
   FooterSection,
   RouteMeta,
   getFilteredBreadcrumbs,
-  usePreview,
   PageMeta,
+  PreviewNotification,
 } from '@events-helsinki/components';
 import { logger } from '@events-helsinki/components/loggers/logger';
 import type { BreadcrumbListItem } from 'hds-react';
@@ -45,17 +45,16 @@ import { eventsApolloClient } from '../../domain/clients/eventsApolloClient';
 import serverSideTranslationsWithCommon from '../../domain/i18n/serverSideTranslationsWithCommon';
 
 const NextCmsPage: NextPage<{
-  preview: boolean;
+  previewToken: string;
   page: PageType;
   breadcrumbs: BreadcrumbListItem[] | null;
   collections: CollectionType[];
-}> = ({ page, breadcrumbs, collections, preview }) => {
+}> = ({ page, breadcrumbs, collections, previewToken }) => {
   const {
     utils: { getRoutedInternalHref },
   } = useConfig();
   const { footerMenu } = useContext(NavigationContext);
   const { resilientT } = useResilientTranslation();
-  usePreview(resilientT('page:preview'), preview);
 
   // FIXME: Return null to fix SSR rendering for notFound-page.
   // This is needed only with fallback: true, but should not be needed at all.
@@ -74,6 +73,7 @@ const NextCmsPage: NextPage<{
       navigation={<Navigation page={page} />}
       content={
         <>
+          <PreviewNotification token={previewToken} />
           <RouteMeta origin={AppConfig.origin} page={page} />
           <PageMeta
             {...page?.seo}
@@ -128,7 +128,7 @@ export async function getStaticPaths() {
 
 type ResultProps =
   | {
-      preview: boolean;
+      previewToken: string;
       initialApolloState: NormalizedCacheObject;
       page: PageQuery['page'];
       breadcrumbs?: BreadcrumbListItem[];
@@ -194,7 +194,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         );
         return {
           props: {
-            preview: false,
+            previewToken: previewData?.token ?? '',
             initialApolloState: eventsApolloClient.cache.extract(),
             ...(await serverSideTranslationsWithCommon(language, ['event'])),
             page,
@@ -206,7 +206,6 @@ export async function getStaticProps(context: GetStaticPropsContext) {
       } catch (e) {
         return {
           props: {
-            preview: false,
             error: {
               statusCode: 400,
             },