add previewIsRefreshing to redux state

client/constants.js

@@ -85,6 +85,8 @@ export const SET_THEME = 'SET_THEME';
 
 export const SET_UNSAVED_CHANGES = 'SET_UNSAVED_CHANGES';
 export const SET_AUTOREFRESH = 'SET_AUTOREFRESH';
+export const START_SKETCH_REFRESH = 'START_SKETCH_REFRESH';
+export const END_SKETCH_REFRESH = 'END_SKETCH_REFRESH';
 
 export const DETECT_INFINITE_LOOPS = 'DETECT_INFINITE_LOOPS';
 export const RESET_INFINITE_LOOPS = 'RESET_INFINITE_LOOPS';

client/modules/IDE/actions/ide.js

@@ -1,14 +1,23 @@
 import * as ActionTypes from '../../../constants';
 
-export function toggleSketch() {
+export function startSketchRefresh() {
   return {
-    type: ActionTypes.TOGGLE_SKETCH
+    type: ActionTypes.START_SKETCH_REFRESH
+  };
+}
+
+export function endSketchRefresh() {
+  return {
+    type: ActionTypes.END_SKETCH_REFRESH
   };
 }
 
 export function startSketch() {
-  return {
+  return (dispatch) => {
-    type: ActionTypes.START_SKETCH
+    dispatch({
+      type: ActionTypes.START_SKETCH
+    });
+    dispatch(startSketchRefresh());
   };
 }
 

client/modules/IDE/components/PreviewFrame.js

@@ -125,22 +125,20 @@ class PreviewFrame extends React.Component {
       return;
     }
 
-    console.log(this.props, prevProps);
+    // if the user explicitly clicks on the play button
+    if (this.props.isPlaying && this.props.previewIsRefreshing) {
+      this.renderSketch();
+      return;
+    }
+
     if (this.props.isPlaying && this.props.autorefresh) {
+      // if the content of the file changes
+      // or the set of files changes
       if (this.props.content !== prevProps.content
         || this.props.files[0].id !== prevProps.files[0].id) {
         this.renderSketch();
       }
     }
-
-    // if (this.props.isPlaying && this.props.content !== prevProps.content) {
-    //   this.renderSketch();
-    // }
-
-    // // I apologize for this, it is a hack. A simple way to check if the files have changed.
-    // if (this.props.isPlaying && this.props.files[0].id !== prevProps.files[0].id) {
-    //   this.renderSketch();
-    // }
   }
 
   componentWillUnmount() {
@@ -224,6 +222,7 @@ class PreviewFrame extends React.Component {
     }
     if (this.props.isPlaying && !this.props.infiniteLoop) {
       srcDoc.set(doc, this.injectLocalFiles());
+      this.props.endSketchRefresh();
     } else {
       doc.srcdoc = '';
       srcDoc.set(doc, '  ');
@@ -270,7 +269,9 @@ PreviewFrame.propTypes = {
   children: PropTypes.element,
   infiniteLoop: PropTypes.bool.isRequired,
   resetInfiniteLoops: PropTypes.func.isRequired,
-  autorefresh: PropTypes.bool.isRequired
+  autorefresh: PropTypes.bool.isRequired,
+  endSketchRefresh: PropTypes.func.isRequired,
+  previewIsRefreshing: PropTypes.bool.isRequired,
 };
 
 export default PreviewFrame;

client/modules/IDE/pages/IDEView.js

@@ -323,7 +323,12 @@ class IDEView extends React.Component {
                   resetInfiniteLoops={this.props.resetInfiniteLoops}
 =======
                   autorefresh={this.props.preferences.autorefresh}
+<<<<<<< HEAD
 >>>>>>> did stuff
+=======
+                  previewIsRefreshing={this.props.ide.previewIsRefreshing}
+                  endSketchRefresh={this.props.endSketchRefresh}
+>>>>>>> add previewIsRefreshing to redux state
                 />
               </div>
             </SplitPane>
@@ -428,7 +433,11 @@ IDEView.propTypes = {
     editorOptionsVisible: PropTypes.bool.isRequired,
     keyboardShortcutVisible: PropTypes.bool.isRequired,
     unsavedChanges: PropTypes.bool.isRequired,
+<<<<<<< HEAD
     infiniteLoop: PropTypes.bool.isRequired,
+=======
+    previewIsRefreshing: PropTypes.bool.isRequired
+>>>>>>> add previewIsRefreshing to redux state
   }).isRequired,
   startSketch: PropTypes.func.isRequired,
   stopSketch: PropTypes.func.isRequired,
@@ -523,7 +532,8 @@ IDEView.propTypes = {
   route: PropTypes.object.isRequired,
   setUnsavedChanges: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired,
-  setAutorefresh: PropTypes.func.isRequired
+  setAutorefresh: PropTypes.func.isRequired,
+  endSketchRefresh: PropTypes.func.isRequired,
 };
 
 function mapStateToProps(state) {

client/modules/IDE/reducers/ide.js

@@ -17,13 +17,12 @@ const initialState = {
   editorOptionsVisible: false,
   keyboardShortcutVisible: false,
   unsavedChanges: false,
-  infiniteLoop: false
+  infiniteLoop: false,
+  previewIsRefreshing: false
 };
 
 const ide = (state = initialState, action) => {
   switch (action.type) {
-    case ActionTypes.TOGGLE_SKETCH:
-      return Object.assign({}, state, { isPlaying: !state.isPlaying });
     case ActionTypes.START_SKETCH:
       return Object.assign({}, state, { isPlaying: true });
     case ActionTypes.STOP_SKETCH:
@@ -74,10 +73,17 @@ const ide = (state = initialState, action) => {
       return Object.assign({}, state, { keyboardShortcutVisible: false });
     case ActionTypes.SET_UNSAVED_CHANGES:
       return Object.assign({}, state, { unsavedChanges: action.value });
+<<<<<<< HEAD
     case ActionTypes.DETECT_INFINITE_LOOPS:
       return Object.assign({}, state, { infiniteLoop: true });
     case ActionTypes.RESET_INFINITE_LOOPS:
       return Object.assign({}, state, { infiniteLoop: false });
+=======
+    case ActionTypes.START_SKETCH_REFRESH:
+      return Object.assign({}, state, { previewIsRefreshing: true });
+    case ActionTypes.END_SKETCH_REFRESH:
+      return Object.assign({}, state, { previewIsRefreshing: false });
+>>>>>>> add previewIsRefreshing to redux state
     default:
       return state;
   }