From 23d2f2a08b553888068e50b65b0e31d88cf146f7 Mon Sep 17 00:00:00 2001
From: Joshua Swift <joshuaswift@joshuas-air.home>
Date: Fri, 29 Dec 2017 20:26:38 +0000
Subject: [PATCH] JS is disabled alert

---
 common/app/routes/Challenges/Preview.jsx | 50 ++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 common/app/routes/Challenges/Preview.jsx

diff --git a/common/app/routes/Challenges/Preview.jsx b/common/app/routes/Challenges/Preview.jsx
new file mode 100644
index 0000000000..e25ff1ebd5
--- /dev/null
+++ b/common/app/routes/Challenges/Preview.jsx
@@ -0,0 +1,50 @@
+import React, { PropTypes, PureComponent } from 'react';
+import { connect } from 'react-redux';
+
+import ns from './ns.json';
+import { isJSEnabledSelector } from './redux';
+import {Alert} from 'react-bootstrap';
+
+const mainId = 'fcc-main-frame';
+
+const mapStateToProps = state => ({
+  isJSEnabled: isJSEnabledSelector(state)
+});
+const mapDispatchToProps = null;
+const propTypes = {
+  isJSEnabled: PropTypes.bool
+};
+
+export class Preview extends PureComponent {
+  render() {
+    const {
+      isJSEnabled
+    } = this.props;
+    return (
+      <div className={ `${ns}-preview` }>
+        {
+          !isJSEnabled && (
+            <Alert
+            bsStyle='info'
+            className={ `${ns}-preview-js-warning`}
+            >
+              JavaScript is disabled. Execute code to enable
+            </Alert>
+          )
+        }
+        <iframe
+          className={ `${ns}-preview-frame` }
+          id={ mainId }
+        />
+      </div>
+    );
+  }
+}
+
+Preview.propTypes = propTypes;
+Preview.displayName = 'Preview';
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Preview);