Merge pull request #1628 from ZenVega/develop

Connect the <PreviewFrame /> Component

Author: catarak

client/modules/IDE/components/PreviewFrame.jsx

@@ -7,6 +7,8 @@ import loopProtect from 'loop-protect';
 import { JSHINT } from 'jshint';
 import decomment from 'decomment';
 import classNames from 'classnames';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
 import { getBlobUrl } from '../actions/files';
 import { resolvePathToFile } from '../../../../server/utils/filePath';
 import {
@@ -21,6 +23,13 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
   from '../../../utils/consoleUtils';
 import { registerFrame } from '../../../utils/dispatcher';
 
+import { getHTMLFile } from '../reducers/files';
+
+import { stopSketch, expandConsole, endSketchRefresh } from '../actions/ide';
+import { setTextOutput, setGridOutput, setSoundOutput } from '../actions/preferences';
+import { setBlobUrl } from '../actions/files';
+import { clearConsole, dispatchConsoleEvent } from '../actions/console';
+
 
 const shouldRenderSketch = (props, prevProps = undefined) => {
   const { isPlaying, previewIsRefreshing, fullView } = props;
@@ -350,4 +359,35 @@ PreviewFrame.defaultProps = {
   cmController: {}
 };
 
-export default PreviewFrame;
+const mapStateToProps = state => ({
+  files: state.files,
+  htmlFile: getHTMLFile(state.files),
+  content:
+    (state.files.find(file => file.isSelectedFile) ||
+    state.files.find(file => file.name === 'sketch.js') ||
+    state.files.find(file => file.name !== 'root')).content,
+  isPlaying: state.ide.isPlaying,
+  isAccessibleOutputPlaying: state.ide.isAccessibleOutputPlaying,
+  previewIsRefreshing: state.ide.previewIsRefreshing,
+  textOutput: state.preferences.textOutput,
+  gridOutput: state.preferences.gridOutput,
+  soundOutput: state.preferences.soundOutput,
+  language: state.preferences.language,
+  autorefresh: state.preferences.autorefresh,
+});
+
+
+const mapDispatchToProps = {
+  stopSketch,
+  expandConsole,
+  endSketchRefresh,
+  setTextOutput,
+  setGridOutput,
+  setSoundOutput,
+  setBlobUrl,
+  clearConsole,
+  dispatchConsoleEvent
+};
+
+
+export default (connect(mapStateToProps, mapDispatchToProps)(PreviewFrame));

client/modules/IDE/pages/IDEView.jsx

@@ -363,31 +363,7 @@ class IDEView extends React.Component {
                       this.props.ide.isPlaying) ||
                       this.props.ide.isAccessibleOutputPlaying}
                   </div>
-                  <PreviewFrame
-                    htmlFile={this.props.htmlFile}
-                    files={this.props.files}
-                    content={this.props.selectedFile.content}
-                    isPlaying={this.props.ide.isPlaying}
-                    isAccessibleOutputPlaying={
-                      this.props.ide.isAccessibleOutputPlaying
-                    }
-                    textOutput={this.props.preferences.textOutput}
-                    gridOutput={this.props.preferences.gridOutput}
-                    soundOutput={this.props.preferences.soundOutput}
-                    setTextOutput={this.props.setTextOutput}
-                    setGridOutput={this.props.setGridOutput}
-                    setSoundOutput={this.props.setSoundOutput}
-                    dispatchConsoleEvent={this.props.dispatchConsoleEvent}
-                    autorefresh={this.props.preferences.autorefresh}
-                    previewIsRefreshing={this.props.ide.previewIsRefreshing}
-                    endSketchRefresh={this.props.endSketchRefresh}
-                    stopSketch={this.props.stopSketch}
-                    setBlobUrl={this.props.setBlobUrl}
-                    expandConsole={this.props.expandConsole}
-                    clearConsole={this.props.clearConsole}
-                    cmController={this.cmController}
-                    language={this.props.preferences.language}
-                  />
+                  <PreviewFrame cmController={this.cmController} />
                 </div>
               </section>
             </SplitPane>
@@ -566,7 +542,6 @@ IDEView.propTypes = {
     name: PropTypes.string.isRequired,
     content: PropTypes.string.isRequired,
   }).isRequired,
-  dispatchConsoleEvent: PropTypes.func.isRequired,
   newFile: PropTypes.func.isRequired,
   expandSidebar: PropTypes.func.isRequired,
   collapseSidebar: PropTypes.func.isRequired,
@@ -592,10 +567,7 @@ IDEView.propTypes = {
   }).isRequired,
   route: PropTypes.oneOfType([PropTypes.object, PropTypes.element]).isRequired,
   setTheme: PropTypes.func.isRequired,
-  endSketchRefresh: PropTypes.func.isRequired,
-  setBlobUrl: PropTypes.func.isRequired,
   setPreviousPath: PropTypes.func.isRequired,
-  clearConsole: PropTypes.func.isRequired,
   showErrorModal: PropTypes.func.isRequired,
   hideErrorModal: PropTypes.func.isRequired,
   clearPersistedState: PropTypes.func.isRequired,