refactor PreviewFrame by including mapStateToProps and mapDispatchToProps

Author: ZenVega

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,18 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets }
   from '../../../utils/consoleUtils';
 import { registerFrame } from '../../../utils/dispatcher';
 
+import { getHTMLFile } from '../reducers/files';
+import { getIsUserOwner } from '../selectors/users';
+
+import * as FileActions from '../actions/files';
+import * as IDEActions from '../actions/ide';
+import * as ProjectActions from '../actions/project';
+import * as EditorAccessibilityActions from '../actions/editorAccessibility';
+import * as PreferencesActions from '../actions/preferences';
+import * as UserActions from '../../User/actions';
+import * as ToastActions from '../actions/toast';
+import * as ConsoleActions from '../actions/console';
+
 
 const shouldRenderSketch = (props, prevProps = undefined) => {
   const { isPlaying, previewIsRefreshing, fullView } = props;
@@ -350,4 +364,43 @@ PreviewFrame.defaultProps = {
   cmController: {}
 };
 
-export default PreviewFrame;
+const mapStateToProps = state => ({
+  files: state.files,
+  file:
+    state.files.find(file => file.isSelectedFile) ||
+    state.files.find(file => file.name === 'sketch.js') ||
+    state.files.find(file => file.name !== 'root'),
+  htmlFile: getHTMLFile(state.files),
+  ide: state.ide,
+  preferences: state.preferences,
+  editorAccessibility: state.editorAccessibility,
+  user: state.user,
+  project: state.project,
+  toast: state.toast,
+  console: state.console,
+
+  ...state.preferences,
+  ...state.ide,
+  ...state.project,
+  ...state.editorAccessibility,
+  isExpanded: state.ide.sidebarIsExpanded,
+  projectSavedTime: state.project.updatedAt,
+  isUserOwner: getIsUserOwner(state)
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators(
+  Object.assign(
+    {},
+    EditorAccessibilityActions,
+    FileActions,
+    ProjectActions,
+    IDEActions,
+    PreferencesActions,
+    UserActions,
+    ToastActions,
+    ConsoleActions
+  ),
+  dispatch
+);
+
+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 />
                 </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,