From f78fc37d6845c9cea591c7205b4846bd5db9e2bd Mon Sep 17 00:00:00 2001 From: Cassie Tarakajian Date: Wed, 28 Sep 2016 18:05:14 -0400 Subject: [PATCH] add previewIsRefreshing to redux state --- client/constants.js | 2 ++ client/modules/IDE/actions/ide.js | 17 ++++++++++---- client/modules/IDE/components/PreviewFrame.js | 23 ++++++++++--------- client/modules/IDE/pages/IDEView.js | 12 +++++++++- client/modules/IDE/reducers/ide.js | 12 +++++++--- 5 files changed, 47 insertions(+), 19 deletions(-) diff --git a/client/constants.js b/client/constants.js index e440c93f..ef4f9041 100644 --- a/client/constants.js +++ b/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'; diff --git a/client/modules/IDE/actions/ide.js b/client/modules/IDE/actions/ide.js index a2915232..8116c304 100644 --- a/client/modules/IDE/actions/ide.js +++ b/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 { - type: ActionTypes.START_SKETCH + return (dispatch) => { + dispatch({ + type: ActionTypes.START_SKETCH + }); + dispatch(startSketchRefresh()); }; } diff --git a/client/modules/IDE/components/PreviewFrame.js b/client/modules/IDE/components/PreviewFrame.js index a11eb41b..10c1f520 100644 --- a/client/modules/IDE/components/PreviewFrame.js +++ b/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; diff --git a/client/modules/IDE/pages/IDEView.js b/client/modules/IDE/pages/IDEView.js index 89abed05..977c814c 100644 --- a/client/modules/IDE/pages/IDEView.js +++ b/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 /> @@ -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) { diff --git a/client/modules/IDE/reducers/ide.js b/client/modules/IDE/reducers/ide.js index 840e3068..c16b10f1 100644 --- a/client/modules/IDE/reducers/ide.js +++ b/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; }