From 3339d27ee78f2cdda48a4eb4c75b989840dd6e7b Mon Sep 17 00:00:00 2001
From: Andre Medeiros <me@andremedeiros.info>
Date: Wed, 3 Oct 2018 14:18:43 -0400
Subject: [PATCH] Add code reload component

---
 embark-ui/src/components/FiddleLayout.js      | 22 +++++----
 .../containers/ApplicationPreviewContainer.js | 45 +++++++++++++++++++
 2 files changed, 58 insertions(+), 9 deletions(-)
 create mode 100644 embark-ui/src/containers/ApplicationPreviewContainer.js

diff --git a/embark-ui/src/components/FiddleLayout.js b/embark-ui/src/components/FiddleLayout.js
index aeb0d4b6..fc95306b 100644
--- a/embark-ui/src/components/FiddleLayout.js
+++ b/embark-ui/src/components/FiddleLayout.js
@@ -4,21 +4,25 @@ import {
   Grid
 } from "tabler-react";
 
+import ApplicationPreviewContainer from '../containers/ApplicationPreviewContainer';
 import TextEditorContainer from '../containers/TextEditorContainer';
 import FileExplorerContainer from '../containers/FileExplorerContainer';
 
 class FiddleLayout extends React.Component {
   render() {
     return (
-      <Grid.Row className="my-5">
-        <Grid.Col md={3}>
-          <Page.Title>Fiddle</Page.Title>
-          <FileExplorerContainer />
-        </Grid.Col>
-        <Grid.Col md={9}>
-          <TextEditorContainer />
-        </Grid.Col>
-      </Grid.Row>
+      <Page.Content title="Fiddle">
+        <Grid.Row className="my-5">
+          <Grid.Col md={3}>
+            <Page.Title>Fiddle</Page.Title>
+            <FileExplorerContainer />
+          </Grid.Col>
+          <Grid.Col md={9}>
+            <TextEditorContainer />
+          </Grid.Col>
+        </Grid.Row>
+        <ApplicationPreviewContainer />
+      </Page.Content>
     );
   }
 }
diff --git a/embark-ui/src/containers/ApplicationPreviewContainer.js b/embark-ui/src/containers/ApplicationPreviewContainer.js
new file mode 100644
index 00000000..443e4181
--- /dev/null
+++ b/embark-ui/src/containers/ApplicationPreviewContainer.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+class ApplicationPreviewContainer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      previewUrl: props.previewUrl || 'http://localhost:8000'
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <div className="input-group mb-3">
+          <input type="text" className="form-control" placeholder="URL" ref={(input) => this.locationInput = input} value={this.props.previewUrl} />
+          <div className="input-group-append">
+            <button className="btn btn-outline-secondary" type="button" onClick={(e) => this.handlePreviewGo(e)}>Go</button>
+          </div>
+        </div>
+        <iframe width="100%" height="500" title="Preview" ref={(iframe) => this.previewIframe = iframe} onLoad={(e) => this.handlePreviewChange(e)} src="http://localhost:8000"></iframe>
+      </div>
+    );
+  }
+
+  handlePreviewChange(ev) {
+    try {
+      let url = ev.target.contentWindow.location.toString();
+      this.setState({previewUrl: url});
+    } catch(e) {
+      // Nothing here.
+    }
+  }
+
+  handlePreviewGo() {
+    this.previewIframe.src = this.locationInput.value;
+  }
+}
+
+ApplicationPreviewContainer.propTypes = {
+  previewUrl: PropTypes.string
+};
+
+export default ApplicationPreviewContainer;
+