chore(digital-data): moved declaration to _document.js (#66)

IgnacioBecerra · web-flow · commit 59310f216b9f · 2021-09-09T01:48:25.000Z
### Related Ticket(s) #47 ### Description This PR moves the digitalData declaration from `_app.js` to `_document.js` ### Changelog **Changed** - moved `digitalData` declaration to `_document.js`
diff --git a/pages/_app.js b/pages/_app.js
@@ -2,7 +2,6 @@ import "../styles/global.scss";
 
 import altlangs from "./data/altlang.json";
 import App from "next/app";
-import DDO from "./data/DDO.json";
 import { DotcomShell } from "@carbon/ibmdotcom-react";
 import Head from "next/head";
 import packageJson from "../package.json";
@@ -31,7 +30,6 @@ export default class CarbonForIBMDotcom extends App {
     const { Component, pageProps } = this.props;
     const reactVersion = packageJson.dependencies["@carbon/ibmdotcom-react"];
     const stylesVersion = packageJson.dependencies["@carbon/ibmdotcom-styles"];
-    const digitalData = `digitalData=${JSON.stringify(DDO)};`;
 
     const items = altlangs.map((alt, i) => (
       <link
@@ -58,23 +56,6 @@ export default class CarbonForIBMDotcom extends App {
           <meta name="geo.country" content="US" />
           <meta name="robots" content="index,follow" />
 
-          <script dangerouslySetInnerHTML={{ __html: digitalData }} />
-
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
-            var params = new URLSearchParams(window.location.search);
-            
-            if(params.has('lc') && params.has('cc')) {
-              var lang = params.get('lc') + '-' + params.get('cc').toUpperCase();
-              document.getElementsByTagName("html")[0].setAttribute("lang", lang);
-              digitalData.page.pageInfo.language = lang;
-              digitalData.page.pageInfo.ibm.country = params.get('cc').toUpperCase();
-            }
-           `,
-            }}
-          />
-
           {items}
 
           {process.env.ENABLE_RTL === "true" && (
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,44 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+import DDO from "./data/DDO.json";
+
+/**
+ * Class CarbonForIBMDotcomDocument
+ */
+class CarbonForIBMDotcomDocument extends Document {
+  /**
+   * Declares the digitalData object
+   *
+   * @returns {*} Page wrapper JSX
+   */
+  render() {
+    const digitalData = `digitalData=${JSON.stringify(DDO)};`;
+    return (
+      <Html>
+        <Head>
+          <script dangerouslySetInnerHTML={{ __html: digitalData }} />
+
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              var params = new URLSearchParams(window.location.search);
+
+              if(params.has('lc') && params.has('cc')) {
+                var lang = params.get('lc') + '-' + params.get('cc').toUpperCase();
+                document.getElementsByTagName("html")[0].setAttribute("lang", lang);
+                digitalData.page.pageInfo.language = lang;
+                digitalData.page.pageInfo.ibm.country = params.get('cc').toUpperCase();
+              }
+							`,
+            }}
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default CarbonForIBMDotcomDocument;
