From dcf5d26a4347c26848c76771fa2a85a12f328a64 Mon Sep 17 00:00:00 2001 From: ZenVega <50147356+ZenVega@users.noreply.github.com> Date: Sun, 4 Oct 2020 14:37:26 +0200 Subject: [PATCH 1/6] refactor PreviewFrame by including mapStateToProps and mapDispatchToProps --- .../modules/IDE/components/PreviewFrame.jsx | 55 ++++++++++++++++++- client/modules/IDE/pages/IDEView.jsx | 30 +--------- 2 files changed, 55 insertions(+), 30 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 142cb5ece7..fb2c6676ee 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/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)); diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index 38962a8e4c..b28031d751 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -363,31 +363,7 @@ class IDEView extends React.Component { this.props.ide.isPlaying) || this.props.ide.isAccessibleOutputPlaying} - + @@ -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, From e15c21b414e83b33ec479d5706438f48a8de3b3f Mon Sep 17 00:00:00 2001 From: ZenVega <50147356+ZenVega@users.noreply.github.com> Date: Sun, 4 Oct 2020 16:00:31 +0200 Subject: [PATCH 2/6] deleting whitespace --- .../modules/IDE/components/PreviewFrame.jsx | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index fb2c6676ee..e15ebe4509 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -24,7 +24,6 @@ import { hijackConsoleErrorsScript, startTag, getAllScriptOffsets } 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'; @@ -366,26 +365,11 @@ PreviewFrame.defaultProps = { 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.preferences, ...state.project, - ...state.editorAccessibility, - isExpanded: state.ide.sidebarIsExpanded, - projectSavedTime: state.project.updatedAt, - isUserOwner: getIsUserOwner(state) + ...state.editorAccessibility }); const mapDispatchToProps = dispatch => bindActionCreators( From a240a2aa03440e29268ff3429448f748f598fac8 Mon Sep 17 00:00:00 2001 From: ZenVega <50147356+ZenVega@users.noreply.github.com> Date: Tue, 6 Oct 2020 21:42:52 +0200 Subject: [PATCH 3/6] pull out the specific parts that PreviewFrame depends on in mapStateToProps --- client/modules/IDE/components/PreviewFrame.jsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index e15ebe4509..9a9f11c33a 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -366,10 +366,12 @@ PreviewFrame.defaultProps = { const mapStateToProps = state => ({ files: state.files, htmlFile: getHTMLFile(state.files), - ...state.ide, - ...state.preferences, - ...state.project, - ...state.editorAccessibility + isPlaying: state.ide.isPlaying, + isAccessibleOutputPlaying: state.ide.isAccessibleOutputPlaying, + previewIsRefreshing: state.ide.previewIsRefreshing, + textOutput: state.preferences.textOutput, + gridOutput: state.preferences.gridOutput, + soundOutput: state.preferences.soundOutput, }); const mapDispatchToProps = dispatch => bindActionCreators( From 81e46f919f34b71f9c2d569d6d0994e563170491 Mon Sep 17 00:00:00 2001 From: ZenVega <50147356+ZenVega@users.noreply.github.com> Date: Thu, 8 Oct 2020 12:09:46 +0200 Subject: [PATCH 4/6] add more missing props in mapStateToProps --- .../modules/IDE/components/PreviewFrame.jsx | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 9a9f11c33a..b75d0045dd 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -366,14 +366,35 @@ PreviewFrame.defaultProps = { 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, }); + +/* + setTextOutput={this.props.setTextOutput} + setGridOutput={this.props.setGridOutput} + setSoundOutput={this.props.setSoundOutput} + dispatchConsoleEvent={this.props.dispatchConsoleEvent} + endSketchRefresh={this.props.endSketchRefresh} + stopSketch={this.props.stopSketch} + setBlobUrl={this.props.setBlobUrl} + expandConsole={this.props.expandConsole} + clearConsole={this.props.clearConsole} + cmController={this.cmController} +*/ + + const mapDispatchToProps = dispatch => bindActionCreators( Object.assign( {}, From 9de3ebf1a863a745da096dd62f489c7cd910fc36 Mon Sep 17 00:00:00 2001 From: ZenVega <50147356+ZenVega@users.noreply.github.com> Date: Fri, 9 Oct 2020 11:50:39 +0200 Subject: [PATCH 5/6] importing actions individually and restructure mapDispatchToProps --- .../modules/IDE/components/PreviewFrame.jsx | 43 ++++++------------- client/modules/IDE/pages/IDEView.jsx | 2 +- 2 files changed, 14 insertions(+), 31 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index b75d0045dd..391e581cfd 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -25,14 +25,10 @@ import { registerFrame } from '../../../utils/dispatcher'; import { getHTMLFile } from '../reducers/files'; -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'; +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) => { @@ -381,31 +377,18 @@ const mapStateToProps = state => ({ }); -/* - setTextOutput={this.props.setTextOutput} - setGridOutput={this.props.setGridOutput} - setSoundOutput={this.props.setSoundOutput} - dispatchConsoleEvent={this.props.dispatchConsoleEvent} - endSketchRefresh={this.props.endSketchRefresh} - stopSketch={this.props.stopSketch} - setBlobUrl={this.props.setBlobUrl} - expandConsole={this.props.expandConsole} - clearConsole={this.props.clearConsole} - cmController={this.cmController} -*/ - - const mapDispatchToProps = dispatch => bindActionCreators( Object.assign( {}, - EditorAccessibilityActions, - FileActions, - ProjectActions, - IDEActions, - PreferencesActions, - UserActions, - ToastActions, - ConsoleActions + stopSketch, + expandConsole, + endSketchRefresh, + setTextOutput, + setGridOutput, + setSoundOutput, + setBlobUrl, + clearConsole, + dispatchConsoleEvent, ), dispatch ); diff --git a/client/modules/IDE/pages/IDEView.jsx b/client/modules/IDE/pages/IDEView.jsx index b28031d751..4e51f55a28 100644 --- a/client/modules/IDE/pages/IDEView.jsx +++ b/client/modules/IDE/pages/IDEView.jsx @@ -363,7 +363,7 @@ class IDEView extends React.Component { this.props.ide.isPlaying) || this.props.ide.isAccessibleOutputPlaying} - + From b3d7a7099a76614c4555a7bae95a15183b04c686 Mon Sep 17 00:00:00 2001 From: ZenVega <50147356+ZenVega@users.noreply.github.com> Date: Wed, 14 Oct 2020 13:43:38 +0200 Subject: [PATCH 6/6] PreviewFrames mapDispatchToProps as plain Object --- .../modules/IDE/components/PreviewFrame.jsx | 27 +++++++++---------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/client/modules/IDE/components/PreviewFrame.jsx b/client/modules/IDE/components/PreviewFrame.jsx index 391e581cfd..08249a3124 100644 --- a/client/modules/IDE/components/PreviewFrame.jsx +++ b/client/modules/IDE/components/PreviewFrame.jsx @@ -377,20 +377,17 @@ const mapStateToProps = state => ({ }); -const mapDispatchToProps = dispatch => bindActionCreators( - Object.assign( - {}, - stopSketch, - expandConsole, - endSketchRefresh, - setTextOutput, - setGridOutput, - setSoundOutput, - setBlobUrl, - clearConsole, - dispatchConsoleEvent, - ), - dispatch -); +const mapDispatchToProps = { + stopSketch, + expandConsole, + endSketchRefresh, + setTextOutput, + setGridOutput, + setSoundOutput, + setBlobUrl, + clearConsole, + dispatchConsoleEvent +}; + export default (connect(mapStateToProps, mapDispatchToProps)(PreviewFrame));