From ca4c795bbc75630762530c7a347dd065e6924ef2 Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Fri, 16 Feb 2018 11:11:27 -0500 Subject: [PATCH 1/2] Move active tab state into a reducer. --- src/components/gui/gui.jsx | 23 +++++++++++++++-------- src/containers/gui.jsx | 30 ++++++++++++++---------------- src/reducers/gui.js | 2 ++ src/reducers/navigation.js | 37 +++++++++++++++++++++++++++++++++++++ 4 files changed, 68 insertions(+), 24 deletions(-) create mode 100644 src/reducers/navigation.js diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 5cbd88cbc..4950128f2 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -35,15 +35,18 @@ const messages = defineMessages({ const GUIComponent = props => { const { + activeTabIndex, basePath, + blocksTabVisible, children, + costumesTabVisible, intl, feedbackFormVisible, vm, previewInfoVisible, + soundsTabVisible, onExtensionButtonClick, - onTabSelect, - tabIndex, + onActivateTab, ...componentProps } = props; if (children) { @@ -86,9 +89,10 @@ const GUIComponent = props => { Blocks @@ -99,7 +103,7 @@ const GUIComponent = props => { { - {tabIndex === 1 ? : null} + {costumesTabVisible ? : null} - {tabIndex === 2 ? : null} + {soundsTabVisible ? : null} @@ -159,14 +163,17 @@ const GUIComponent = props => { ); }; GUIComponent.propTypes = { + activeTabIndex: PropTypes.number, basePath: PropTypes.string, + blocksTabVisible: PropTypes.bool, children: PropTypes.node, + costumesTabVisible: PropTypes.bool, feedbackFormVisible: PropTypes.bool, intl: intlShape.isRequired, + onActivateTab: PropTypes.func, onExtensionButtonClick: PropTypes.func, - onTabSelect: PropTypes.func, previewInfoVisible: PropTypes.bool, - tabIndex: PropTypes.number, + soundsTabVisible: PropTypes.bool, vm: PropTypes.instanceOf(VM).isRequired }; GUIComponent.defaultProps = { diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index d986e0d28..65e560993 100644 --- a/src/containers/gui.jsx +++ b/src/containers/gui.jsx @@ -2,23 +2,21 @@ import AudioEngine from 'scratch-audio'; import PropTypes from 'prop-types'; import React from 'react'; import VM from 'scratch-vm'; -import bindAll from 'lodash.bindall'; import {connect} from 'react-redux'; -import {openExtensionLibrary} from '../reducers/modals.js'; +import {openExtensionLibrary} from '../reducers/modals'; +import { + activateTab, + BLOCKS_TAB_INDEX, + COSTUMES_TAB_INDEX, + SOUNDS_TAB_INDEX +} from '../reducers/navigation'; import vmListenerHOC from '../lib/vm-listener-hoc.jsx'; import GUIComponent from '../components/gui/gui.jsx'; class GUI extends React.Component { - constructor (props) { - super(props); - bindAll(this, [ - 'handleTabSelect' - ]); - this.state = {tabIndex: 0}; - } componentDidMount () { this.audioEngine = new AudioEngine(); this.props.vm.attachAudioEngine(this.audioEngine); @@ -34,9 +32,6 @@ class GUI extends React.Component { componentWillUnmount () { this.props.vm.stopAll(); } - handleTabSelect (tabIndex) { - this.setState({tabIndex}); - } render () { const { children, @@ -46,9 +41,7 @@ class GUI extends React.Component { } = this.props; return ( {children} @@ -68,12 +61,17 @@ GUI.propTypes = { GUI.defaultProps = GUIComponent.defaultProps; const mapStateToProps = state => ({ + activeTabIndex: state.navigation.activeTabIndex, + blocksTabVisible: state.navigation.activeTabIndex === BLOCKS_TAB_INDEX, + costumesTabVisible: state.navigation.activeTabIndex === COSTUMES_TAB_INDEX, feedbackFormVisible: state.modals.feedbackForm, - previewInfoVisible: state.modals.previewInfo + previewInfoVisible: state.modals.previewInfo, + soundsTabVisible: state.navigation.activeTabIndex === SOUNDS_TAB_INDEX }); const mapDispatchToProps = dispatch => ({ - onExtensionButtonClick: () => dispatch(openExtensionLibrary()) + onExtensionButtonClick: () => dispatch(openExtensionLibrary()), + onActivateTab: tab => dispatch(activateTab(tab)) }); const ConnectedGUI = connect( diff --git a/src/reducers/gui.js b/src/reducers/gui.js index d49144b4f..6eb4271e8 100644 --- a/src/reducers/gui.js +++ b/src/reducers/gui.js @@ -9,6 +9,7 @@ import targetReducer from './targets'; import toolboxReducer from './toolbox'; import vmReducer from './vm'; import stageSizeReducer from './stage-size'; +import navigationReducer from './navigation'; import {ScratchPaintReducer} from 'scratch-paint'; export default combineReducers({ @@ -19,6 +20,7 @@ export default combineReducers({ modals: modalReducer, monitors: monitorReducer, monitorLayout: monitorLayoutReducer, + navigation: navigationReducer, targets: targetReducer, toolbox: toolboxReducer, vm: vmReducer, diff --git a/src/reducers/navigation.js b/src/reducers/navigation.js new file mode 100644 index 000000000..21b3534e2 --- /dev/null +++ b/src/reducers/navigation.js @@ -0,0 +1,37 @@ +const ACTIVATE_TAB = 'scratch-gui/navigation/ACTIVATE_TAB'; + +// Constants use numbers to make it easier to work with react-tabs +const BLOCKS_TAB_INDEX = 0; +const COSTUMES_TAB_INDEX = 1; +const SOUNDS_TAB_INDEX = 2; + +const initialState = { + activeTabIndex: BLOCKS_TAB_INDEX +}; + +const reducer = function (state, action) { + if (typeof state === 'undefined') state = initialState; + switch (action.type) { + case ACTIVATE_TAB: + return Object.assign({}, state, { + activeTabIndex: action.activeTabIndex + }); + default: + return state; + } +}; + +const activateTab = function (tab) { + return { + type: ACTIVATE_TAB, + activeTabIndex: tab + }; +}; + +export { + reducer as default, + activateTab, + BLOCKS_TAB_INDEX, + COSTUMES_TAB_INDEX, + SOUNDS_TAB_INDEX +}; From 64d6c379ebd77546ab9fe88a83626008187919de Mon Sep 17 00:00:00 2001 From: Paul Kaplan Date: Thu, 22 Feb 2018 14:40:01 -0500 Subject: [PATCH 2/2] Change navigation => editor tab reducer, fix alphabetization --- src/components/gui/gui.jsx | 8 ++++---- src/containers/gui.jsx | 10 +++++----- src/reducers/{navigation.js => editor-tab.js} | 0 src/reducers/gui.js | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) rename src/reducers/{navigation.js => editor-tab.js} (100%) diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx index 4950128f2..488e705e8 100644 --- a/src/components/gui/gui.jsx +++ b/src/components/gui/gui.jsx @@ -40,13 +40,13 @@ const GUIComponent = props => { blocksTabVisible, children, costumesTabVisible, - intl, feedbackFormVisible, - vm, - previewInfoVisible, - soundsTabVisible, + intl, onExtensionButtonClick, onActivateTab, + previewInfoVisible, + soundsTabVisible, + vm, ...componentProps } = props; if (children) { diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx index 65e560993..bae6f9684 100644 --- a/src/containers/gui.jsx +++ b/src/containers/gui.jsx @@ -10,7 +10,7 @@ import { BLOCKS_TAB_INDEX, COSTUMES_TAB_INDEX, SOUNDS_TAB_INDEX -} from '../reducers/navigation'; +} from '../reducers/editor-tab'; import vmListenerHOC from '../lib/vm-listener-hoc.jsx'; @@ -61,12 +61,12 @@ GUI.propTypes = { GUI.defaultProps = GUIComponent.defaultProps; const mapStateToProps = state => ({ - activeTabIndex: state.navigation.activeTabIndex, - blocksTabVisible: state.navigation.activeTabIndex === BLOCKS_TAB_INDEX, - costumesTabVisible: state.navigation.activeTabIndex === COSTUMES_TAB_INDEX, + activeTabIndex: state.editorTab.activeTabIndex, + blocksTabVisible: state.editorTab.activeTabIndex === BLOCKS_TAB_INDEX, + costumesTabVisible: state.editorTab.activeTabIndex === COSTUMES_TAB_INDEX, feedbackFormVisible: state.modals.feedbackForm, previewInfoVisible: state.modals.previewInfo, - soundsTabVisible: state.navigation.activeTabIndex === SOUNDS_TAB_INDEX + soundsTabVisible: state.editorTab.activeTabIndex === SOUNDS_TAB_INDEX }); const mapDispatchToProps = dispatch => ({ diff --git a/src/reducers/navigation.js b/src/reducers/editor-tab.js similarity index 100% rename from src/reducers/navigation.js rename to src/reducers/editor-tab.js diff --git a/src/reducers/gui.js b/src/reducers/gui.js index 6eb4271e8..d19966837 100644 --- a/src/reducers/gui.js +++ b/src/reducers/gui.js @@ -9,18 +9,18 @@ import targetReducer from './targets'; import toolboxReducer from './toolbox'; import vmReducer from './vm'; import stageSizeReducer from './stage-size'; -import navigationReducer from './navigation'; +import editorTabReducer from './editor-tab'; import {ScratchPaintReducer} from 'scratch-paint'; export default combineReducers({ colorPicker: colorPickerReducer, customProcedures: customProceduresReducer, + editorTab: editorTabReducer, intl: intlReducer, stageSize: stageSizeReducer, modals: modalReducer, monitors: monitorReducer, monitorLayout: monitorLayoutReducer, - navigation: navigationReducer, targets: targetReducer, toolbox: toolboxReducer, vm: vmReducer,