Add previewModeContext and create usePreviewMode hook

Author: Vadorequest

src/components/appBootstrap/MultiversalAppBootstrap.tsx

@@ -10,7 +10,6 @@ import customerContext from '../../stores/customerContext';
 import i18nContext from '../../stores/i18nContext';
 import { Theme } from '../../types/data/Theme';
 import { MultiversalAppBootstrapProps } from '../../types/nextjs/MultiversalAppBootstrapProps';
-import { MultiversalPageProps } from '../../types/pageProps/MultiversalPageProps';
 import { SSGPageProps } from '../../types/pageProps/SSGPageProps';
 import { SSRPageProps } from '../../types/pageProps/SSRPageProps';
 import { initCustomerTheme } from '../../utils/data/theme';
@@ -20,6 +19,7 @@ import DefaultErrorLayout from '../errors/DefaultErrorLayout';
 import BrowserPageBootstrap, { BrowserPageBootstrapProps } from './BrowserPageBootstrap';
 import ServerPageBootstrap, { ServerPageBootstrapProps } from './ServerPageBootstrap';
 import UniversalGlobalStyles from './UniversalGlobalStyles';
+import previewModeContext from '../../stores/previewModeContext';
 
 const fileLabel = 'components/appBootstrap/MultiversalAppBootstrap';
 const logger = createLogger({
@@ -68,7 +68,19 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
       i18nTranslations,
       lang,
       locale,
-    }: MultiversalPageProps = pageProps;
+    }: SSGPageProps | SSRPageProps = pageProps;
+    let preview,
+      previewData;
+
+    if ('preview' in pageProps) {
+      // SSG
+      preview = pageProps.preview;
+      previewData = pageProps.previewData;
+    } else {
+      // SSR
+      preview = false;
+      previewData = null;
+    }
 
     if (!customer || !i18nTranslations || !lang || !locale) {
       // Unrecoverable error, we can't even display the layout because we don't have the minimal required information to properly do so
@@ -143,26 +155,28 @@ const MultiversalAppBootstrap: React.FunctionComponent<Props> = (props): JSX.Ele
     }
 
     return (
-      <i18nContext.Provider value={{ lang, locale }}>
-        <customerContext.Provider value={customer}>
-          {/* XXX Global styles that applies to all pages go there */}
-          <UniversalGlobalStyles theme={theme} />
-
-          <ThemeProvider theme={theme}>
-            {
-              isBrowser() ? (
-                <BrowserPageBootstrap
-                  {...browserPageBootstrapProps}
-                />
-              ) : (
-                <ServerPageBootstrap
-                  {...serverPageBootstrapProps}
-                />
-              )
-            }
-          </ThemeProvider>
-        </customerContext.Provider>
-      </i18nContext.Provider>
+      <previewModeContext.Provider value={{ preview, previewData }}>
+        <i18nContext.Provider value={{ lang, locale }}>
+          <customerContext.Provider value={customer}>
+            {/* XXX Global styles that applies to all pages go there */}
+            <UniversalGlobalStyles theme={theme} />
+
+            <ThemeProvider theme={theme}>
+              {
+                isBrowser() ? (
+                  <BrowserPageBootstrap
+                    {...browserPageBootstrapProps}
+                  />
+                ) : (
+                  <ServerPageBootstrap
+                    {...serverPageBootstrapProps}
+                  />
+                )
+              }
+            </ThemeProvider>
+          </customerContext.Provider>
+        </i18nContext.Provider>
+      </previewModeContext.Provider>
     );
 
   } else {

src/hooks/usePreviewMode.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import previewModeContext, { PreviewModeContext } from '../stores/previewModeContext';
+
+export type PreviewMode = PreviewModeContext
+
+/**
+ * Hook to access Next.js preview mode data
+ *
+ * Uses previewModeContext internally (provides an identical API)
+ *
+ * This hook should be used by components in favor of previewModeContext directly,
+ * because it grants higher flexibility if you ever need to change the implementation (e.g: use something else than React.Context, like Redux/MobX)
+ *
+ * @see https://nextjs.org/docs/advanced-features/preview-mode
+ */
+const usePreviewMode = (): PreviewModeContext => {
+  return React.useContext(previewModeContext);
+};
+
+export default usePreviewMode;

src/stores/previewModeContext.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { PreviewData } from '../types/nextjs/PreviewData';
+
+export type PreviewModeContext = {
+  preview: boolean;
+  previewData: PreviewData;
+}
+
+/**
+ * Uses native React Context API
+ *
+ * @example Usage
+ *  import previewModeContext from './src/stores/previewModeContext';
+ *  const { preview, previewData }: PreviewModeContext = React.useContext(previewModeContext);
+ *
+ * @see https://reactjs.org/docs/context.html
+ * @see https://medium.com/better-programming/react-hooks-usecontext-30eb560999f for useContext hook example (open in anonymous browser #paywall)
+ */
+export const previewModeContext = React.createContext<PreviewModeContext>(null);
+
+export default previewModeContext;

src/types/nextjs/PreviewData.ts

@@ -0,0 +1,10 @@
+/**
+ * Preview data type, set when preview mode is enabled
+ * XXX Currently "unused", doesn't store any data
+ *
+ * Set to "undefined" when preview mode is disabled (by Next.js)
+ * We override any falsy value to "null" to avoid a serialisation issue ("undefined" cannot be serialised)
+ *
+ * @see https://nextjs.org/docs/advanced-features/preview-mode#step-2-update-getstaticprops
+ */
+export type PreviewData = null | {};

src/types/nextjs/StaticPropsInput.ts

@@ -1,10 +1,11 @@
 import { StaticParams } from './StaticParams';
+import { PreviewData } from './PreviewData';
 
 /**
  * Static props given as inputs for getStaticProps
  */
 export type StaticPropsInput = {
   params?: StaticParams;
-  preview?: boolean;
-  previewData?: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  preview: boolean;
+  previewData: PreviewData;
 }

src/types/pageProps/SSGPageProps.ts

@@ -1,4 +1,5 @@
 import { MultiversalAppBootstrapPageProps } from '../nextjs/MultiversalAppBootstrapPageProps';
+import { PreviewData } from '../nextjs/PreviewData';
 import { MultiversalPageProps } from './MultiversalPageProps';
 
 /**
@@ -14,6 +15,8 @@ import { MultiversalPageProps } from './MultiversalPageProps';
 export type SSGPageProps<E extends {} = {}> = {
   // Props that are specific to SSG
   isStaticRendering: boolean;
+  preview: boolean;
+  previewData: PreviewData;
 } & MultiversalPageProps // Generic props that are provided immediately, no matter what
   & Partial<MultiversalAppBootstrapPageProps> // Pages served by SSG eventually benefit from props injected by the MultiversalAppBootstrap component
   & E;

src/utils/nextjs/SSG.ts

@@ -6,12 +6,13 @@ import { LAYOUT_QUERY } from '../../gql/common/layoutQuery';
 import { supportedLocales } from '../../i18nConfig';
 import { Customer } from '../../types/data/Customer';
 import { I18nLocale } from '../../types/i18n/I18nLocale';
+import { PreviewData } from '../../types/nextjs/PreviewData';
 import { StaticParams } from '../../types/nextjs/StaticParams';
 import { StaticPath } from '../../types/nextjs/StaticPath';
 import { StaticPathsOutput } from '../../types/nextjs/StaticPathsOutput';
-import { SSGPageProps } from '../../types/pageProps/SSGPageProps';
 import { StaticPropsInput } from '../../types/nextjs/StaticPropsInput';
 import { StaticPropsOutput } from '../../types/nextjs/StaticPropsOutput';
+import { SSGPageProps } from '../../types/pageProps/SSGPageProps';
 import { prepareGraphCMSLocaleHeader } from '../gql/graphcms';
 import { createApolloClient } from '../gql/graphql';
 import { DEFAULT_LOCALE, resolveFallbackLanguage } from '../i18n/i18n';
@@ -35,6 +36,8 @@ import { fetchTranslations, I18nextResources } from '../i18n/i18nextLocize';
  */
 export const getCommonStaticProps: GetStaticProps<SSGPageProps, StaticParams> = async (props: StaticPropsInput): Promise<StaticPropsOutput> => {
   const customerRef: string = process.env.CUSTOMER_REF;
+  const preview: boolean = props?.preview || false;
+  const previewData: PreviewData = props?.previewData || null;
   const hasLocaleFromUrl = !!props?.params?.locale;
   const locale: string = hasLocaleFromUrl ? props?.params?.locale : DEFAULT_LOCALE; // If the locale isn't found (e.g: 404 page)
   const lang: string = locale.split('-')?.[0];
@@ -89,6 +92,8 @@ export const getCommonStaticProps: GetStaticProps<SSGPageProps, StaticParams> =
       isStaticRendering: true,
       lang,
       locale,
+      preview,
+      previewData,
     },
     // unstable_revalidate: false,
   };

src/utils/nextjs/previewMode.ts

@@ -0,0 +1,7 @@
+import { isBrowser } from '@unly/utils';
+
+export const isPreviewModeEnabled = (): boolean => {
+  if (isBrowser()) {
+    return false;
+  }
+};