From 1bceb660afc635c73bbefd0c33a7b15302d3aca0 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jerelmiller@gmail.com>
Date: Tue, 7 Jul 2020 23:26:11 -0700
Subject: [PATCH] refactor: fully migrate to CodeBlock in ReferenceExample

---
 src/components/ReferenceExample.js | 83 +++++++-----------------------
 1 file changed, 19 insertions(+), 64 deletions(-)

diff --git a/src/components/ReferenceExample.js b/src/components/ReferenceExample.js
index ebb78955c..6858df4b9 100644
--- a/src/components/ReferenceExample.js
+++ b/src/components/ReferenceExample.js
@@ -1,12 +1,7 @@
-import React, { useMemo } from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
-import formatCode from '../utils/formatCode';
-import lightTheme from 'prism-react-renderer/themes/github';
-import darkTheme from 'prism-react-renderer/themes/nightOwl';
-import { LiveEditor, LiveError, LiveProvider } from 'react-live';
 import styles from './ReferenceExample.module.scss';
 import ReferencePreview from './ReferencePreview';
-import useDarkMode from 'use-dark-mode';
 import CodeBlock from './CodeBlock';
 
 const platformStateContextMock = {
@@ -21,9 +16,12 @@ const nerdletStateContextMock = {
   entityGuid: 'MTIzNDU2fEZPT3xCQVJ8OTg3NjU0MzIx',
 };
 
-const TRAILING_SEMI = /;\s*$/;
-
-const USE_CODE_BLOCK = true;
+const SCOPE = {
+  ...window.__NR1_SDK__.default,
+  navigation: {
+    getOpenLauncherLocation: () => {},
+  },
+};
 
 const ReferenceExample = ({
   className,
@@ -36,27 +34,9 @@ const ReferenceExample = ({
     NerdletStateContext,
   } = window.__NR1_SDK__.default;
   const { live } = example.options;
-  let formattedCode;
-  const darkMode = useDarkMode();
-  const scope = useMemo(
-    () => ({
-      ...window.__NR1_SDK__.default,
-      navigation: {
-        // eslint-disable-next-line no-empty-function
-        getOpenLauncherLocation() {},
-      },
-    }),
-    []
-  );
-
-  try {
-    formattedCode = formatCode(example.sourceCode).replace(TRAILING_SEMI, '');
-  } catch (e) {
-    formattedCode = example.sourceCode;
-  }
 
-  const Preview = useMemo(
-    () => ({ className }) => (
+  const Preview = useCallback(
+    ({ className }) => (
       <ReferencePreview
         className={className}
         style={previewStyle}
@@ -71,41 +51,16 @@ const ReferenceExample = ({
       <NerdletStateContext.Provider value={nerdletStateContextMock}>
         <div className={className}>
           <h3 className={styles.title}>{example.label}</h3>
-          {USE_CODE_BLOCK ? (
-            <CodeBlock
-              lineNumbers
-              language="jsx"
-              live={live}
-              preview={live}
-              scope={scope}
-              components={{ Preview }}
-            >
-              {example.sourceCode}
-            </CodeBlock>
-          ) : (
-            <LiveProvider
-              scope={scope}
-              code={formattedCode}
-              theme={darkMode.value ? darkTheme : lightTheme}
-              disabled={!live}
-            >
-              {live && (
-                <ReferencePreview
-                  className={styles.preview}
-                  style={previewStyle}
-                  useToastManager={useToastManager}
-                />
-              )}
-              <LiveEditor
-                style={{
-                  fontSize: '0.75rem',
-                  maxHeight: '30rem',
-                  overflow: 'auto',
-                }}
-              />
-              {live && <LiveError className={styles.error} />}
-            </LiveProvider>
-          )}
+          <CodeBlock
+            lineNumbers
+            language="jsx"
+            live={live}
+            preview={live}
+            scope={SCOPE}
+            components={{ Preview }}
+          >
+            {example.sourceCode}
+          </CodeBlock>
         </div>
       </NerdletStateContext.Provider>
     </PlatformStateContext.Provider>