Material UI - CodeViewer

src/components/CodeViewer.js

@@ -1,5 +1,11 @@
 import React, { Component } from 'react';
-import { Button, Modal } from 'semantic-ui-react';
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  Link,
+} from '@material-ui/core';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
@@ -12,6 +18,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 +36,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"
+            />
+            {' '}
+            <Link href="https://en.wikipedia.org/wiki/JavaScript">
+              JavaScript
+            </Link>
+            :
+          </DialogTitle>
+          <DialogContent dividers>
+            <AceEditor
+              mode="javascript"
+              theme="github"
+              readOnly
+              fontSize={14}
+              width="750px"
+              value={this.stripCode()}
+              editorProps={{ $blockScrolling: true }}
+            />
+          </DialogContent>
+        </Dialog>
+      </>
     );
   }
 }

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);
   });
 });