From 077d184b8a4fd3181a93e50401a4620f11c3d66d Mon Sep 17 00:00:00 2001
From: Clifton Barnes <clifton.barnes@rovercode.com>
Date: Tue, 5 May 2020 17:20:25 -0400
Subject: [PATCH 1/2] Convert code viewer to Material UI

---
 src/components/CodeViewer.js                  |  92 +++--
 src/components/__tests__/CodeViewer.test.js   |  22 +-
 .../__snapshots__/CodeViewer.test.js.snap     | 317 ++++--------------
 3 files changed, 146 insertions(+), 285 deletions(-)

diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index 3cae8d87..170f11cd 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -1,5 +1,10 @@
 import React, { Component } from 'react';
-import { Button, Modal } from 'semantic-ui-react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
@@ -12,6 +17,14 @@ import 'brace/theme/monokai';
 const mapStateToProps = ({ code }) => ({ code });
 
 class CodeViewer extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      open: false,
+    };
+  }
+
   stripCode = () => {
     const { code } = this.props;
 
@@ -22,44 +35,53 @@ class CodeViewer extends Component {
     return '';
   }
 
+  handleOpen = () => {
+    this.setState({
+      open: true,
+    });
+  }
+
+  handleClose = () => {
+    this.setState({
+      open: false,
+    });
+  }
+
   render() {
     const { children } = this.props;
+    const { open } = this.state;
 
     return (
-      <Modal
-        basic
-        closeIcon
-        dimmer="blurring"
-        trigger={(
-          <Button primary>
-            { children }
-          </Button>
-        )}
-      >
-        <Modal.Header>
-          <FormattedMessage
-            id="app.code_viewer.description"
-            description="Describes the programming language in the code viewer"
-            defaultMessage="Here is the code in"
-          />
-          {' '}
-          <a href="https://en.wikipedia.org/wiki/JavaScript">
-            JavaScript
-          </a>
-          :
-        </Modal.Header>
-        <Modal.Content>
-          <AceEditor
-            mode="javascript"
-            theme="monokai"
-            readOnly
-            fontSize={14}
-            width="100%"
-            value={this.stripCode()}
-            editorProps={{ $blockScrolling: true }}
-          />
-        </Modal.Content>
-      </Modal>
+      <>
+        <Button variant="contained" color="primary" onClick={this.handleOpen}>
+          { children }
+        </Button>
+        <Dialog maxWidth="md" open={open} onClose={this.handleClose}>
+          <DialogTitle>
+            <FormattedMessage
+              id="app.code_viewer.description"
+              description="Describes the programming language in the code viewer"
+              defaultMessage="Here is the code in"
+            />
+            {' '}
+            <a href="https://en.wikipedia.org/wiki/JavaScript">
+              JavaScript
+            </a>
+            :
+          </DialogTitle>
+          <DialogContent dividers>
+            <AceEditor
+              mode="javascript"
+              theme="github"
+              readOnly
+              fontSize={14}
+              width="750px"
+              value={this.stripCode()}
+              editorProps={{ $blockScrolling: true }}
+            />
+          </DialogContent>
+        </Dialog>
+      </>
     );
   }
 }
diff --git a/src/components/__tests__/CodeViewer.test.js b/src/components/__tests__/CodeViewer.test.js
index 9e5c560b..ece00f1b 100644
--- a/src/components/__tests__/CodeViewer.test.js
+++ b/src/components/__tests__/CodeViewer.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import configureStore from 'redux-mock-store';
+import { Button, Dialog } from '@material-ui/core';
 
 import CodeViewer from '../CodeViewer';
 
@@ -13,11 +14,11 @@ describe('The CodeViewer component', () => {
         jsCode: 'test code',
       },
     });
-    const wrapper = mount(
+    const wrapper = shallow(
       <CodeViewer store={store}>
         Show Me The Code!
       </CodeViewer>,
-    );
+    ).dive().dive();
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -27,11 +28,20 @@ describe('The CodeViewer component', () => {
         jsCode: null,
       },
     });
-    const wrapper = mount(
+    const wrapper = shallow(
       <CodeViewer store={store}>
         Show Me The Code!
       </CodeViewer>,
-    );
-    expect(wrapper).toMatchSnapshot();
+    ).dive().dive();
+
+    expect(wrapper.state('open')).toBe(false);
+
+    wrapper.find(Button).simulate('click');
+
+    expect(wrapper.state('open')).toBe(true);
+
+    wrapper.find(Dialog).simulate('close');
+
+    expect(wrapper.state('open')).toBe(false);
   });
 });
diff --git a/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap b/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap
index 1eac38ab..6a1acdce 100644
--- a/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap
+++ b/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap
@@ -1,251 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`The CodeViewer component handles blank code with no errors 1`] = `
-<Connect(CodeViewer)
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <CodeViewer
-    code={
-      Object {
-        "jsCode": null,
-      }
-    }
-    dispatch={[Function]}
-    store={
-      Object {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
-  >
-    <Modal
-      basic={true}
-      centered={true}
-      closeIcon={true}
-      closeOnDimmerClick={true}
-      closeOnDocumentClick={false}
-      dimmer="blurring"
-      eventPool="Modal"
-      trigger={
-        <Button
-          as="button"
-          primary={true}
-        >
-          Show Me The Code!
-        </Button>
-      }
-    >
-      <Portal
-        closeOnDocumentClick={false}
-        closeOnEscape={true}
-        eventPool="Modal"
-        mountNode={<body />}
-        onClose={[Function]}
-        onMount={[Function]}
-        onOpen={[Function]}
-        onUnmount={[Function]}
-        openOnTriggerClick={true}
-        trigger={
-          <Button
-            as="button"
-            primary={true}
-          >
-            Show Me The Code!
-          </Button>
-        }
-      >
-        <Ref
-          innerRef={[Function]}
-        >
-          <RefFindNode
-            innerRef={[Function]}
-          >
-            <Button
-              as="button"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              primary={true}
-            >
-              <Ref
-                innerRef={
-                  Object {
-                    "current": <button
-                      class="ui primary button"
-                    >
-                      Show Me The Code!
-                    </button>,
-                  }
-                }
-              >
-                <RefFindNode
-                  innerRef={
-                    Object {
-                      "current": <button
-                        class="ui primary button"
-                      >
-                        Show Me The Code!
-                      </button>,
-                    }
-                  }
-                >
-                  <button
-                    className="ui primary button"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  >
-                    Show Me The Code!
-                  </button>
-                </RefFindNode>
-              </Ref>
-            </Button>
-          </RefFindNode>
-        </Ref>
-      </Portal>
-    </Modal>
-  </CodeViewer>
-</Connect(CodeViewer)>
-`;
-
 exports[`The CodeViewer component renders on the page with no errors 1`] = `
-<Connect(CodeViewer)
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <CodeViewer
-    code={
-      Object {
-        "jsCode": "test code",
-      }
-    }
-    dispatch={[Function]}
-    store={
-      Object {
-        "clearActions": [Function],
-        "dispatch": [Function],
-        "getActions": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-      }
-    }
+<Fragment>
+  <WithStyles(ForwardRef(Button))
+    color="primary"
+    onClick={[Function]}
+    variant="contained"
+  >
+    Show Me The Code!
+  </WithStyles(ForwardRef(Button))>
+  <WithStyles(ForwardRef(Dialog))
+    maxWidth="md"
+    onClose={[Function]}
+    open={false}
   >
-    <Modal
-      basic={true}
-      centered={true}
-      closeIcon={true}
-      closeOnDimmerClick={true}
-      closeOnDocumentClick={false}
-      dimmer="blurring"
-      eventPool="Modal"
-      trigger={
-        <Button
-          as="button"
-          primary={true}
-        >
-          Show Me The Code!
-        </Button>
-      }
+    <WithStyles(ForwardRef(DialogTitle))>
+      <FormattedMessage
+        defaultMessage="Here is the code in"
+        id="app.code_viewer.description"
+        values={Object {}}
+      />
+       
+      <a
+        href="https://en.wikipedia.org/wiki/JavaScript"
+      >
+        JavaScript
+      </a>
+      :
+    </WithStyles(ForwardRef(DialogTitle))>
+    <WithStyles(ForwardRef(DialogContent))
+      dividers={true}
     >
-      <Portal
-        closeOnDocumentClick={false}
-        closeOnEscape={true}
-        eventPool="Modal"
-        mountNode={<body />}
-        onClose={[Function]}
-        onMount={[Function]}
-        onOpen={[Function]}
-        onUnmount={[Function]}
-        openOnTriggerClick={true}
-        trigger={
-          <Button
-            as="button"
-            primary={true}
-          >
-            Show Me The Code!
-          </Button>
+      <ReactAce
+        cursorStart={1}
+        editorProps={
+          Object {
+            "$blockScrolling": true,
+          }
         }
-      >
-        <Ref
-          innerRef={[Function]}
-        >
-          <RefFindNode
-            innerRef={[Function]}
-          >
-            <Button
-              as="button"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-              primary={true}
-            >
-              <Ref
-                innerRef={
-                  Object {
-                    "current": <button
-                      class="ui primary button"
-                    >
-                      Show Me The Code!
-                    </button>,
-                  }
-                }
-              >
-                <RefFindNode
-                  innerRef={
-                    Object {
-                      "current": <button
-                        class="ui primary button"
-                      >
-                        Show Me The Code!
-                      </button>,
-                    }
-                  }
-                >
-                  <button
-                    className="ui primary button"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                  >
-                    Show Me The Code!
-                  </button>
-                </RefFindNode>
-              </Ref>
-            </Button>
-          </RefFindNode>
-        </Ref>
-      </Portal>
-    </Modal>
-  </CodeViewer>
-</Connect(CodeViewer)>
+        enableBasicAutocompletion={false}
+        enableLiveAutocompletion={false}
+        enableSnippets={false}
+        focus={false}
+        fontSize={14}
+        height="500px"
+        highlightActiveLine={true}
+        maxLines={null}
+        minLines={null}
+        mode="javascript"
+        name="ace-editor"
+        navigateToFileEnd={true}
+        onChange={null}
+        onLoad={null}
+        onPaste={null}
+        onScroll={null}
+        placeholder={null}
+        readOnly={true}
+        scrollMargin={
+          Array [
+            0,
+            0,
+            0,
+            0,
+          ]
+        }
+        setOptions={Object {}}
+        showGutter={true}
+        showPrintMargin={true}
+        style={Object {}}
+        tabSize={4}
+        theme="github"
+        value="test code"
+        width="750px"
+        wrapEnabled={false}
+      />
+    </WithStyles(ForwardRef(DialogContent))>
+  </WithStyles(ForwardRef(Dialog))>
+</Fragment>
 `;

From ea72badbdae77640c26d2b221d0283922f96682d Mon Sep 17 00:00:00 2001
From: Clifton Barnes <clifton.barnes@rovercode.com>
Date: Tue, 5 May 2020 19:33:50 -0400
Subject: [PATCH 2/2] Change 'a' to 'Link'

---
 src/components/CodeViewer.js                                 | 5 +++--
 .../__tests__/__snapshots__/CodeViewer.test.js.snap          | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/CodeViewer.js b/src/components/CodeViewer.js
index 170f11cd..ee47e819 100644
--- a/src/components/CodeViewer.js
+++ b/src/components/CodeViewer.js
@@ -4,6 +4,7 @@ import {
   Dialog,
   DialogContent,
   DialogTitle,
+  Link,
 } from '@material-ui/core';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
@@ -64,9 +65,9 @@ class CodeViewer extends Component {
               defaultMessage="Here is the code in"
             />
             {' '}
-            <a href="https://en.wikipedia.org/wiki/JavaScript">
+            <Link href="https://en.wikipedia.org/wiki/JavaScript">
               JavaScript
-            </a>
+            </Link>
             :
           </DialogTitle>
           <DialogContent dividers>
diff --git a/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap b/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap
index 6a1acdce..da1fa147 100644
--- a/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap
+++ b/src/components/__tests__/__snapshots__/CodeViewer.test.js.snap
@@ -21,11 +21,11 @@ exports[`The CodeViewer component renders on the page with no errors 1`] = `
         values={Object {}}
       />
        
-      <a
+      <WithStyles(ForwardRef(Link))
         href="https://en.wikipedia.org/wiki/JavaScript"
       >
         JavaScript
-      </a>
+      </WithStyles(ForwardRef(Link))>
       :
     </WithStyles(ForwardRef(DialogTitle))>
     <WithStyles(ForwardRef(DialogContent))