feat: pages preview mode support

City-of-Helsinki · Apr 15, 2024 · ac49b55 · ac49b55
1 parent 9ea087a
commit ac49b55
Show file tree

Hide file tree

Showing 21 changed files with 179 additions and 8 deletions.
diff --git a/apps/events-helsinki/src/pages/api/preview.ts b/apps/events-helsinki/src/pages/api/preview.ts
@@ -0,0 +1,12 @@
+import { getMaxAge } from '@events-helsinki/components';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  if (!req.query.secret || !req.query.uri) {
+    return res.status(401).json({ message: 'Invalid token' });
+  }
+
+  const token = req.query.secret.toString();
+  res.setPreviewData({ token }, { maxAge: getMaxAge(token) });
+  res.redirect(req.query.uri as string);
+};
diff --git a/apps/events-helsinki/src/pages/articles/[...slug].tsx b/apps/events-helsinki/src/pages/articles/[...slug].tsx
@@ -20,6 +20,7 @@ import type {
   AppLanguage,
   PageByTemplateBreadcrumbTitleQuery,
   PageByTemplateBreadcrumbTitleQueryVariables,
+  PreviewDataObject,
 } from '@events-helsinki/components';
 import { logger } from '@events-helsinki/components/loggers/logger';
 import type { BreadcrumbListItem } from 'hds-react';
@@ -220,6 +221,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
 const getProps = async (context: GetStaticPropsContext) => {
   const language = getLanguageOrDefault(context.locale);
+  const isPreview = context.preview;
+  const previewData = context.previewData as PreviewDataObject;
   const { data: articleData } = await eventsApolloClient.query<
     ArticleQuery,
     ArticleQueryVariables
@@ -233,6 +236,11 @@ const getProps = async (context: GetStaticPropsContext) => {
       // `idType: PageIdType.Uri // idType is`fixed in query, so added automatically
     },
     fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+    context: {
+      headers: {
+        authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+      },
+    },
   });
 
   const { data: articleArchiveTitleData } = await eventsApolloClient.query<

diff --git a/apps/events-helsinki/src/pages/articles/index.tsx b/apps/events-helsinki/src/pages/articles/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ParsedUrlQueryInput } from 'querystring';
 import { NetworkStatus } from '@apollo/client';
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   getQlLanguage,
   NavigationContext,
@@ -257,6 +258,8 @@ export default function ArticleArchive({
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getEventsStaticProps(context, async ({ apolloClient }) => {
     const language = getLanguageOrDefault(context.locale);
+    const isPreview = context.preview;
+    const previewData = context.previewData as PreviewDataObject;
     const { data: pageData } = await apolloClient.query<
       PageByTemplateQuery,
       PageByTemplateQueryVariables
@@ -266,6 +269,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         template: TemplateEnum.PostsPage,
         language: getQlLanguage(language).toLocaleLowerCase(),
       },
+      context: {
+        headers: {
+          authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+        },
+      },
     });
     if (!pageData) {
       return {

diff --git a/apps/events-helsinki/src/pages/index.tsx b/apps/events-helsinki/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   DEFAULT_LANGUAGE,
   getQlLanguage,
@@ -71,7 +72,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
   return getEventsStaticProps(context, async ({ apolloClient }) => {
     try {
       const language = getLanguageOrDefault(context.locale);
-
+      const isPreview = context.preview;
+      const previewData = context.previewData as PreviewDataObject;
       const { data: pageData } = await apolloClient.query<
         PageByTemplateQuery,
         PageByTemplateQueryVariables
@@ -82,6 +84,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
           language: getQlLanguage(language).toLocaleLowerCase(),
         },
         fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+        context: {
+          headers: {
+            authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+          },
+        },
       });
       if (!pageData) {
         return {

diff --git a/apps/events-helsinki/src/pages/pages/[...slug].tsx b/apps/events-helsinki/src/pages/pages/[...slug].tsx
@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import type { NormalizedCacheObject } from '@apollo/client';
-import type { AppLanguage } from '@events-helsinki/components';
+import type {
+  AppLanguage,
+  PreviewDataObject,
+} from '@events-helsinki/components';
 import {
   useResilientTranslation,
   Navigation,
@@ -170,6 +173,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
 const getProps = async (context: GetStaticPropsContext) => {
   const language = getLanguageOrDefault(context.locale);
+  const isPreview = context.preview;
+  const previewData = context.previewData as PreviewDataObject;
   const { data: pageData } = await eventsApolloClient.query<
     PageQuery,
     PageQueryVariables
@@ -180,6 +185,11 @@ const getProps = async (context: GetStaticPropsContext) => {
       // `idType: PageIdType.Uri // idType is`fixed in query, so added automatically
     },
     fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+    context: {
+      headers: {
+        authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+      },
+    },
   });
 
   const currentPage = pageData.page;

diff --git a/apps/events-helsinki/src/pages/search/index.tsx b/apps/events-helsinki/src/pages/search/index.tsx
@@ -1,3 +1,4 @@
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   NavigationContext,
   useAppEventsTranslation,
@@ -93,7 +94,8 @@ export default Search;
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getEventsStaticProps(context, async () => {
     const language = getLanguageOrDefault(context.locale);
-
+    const isPreview = context.preview;
+    const previewData = context.previewData as PreviewDataObject;
     const { data: pageData } = await eventsApolloClient.query<
       PageQuery,
       PageQueryVariables
@@ -103,6 +105,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         id: `/${language}${ROUTES.SEARCH}/`,
       },
       fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+      context: {
+        headers: {
+          authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+        },
+      },
     });
     const page = pageData.page;
     const breadcrumbs = getFilteredBreadcrumbs(getBreadcrumbsFromPage(page));

diff --git a/apps/hobbies-helsinki/src/pages/api/preview.ts b/apps/hobbies-helsinki/src/pages/api/preview.ts
@@ -0,0 +1,12 @@
+import { getMaxAge } from '@events-helsinki/components';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  if (!req.query.secret || !req.query.uri) {
+    return res.status(401).json({ message: 'Invalid token' });
+  }
+
+  const token = req.query.secret.toString();
+  res.setPreviewData({ token }, { maxAge: getMaxAge(token) });
+  res.redirect(req.query.uri as string);
+};
diff --git a/apps/hobbies-helsinki/src/pages/articles/[...slug].tsx b/apps/hobbies-helsinki/src/pages/articles/[...slug].tsx
@@ -20,6 +20,7 @@ import type {
   AppLanguage,
   PageByTemplateBreadcrumbTitleQuery,
   PageByTemplateBreadcrumbTitleQueryVariables,
+  PreviewDataObject,
 } from '@events-helsinki/components';
 import { logger } from '@events-helsinki/components/loggers/logger';
 import type { BreadcrumbListItem } from 'hds-react';
@@ -219,6 +220,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
 const getProps = async (context: GetStaticPropsContext) => {
   const language = getLanguageOrDefault(context.locale);
+  const isPreview = context.preview;
+  const previewData = context.previewData as PreviewDataObject;
   const { data: articleData } = await hobbiesApolloClient.query<
     ArticleQuery,
     ArticleQueryVariables
@@ -229,6 +232,11 @@ const getProps = async (context: GetStaticPropsContext) => {
       // `idType: PageIdType.Uri // idType is`fixed in query, so added automatically
     },
     fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+    context: {
+      headers: {
+        authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+      },
+    },
   });
 
   const { data: articleArchiveTitleData } = await hobbiesApolloClient.query<

diff --git a/apps/hobbies-helsinki/src/pages/articles/index.tsx b/apps/hobbies-helsinki/src/pages/articles/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ParsedUrlQueryInput } from 'querystring';
 import { NetworkStatus } from '@apollo/client';
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   getQlLanguage,
   NavigationContext,
@@ -257,6 +258,8 @@ export default function ArticleArchive({
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getHobbiesStaticProps(context, async ({ apolloClient }) => {
     const language = getLanguageOrDefault(context.locale);
+    const isPreview = context.preview;
+    const previewData = context.previewData as PreviewDataObject;
     const { data: pageData } = await apolloClient.query<
       PageByTemplateQuery,
       PageByTemplateQueryVariables
@@ -266,6 +269,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         template: TemplateEnum.PostsPage,
         language: getQlLanguage(language).toLocaleLowerCase(),
       },
+      context: {
+        headers: {
+          authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+        },
+      },
     });
     if (!pageData) {
       return {

diff --git a/apps/hobbies-helsinki/src/pages/index.tsx b/apps/hobbies-helsinki/src/pages/index.tsx
@@ -1,3 +1,4 @@
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   DEFAULT_LANGUAGE,
   getQlLanguage,
@@ -70,7 +71,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
   return getHobbiesStaticProps(context, async ({ apolloClient }) => {
     try {
       const language = getLanguageOrDefault(context.locale);
-
+      const isPreview = context.preview;
+      const previewData = context.previewData as PreviewDataObject;
       const { data: pageData } = await apolloClient.query<
         PageByTemplateQuery,
         PageByTemplateQueryVariables
@@ -81,6 +83,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
           language: getQlLanguage(language).toLocaleLowerCase(),
         },
         fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+        context: {
+          headers: {
+            authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+          },
+        },
       });
       if (!pageData) {
         return {

diff --git a/apps/hobbies-helsinki/src/pages/pages/[...slug].tsx b/apps/hobbies-helsinki/src/pages/pages/[...slug].tsx
@@ -1,7 +1,10 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 import type { NormalizedCacheObject } from '@apollo/client';
-import type { AppLanguage } from '@events-helsinki/components';
+import type {
+  AppLanguage,
+  PreviewDataObject,
+} from '@events-helsinki/components';
 import {
   NavigationContext,
   getAllPages,
@@ -170,6 +173,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
 const getProps = async (context: GetStaticPropsContext) => {
   const language = getLanguageOrDefault(context.locale);
+  const isPreview = context.preview;
+  const previewData = context.previewData as PreviewDataObject;
   const { data: pageData } = await hobbiesApolloClient.query<
     PageQuery,
     PageQueryVariables
@@ -180,6 +185,11 @@ const getProps = async (context: GetStaticPropsContext) => {
       // `idType: PageIdType.Uri // idType is`fixed in query, so added automatically
     },
     fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+    context: {
+      headers: {
+        authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+      },
+    },
   });
 
   const currentPage = pageData.page;

diff --git a/apps/hobbies-helsinki/src/pages/search/index.tsx b/apps/hobbies-helsinki/src/pages/search/index.tsx
@@ -1,3 +1,4 @@
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   NavigationContext,
   useAppHobbiesTranslation,
@@ -92,7 +93,8 @@ export default Search;
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getHobbiesStaticProps(context, async () => {
     const language = getLanguageOrDefault(context.locale);
-
+    const isPreview = context.preview;
+    const previewData = context.previewData as PreviewDataObject;
     const { data: pageData } = await hobbiesApolloClient.query<
       PageQuery,
       PageQueryVariables
@@ -102,6 +104,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         id: `/${language}${ROUTES.SEARCH}/`,
       },
       fetchPolicy: 'no-cache', // FIXME: network-only should work better, but for some reason it only updates once.
+      context: {
+        headers: {
+          authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+        },
+      },
     });
     const page = pageData.page;
     const breadcrumbs = getFilteredBreadcrumbs(getBreadcrumbsFromPage(page));

diff --git a/apps/sports-helsinki/src/pages/api/preview.ts b/apps/sports-helsinki/src/pages/api/preview.ts
@@ -0,0 +1,12 @@
+import { getMaxAge } from '@events-helsinki/components';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+export default async (req: NextApiRequest, res: NextApiResponse) => {
+  if (!req.query.secret || !req.query.uri) {
+    return res.status(401).json({ message: 'Invalid token' });
+  }
+
+  const token = req.query.secret.toString();
+  res.setPreviewData({ token }, { maxAge: getMaxAge(token) });
+  res.redirect(req.query.uri as string);
+};
diff --git a/apps/sports-helsinki/src/pages/articles/[...slug].tsx b/apps/sports-helsinki/src/pages/articles/[...slug].tsx
@@ -20,6 +20,7 @@ import type {
   AppLanguage,
   PageByTemplateBreadcrumbTitleQuery,
   PageByTemplateBreadcrumbTitleQueryVariables,
+  PreviewDataObject,
 } from '@events-helsinki/components';
 import { logger } from '@events-helsinki/components/loggers/logger';
 import type { BreadcrumbListItem } from 'hds-react';
@@ -219,6 +220,8 @@ export async function getStaticProps(context: GetStaticPropsContext) {
 
 const getProps = async (context: GetStaticPropsContext) => {
   const language = getLanguageOrDefault(context.locale);
+  const isPreview = context.preview;
+  const previewData = context.previewData as PreviewDataObject;
   const { data: articleData } = await sportsApolloClient.query<
     ArticleQuery,
     ArticleQueryVariables
@@ -240,6 +243,11 @@ const getProps = async (context: GetStaticPropsContext) => {
       template: TemplateEnum.PostsPage,
       language: getQlLanguage(language).toLocaleLowerCase(),
     },
+    context: {
+      headers: {
+        authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+      },
+    },
   });
 
   const currentArticle = articleData.post;

diff --git a/apps/sports-helsinki/src/pages/articles/index.tsx b/apps/sports-helsinki/src/pages/articles/index.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { ParsedUrlQueryInput } from 'querystring';
 import { NetworkStatus } from '@apollo/client';
+import type { PreviewDataObject } from '@events-helsinki/components';
 import {
   getQlLanguage,
   NavigationContext,
@@ -257,6 +258,8 @@ export default function ArticleArchive({
 export async function getStaticProps(context: GetStaticPropsContext) {
   return getSportsStaticProps(context, async ({ apolloClient }) => {
     const language = getLanguageOrDefault(context.locale);
+    const isPreview = context.preview;
+    const previewData = context.previewData as PreviewDataObject;
     const { data: pageData } = await apolloClient.query<
       PageByTemplateQuery,
       PageByTemplateQueryVariables
@@ -266,6 +269,11 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         template: TemplateEnum.PostsPage,
         language: getQlLanguage(language).toLocaleLowerCase(),
       },
+      context: {
+        headers: {
+          authorization: isPreview ? `Bearer ${previewData?.token}` : '',
+        },
+      },
     });
     if (!pageData) {
       return {