From e8fa62aa3d5700596b1b54a9cc6be9a4ea664428 Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Mon, 9 May 2016 16:13:37 -0400
Subject: [PATCH] add test preview component, vulnerable to xss

---
 README.md                             |  2 ++
 shared/components/Preview/Preview.jsx | 25 +++++++++++++++++++++++--
 shared/containers/App/App.jsx         | 12 +++++++++---
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index a3f67a11..dccf7c33 100644
--- a/README.md
+++ b/README.md
@@ -3,3 +3,5 @@ https://github.com/Hashnode/mern-starter
 
 * https://github.com/petehunt/react-howto
 * https://github.com/gajus/react-css-modules
+* https://github.com/jsbin/jsbin (especially look at the console)
+* Need to figure out how to solve the XSS issue, https://github.com/jsbin/jsbin/wiki/Best-practices-for-building-your-own-live-paste-bin
\ No newline at end of file
diff --git a/shared/components/Preview/Preview.jsx b/shared/components/Preview/Preview.jsx
index c7bf9acb..d0a2ded0 100644
--- a/shared/components/Preview/Preview.jsx
+++ b/shared/components/Preview/Preview.jsx
@@ -1,10 +1,31 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 class Preview extends React.Component {
-	_iframe: HTMLIFrameElement
+	
+	componentDidMount() {
+		this.renderFrameContents();
+	}
+
+	renderFrameContents() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+    if(doc.readyState === 'complete') {
+       ReactDOM.render(this.props.children, doc.body);
+    } else {
+       setTimeout(this.renderFrameContents, 0);
+    }
+	}
+
+	componentDidUpdate() {
+		this.renderFrameContents();
+	}
+
+	componentWillUnmount() {
+		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+	}
 
 	render() {
-    return <div ref="container" className="preview-holder"></div>;
+    return <iframe sandbox="allow-same-origin"></iframe>;
   }
 }
 
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index 6acecd14..645d9242 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import Editor from '../../components/Editor/Editor'
+import Preview from '../../components/Preview/Preview'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as FileActions from '../../redux/actions'
@@ -7,9 +8,14 @@ import * as FileActions from '../../redux/actions'
 class App extends React.Component {
 	render() {
 		return (
-			<Editor 
-				content={this.props.file.content}
-				updateFile={this.props.updateFile}/>
+			<div class="app">
+				<Editor 
+					content={this.props.file.content}
+					updateFile={this.props.updateFile} />
+				<Preview>
+					<h1>Hello world!</h1>
+				</Preview>
+			</div>
 		);
 	}
 }