Code display component

package.json

@@ -67,11 +67,13 @@
   },
   "dependencies": {
     "axios": "0.18.0",
+    "brace": "0.11.1",
     "js-interpreter": "1.4.6",
     "node-blockly": "git+https://github.com/rovercode/node-blockly.git#custom-blockly",
     "prop-types": "15.6.2",
     "query-string": "6.1.0",
     "react": "16.4.1",
+    "react-ace": "6.2.0",
     "react-cookie": "2.2.0",
     "react-dom": "16.4.2",
     "react-hot-loader": "4.3.4",

src/components/CodeViewer.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import { Button, Modal } from 'semantic-ui-react';
+import { connect } from 'react-redux';
+import { hot } from 'react-hot-loader';
+import PropTypes from 'prop-types';
+
+import AceEditor from 'react-ace';
+import 'brace/mode/javascript';
+import 'brace/theme/monokai';
+
+const mapStateToProps = ({ code }) => ({ code });
+
+class CodeViewer extends Component {
+  stripCode = () => {
+    const { code } = this.props;
+
+    if (code.jsCode) {
+      return code.jsCode.replace(/highlightBlock\(.*\);/g, '');
+    }
+
+    return '';
+  }
+
+  render() {
+    return (
+      <Modal
+        basic
+        dimmer="blurring"
+        trigger={(
+          <Button>
+            Show Me The Code!
+          </Button>
+        )}
+      >
+        <Modal.Header>
+          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>
+    );
+  }
+}
+
+CodeViewer.propTypes = {
+  code: PropTypes.shape({
+    jsCode: PropTypes.string,
+  }).isRequired,
+};
+
+export default hot(module)(connect(mapStateToProps)(CodeViewer));

src/components/__tests__/CodeViewer.test.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import configureStore from 'redux-mock-store';
+
+import CodeViewer from '../CodeViewer';
+
+describe('The CodeViewer component', () => {
+  const mockStore = configureStore();
+
+  test('renders on the page with no errors', () => {
+    const store = mockStore({
+      code: {
+        jsCode: 'test code',
+      },
+    });
+    const wrapper = mount(<CodeViewer store={store} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+
+  test('handles blank code with no errors', () => {
+    const store = mockStore({
+      code: {
+        jsCode: null,
+      },
+    });
+    const wrapper = mount(<CodeViewer store={store} />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+  });
+});

src/components/__tests__/__snapshots__/CodeViewer.test.js.snap

@@ -0,0 +1,241 @@
+// 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],
+      }
+    }
+    storeSubscription={
+      Subscription {
+        "listeners": Object {
+          "clear": [Function],
+          "get": [Function],
+          "notify": [Function],
+          "subscribe": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": [Function],
+      }
+    }
+  >
+    <Modal
+      basic={true}
+      centered={true}
+      closeOnDimmerClick={true}
+      closeOnDocumentClick={false}
+      dimmer="blurring"
+      eventPool="Modal"
+      trigger={
+        <Button
+          as="button"
+          role="button"
+        >
+          Show Me The Code!
+        </Button>
+      }
+    >
+      <Portal
+        className="ui page modals dimmer transition visible active"
+        closeOnDocumentClick={false}
+        closeOnEscape={true}
+        closeOnRootNodeClick={true}
+        eventPool="Modal"
+        mountNode={<body />}
+        onClose={[Function]}
+        onMount={[Function]}
+        onOpen={[Function]}
+        onUnmount={[Function]}
+        openOnTriggerClick={true}
+        trigger={
+          <Button
+            as="button"
+            role="button"
+          >
+            Show Me The Code!
+          </Button>
+        }
+      >
+        <Ref
+          innerRef={[Function]}
+        >
+          <Button
+            as="button"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="button"
+          >
+            <button
+              className="ui button"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              role="button"
+            >
+              Show Me The Code!
+            </button>
+          </Button>
+        </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],
+      }
+    }
+    storeSubscription={
+      Subscription {
+        "listeners": Object {
+          "clear": [Function],
+          "get": [Function],
+          "notify": [Function],
+          "subscribe": [Function],
+        },
+        "onStateChange": [Function],
+        "parentSub": undefined,
+        "store": Object {
+          "clearActions": [Function],
+          "dispatch": [Function],
+          "getActions": [Function],
+          "getState": [Function],
+          "replaceReducer": [Function],
+          "subscribe": [Function],
+        },
+        "unsubscribe": [Function],
+      }
+    }
+  >
+    <Modal
+      basic={true}
+      centered={true}
+      closeOnDimmerClick={true}
+      closeOnDocumentClick={false}
+      dimmer="blurring"
+      eventPool="Modal"
+      trigger={
+        <Button
+          as="button"
+          role="button"
+        >
+          Show Me The Code!
+        </Button>
+      }
+    >
+      <Portal
+        className="ui page modals dimmer transition visible active"
+        closeOnDocumentClick={false}
+        closeOnEscape={true}
+        closeOnRootNodeClick={true}
+        eventPool="Modal"
+        mountNode={<body />}
+        onClose={[Function]}
+        onMount={[Function]}
+        onOpen={[Function]}
+        onUnmount={[Function]}
+        openOnTriggerClick={true}
+        trigger={
+          <Button
+            as="button"
+            role="button"
+          >
+            Show Me The Code!
+          </Button>
+        }
+      >
+        <Ref
+          innerRef={[Function]}
+        >
+          <Button
+            as="button"
+            onBlur={[Function]}
+            onClick={[Function]}
+            onFocus={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            role="button"
+          >
+            <button
+              className="ui button"
+              onBlur={[Function]}
+              onClick={[Function]}
+              onFocus={[Function]}
+              onMouseEnter={[Function]}
+              onMouseLeave={[Function]}
+              role="button"
+            >
+              Show Me The Code!
+            </button>
+          </Button>
+        </Ref>
+      </Portal>
+    </Modal>
+  </CodeViewer>
+</Connect(CodeViewer)>
+`;