From 786753f1d381da26f98749f1177720b427448ddb Mon Sep 17 00:00:00 2001
From: catarak <ctarakajian@gmail.com>
Date: Mon, 27 Jun 2016 15:47:48 -0400
Subject: [PATCH] add proptypes to previewframe

---
 client/modules/IDE/components/PreviewFrame.js | 79 +++++++++++--------
 1 file changed, 44 insertions(+), 35 deletions(-)

diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js
index 3e0ddc0f..20c79907 100644
--- a/client/modules/IDE/components/PreviewFrame.js
+++ b/client/modules/IDE/components/PreviewFrame.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 
 class PreviewFrame extends React.Component {
@@ -9,35 +9,7 @@ class PreviewFrame extends React.Component {
     }
   }
 
-  clearPreview() {
-    const doc = ReactDOM.findDOMNode(this).contentDocument;
-    doc.write('');
-    doc.close();
-  }
-
-  renderFrameContents() {
-    const doc = ReactDOM.findDOMNode(this).contentDocument;
-    if (doc.readyState === 'complete') {
-      renderSketch();
-    } else {
-      setTimeout(this.renderFrameContents, 0);
-    }
-  }
-
-  renderSketch() {
-    const doc = ReactDOM.findDOMNode(this).contentDocument;
-    this.clearPreview();
-    ReactDOM.render(this.props.head, doc.head);
-    const p5Script = doc.createElement('script');
-    p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
-    doc.body.appendChild(p5Script);
-
-    const sketchScript = doc.createElement('script');
-    sketchScript.textContent = this.props.content;
-    doc.body.appendChild(sketchScript);
-  }
-
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps) {
     if (this.props.isPlaying !== prevProps.isPlaying) {
       if (this.props.isPlaying) {
         this.renderSketch();
@@ -55,13 +27,50 @@ class PreviewFrame extends React.Component {
     ReactDOM.unmountComponentAtNode(ReactDOM.findDOMNode(this).contentDocument.body);
   }
 
+  clearPreview() {
+    const doc = ReactDOM.findDOMNode(this).contentDocument;
+    doc.write('');
+    doc.close();
+  }
+
+  renderSketch() {
+    const doc = ReactDOM.findDOMNode(this).contentDocument;
+    this.clearPreview();
+    ReactDOM.render(this.props.head, doc.head);
+    const p5Script = doc.createElement('script');
+    p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
+    doc.body.appendChild(p5Script);
+
+    const sketchScript = doc.createElement('script');
+    sketchScript.textContent = this.props.content;
+    doc.body.appendChild(sketchScript);
+  }
+
+  renderFrameContents() {
+    const doc = ReactDOM.findDOMNode(this).contentDocument;
+    if (doc.readyState === 'complete') {
+      renderSketch();
+    } else {
+      setTimeout(this.renderFrameContents, 0);
+    }
+  }
+
   render() {
-    return <iframe
-      className="preview-frame"
-      frameBorder="0"
-      sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
-      title="sketch output"></iframe>;
+    return (
+      <iframe
+        className="preview-frame"
+        frameBorder="0"
+        sandbox="allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-modals allow-forms"
+        title="sketch output"
+      ></iframe>
+    );
   }
 }
 
+PreviewFrame.propTypes = {
+  isPlaying: PropTypes.bool.isRequired,
+  head: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired
+};
+
 export default PreviewFrame;