From c7ab58b44fae5e83fa937a396f28a7187b833b94 Mon Sep 17 00:00:00 2001
From: Dhenain Ambroise <ambroise.dhenain@gmail.com>
Date: Fri, 28 May 2021 11:10:11 +0200
Subject: [PATCH] Improve public layout by using a properly mocked Customer
 entity shared between SSG/SSR pages + improve doc

---
 src/layouts/public/mockedStaticDataset.ts | 25 +++++++++++++++++++++++
 src/layouts/public/publicLayoutSSG.ts     |  9 ++------
 src/layouts/public/publicLayoutSSR.ts     |  9 ++------
 src/pages/[locale]/public/index.tsx       | 17 +++++++--------
 4 files changed, 36 insertions(+), 24 deletions(-)
 create mode 100644 src/layouts/public/mockedStaticDataset.ts

diff --git a/src/layouts/public/mockedStaticDataset.ts b/src/layouts/public/mockedStaticDataset.ts
new file mode 100644
index 00000000..2ff77add
--- /dev/null
+++ b/src/layouts/public/mockedStaticDataset.ts
@@ -0,0 +1,25 @@
+import { Customer } from '@/modules/core/data/types/Customer';
+import { GraphCMSDataset } from '@/modules/core/data/types/GraphCMSDataset';
+
+const customerRef: string = process.env.NEXT_PUBLIC_CUSTOMER_REF;
+
+/**
+ * This mocked static dataset is used by the "public" layout to start the app with the minimalist amount of data.
+ *
+ * XXX The "Customer" entity represents a "Tenant" in a multi-tenancy system. It's basically the owner of a site.
+ *  Each Customer has its own website, with its own data.
+ *
+ * Fields required by NRN to function properly by default (they can be hardcoded if you only have one Customer, or fetched from a DB if you have many)
+ * - 'ref': Identifier of the customer. Use by analytics, monitoring, etc.
+ * - 'availableLanguages': List of languages the website is available in, static pages will be generated for all listed languages.
+ * - '__typename': Must be "Customer". You can rename it if you wish to, but you'll need to adapt the code in various places.
+ *
+ * @see https://unlyed.github.io/next-right-now/concepts/tenancy.html#tenancy-st-mt-ht-and-mst
+ */
+export const mockedStaticDataset: GraphCMSDataset = {
+  customer: {
+    ref: customerRef,
+    availableLanguages: ['en'], // Necessary to generate the static pages and serve SSR pages, for those languages
+    __typename: 'Customer', // Necessary to find the customer object within the mocked dataset
+  } as Customer, // TS casting is necessary because we don't provide all properties
+};
diff --git a/src/layouts/public/publicLayoutSSG.ts b/src/layouts/public/publicLayoutSSG.ts
index 5d787be2..426a39ba 100644
--- a/src/layouts/public/publicLayoutSSG.ts
+++ b/src/layouts/public/publicLayoutSSG.ts
@@ -3,6 +3,7 @@ import { StaticPath } from '@/app/types/StaticPath';
 import { StaticPathsOutput } from '@/app/types/StaticPathsOutput';
 import { StaticPropsInput } from '@/app/types/StaticPropsInput';
 import { SSGPageProps } from '@/layouts/core/types/SSGPageProps';
+import { mockedStaticDataset } from '@/layouts/public/mockedStaticDataset';
 import { APOLLO_STATE_PROP_NAME } from '@/modules/core/apollo/apolloClient';
 import { Customer } from '@/modules/core/data/types/Customer';
 import { getLocizeTranslations } from '@/modules/core/i18n/getLocizeTranslations';
@@ -75,13 +76,7 @@ export const getPublicLayoutStaticProps: GetStaticProps<SSGPageProps, CommonServ
   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];
   const i18nTranslations: I18nextResources = await getLocizeTranslations(lang);
-  const customer: Customer = {
-    ref: customerRef,
-    label: `${customerRef} (mocked)`,
-    serviceLabel: 'Those mocked data are defined in the publicLayoutSSG. The page is from "pages/public". This layout is meant for all "public" pages, you probably want to start there!',
-    availableLanguages: ['en'],
-    __typename: 'Customer', // Necessary to find the customer object within the mocked dataset
-  } as unknown as Customer;
+  const customer: Customer = mockedStaticDataset?.customer;
 
   return {
     // Props returned here will be available as page properties (pageProps)
diff --git a/src/layouts/public/publicLayoutSSR.ts b/src/layouts/public/publicLayoutSSR.ts
index 26b4eb39..a766ec14 100644
--- a/src/layouts/public/publicLayoutSSR.ts
+++ b/src/layouts/public/publicLayoutSSR.ts
@@ -1,6 +1,7 @@
 import { CommonServerSideParams } from '@/app/types/CommonServerSideParams';
 import { PublicHeaders } from '@/layouts/core/types/PublicHeaders';
 import { SSRPageProps } from '@/layouts/core/types/SSRPageProps';
+import { mockedStaticDataset } from '@/layouts/public/mockedStaticDataset';
 import { APOLLO_STATE_PROP_NAME } from '@/modules/core/apollo/apolloClient';
 import { Cookies } from '@/modules/core/cookiesManager/types/Cookies';
 import UniversalCookiesManager from '@/modules/core/cookiesManager/UniversalCookiesManager';
@@ -99,13 +100,7 @@ export const getPublicLayoutServerSideProps: GetServerSideProps<GetPublicLayoutS
   const lang: string = locale.split('-')?.[0];
   const bestCountryCodes: string[] = [lang, resolveFallbackLanguage(lang)];
   const gcmsLocales: string = prepareGraphCMSLocaleHeader(bestCountryCodes);
-  const customer: Customer = {
-    ref: customerRef,
-    label: `${customerRef} (mocked)`,
-    serviceLabel: 'Those mocked data are defined in the publicLayoutSSG. The page is from "pages/public". This layout is meant for all "public" pages, you probably want to start there!',
-    availableLanguages: ['en'],
-    __typename: 'Customer', // Necessary to find the customer object within the mocked dataset
-  } as unknown as Customer;
+  const customer: Customer = mockedStaticDataset?.customer;
   const i18nTranslations: I18nextResources = await getLocizeTranslations(lang);
 
   // Do not serve pages using locales the customer doesn't have enabled
diff --git a/src/pages/[locale]/public/index.tsx b/src/pages/[locale]/public/index.tsx
index 81f03fdc..6cb1922d 100644
--- a/src/pages/[locale]/public/index.tsx
+++ b/src/pages/[locale]/public/index.tsx
@@ -1,5 +1,4 @@
 import { CommonServerSideParams } from '@/app/types/CommonServerSideParams';
-import Code from '@/components/dataDisplay/Code';
 import { OnlyBrowserPageProps } from '@/layouts/core/types/OnlyBrowserPageProps';
 import { SSGPageProps } from '@/layouts/core/types/SSGPageProps';
 import PublicLayout from '@/layouts/public/components/PublicLayout';
@@ -62,23 +61,21 @@ const ExamplePublicPage: NextPage<Props> = (props): JSX.Element => {
       pageName={AMPLITUDE_PAGES.TEMPLATE_SSG_PAGE}
     >
       <p>
-        This page was created using from "/layouts/public/pagePublicTemplateSSG.tsx".<br />
-        it is located at "/pages/[locale]/public/index.tsx", but you most likely want to move it to "/pages/[locale]/index.tsx".<br />
+        This page was created using from <code>"/layouts/public/pagePublicTemplateSSG.tsx"</code>, which uses a completely different <b><code>layout</code></b>.<br />
         <br />
-        This page uses the "public" layout, which comes "naked" (no nav/footer) and doesn't fetch any data. (data are mocked, and minimalist)
+        This page uses the <code>"public"</code>
+        <b>layout</b>, which comes "naked" (no nav/footer) and doesn't fetch any data. (data are mocked, and minimalist)
         <br />
-        You can start customizing NRN here. Other pages use the "demo" layout, which comes with its own data fetching, components, and inherent complexity.<br />
+        Other pages use the <code>"demo"</code> layout, which comes with its own data fetching, components, and inherent complexity.<br />
         <br />
         <br />
-        Usually, when I create a new project from NRN, I wipe the whole "/layouts/demo" folder, unless I want to keep it around for its documentation/examples.
+        If you want to use NRN as a <b>boilerplate</b> for your own project, <b>we recommend using the <code>public</code> layout</b>, because it's much simpler and doesn't rely on any particular data.<br />
+        Usually, when I create a new project from NRN, I wipe the whole <code>"/layouts/demo"</code> folder, unless I want to keep it around for its documentation/examples.
         <br />
         <br />
       </p>
       <p>
-        <b>Customer data</b>:<br />
-        <Code
-          text={`See browser console logs "customer" (can't print in case there were circular references).`}
-        />
+        <span style={{ fontSize: 22 }}>The <code>customer</code> data are visible in the <b>browser logs</b>.</span>
       </p>
     </PublicLayout>
   );