From 058e0b7f8f2637a3284b78b59d2806b33f79e381 Mon Sep 17 00:00:00 2001
From: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Date: Fri, 18 Oct 2019 17:45:34 +0200
Subject: [PATCH] feat: SSR MathJax and Stripe on routes using them (#37388)

* feat: SSR MathJax and Stripe on routes using them

* refactor: clean up scripts
---
 client/gatsby-ssr.js       | 81 +++++++++++++++++++++++++++++---------
 client/src/head/index.js   |  4 +-
 client/src/head/mathjax.js |  9 -----
 client/src/head/scripts.js |  3 --
 4 files changed, 64 insertions(+), 33 deletions(-)
 delete mode 100644 client/src/head/mathjax.js
 delete mode 100644 client/src/head/scripts.js

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 9306aa55aa..9e468bc0f8 100644
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@@ -17,28 +17,73 @@ wrapRootElement.propTypes = {
   element: PropTypes.any
 };
 
+// TODO: put these in a common utils file.
+const mathJaxCdn = {
+  address:
+    'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
+    '2.7.4/MathJax.js?config=TeX-AMS_HTML',
+  key: 'mathjax',
+  type: 'text/javascript'
+};
+
+const stripeScript = {
+  address: 'https://js.stripe.com/v3/',
+  id: 'stripe-js',
+  key: 'stripe-js',
+  type: 'text/javascript'
+};
+
+const challengeRE = new RegExp('/learn/[^/]+/[^/]+/[^/]+/?$');
+const donateRE = new RegExp('/donate/?$');
+
 export const wrapPageElement = layoutSelector;
 
-export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
+export const onRenderBody = ({
+  pathname,
+  setHeadComponents,
+  setPostBodyComponents
+}) => {
   setHeadComponents([...headComponents]);
-  setPostBodyComponents(
-    [
+  const scripts = [
+    <script
+      async={true}
+      key='gtag-script'
+      src='https://www.googletagmanager.com/gtag/js?id=AW-795617839'
+    />,
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'AW-795617839');
+      `
+      }}
+      key='gtag-dataLayer'
+    />
+  ];
+
+  if (pathname.includes('/learn/coding-interview-prep/rosetta-code/')) {
+    scripts.push(
       <script
         async={true}
-        key='gtag-script'
-        src='https://www.googletagmanager.com/gtag/js?id=AW-795617839'
-      />,
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', 'AW-795617839');
-        `
-        }}
-        key='gtag-dataLayer'
+        key={mathJaxCdn.key}
+        src={mathJaxCdn.address}
+        type={mathJaxCdn.type}
       />
-    ].filter(Boolean)
-  );
+    );
+  }
+
+  if (challengeRE.test(pathname) || donateRE.test(pathname)) {
+    scripts.push(
+      <script
+        async={true}
+        id={stripeScript.id}
+        key={stripeScript.key}
+        src={stripeScript.address}
+      />
+    );
+  }
+
+  setPostBodyComponents(scripts.filter(Boolean));
 };
diff --git a/client/src/head/index.js b/client/src/head/index.js
index b8e97e5638..70d90294bc 100644
--- a/client/src/head/index.js
+++ b/client/src/head/index.js
@@ -1,8 +1,6 @@
 import meta from './meta';
-import mathjax from './mathjax';
-import scripts from './scripts';
 
-const metaAndStyleSheets = meta.concat(mathjax, scripts).map((element, i) => ({
+const metaAndStyleSheets = meta.map((element, i) => ({
   ...element,
   key: `meta-stylesheet-${i}`,
   props: { ...element.props, key: `meta-stylesheet-${i}` }
diff --git a/client/src/head/mathjax.js b/client/src/head/mathjax.js
deleted file mode 100644
index f65d15ad24..0000000000
--- a/client/src/head/mathjax.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const cdnAddr =
-  'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
-  '2.7.4/MathJax.js?config=TeX-AMS_HTML';
-
-const mathjax = [<script key='mathjax' src={cdnAddr} type='text/javascript' />];
-
-export default mathjax;
diff --git a/client/src/head/scripts.js b/client/src/head/scripts.js
deleted file mode 100644
index e8be1e47d9..0000000000
--- a/client/src/head/scripts.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const scripts = [];
-
-export default scripts;