From c182c75c6eef3b36c799fdfd16a545189043ff8a Mon Sep 17 00:00:00 2001
From: chrisgarrity <chrisg@media.mit.edu>
Date: Fri, 11 May 2018 11:53:58 -0400
Subject: [PATCH] Move creating the store into playground examples
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
GUI will export a reducer to be included in the enclosing component’s redux when GUI is used as a library. The app-state-hoc is moved into the playground examples to provide a store when GUI is being used stand-alone.
---
src/containers/gui.jsx | 21 +++++++++--------
src/lib/app-state-hoc.jsx | 11 +++++----
src/playground/blocks-only.jsx | 3 ++-
src/playground/compatibility-testing.jsx | 29 ++++++------------------
src/playground/index.jsx | 3 ++-
src/playground/player.jsx | 3 ++-
6 files changed, 32 insertions(+), 38 deletions(-)
diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index c4e105d66..bc241be96 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -5,6 +5,7 @@ import VM from 'scratch-vm';
import {connect} from 'react-redux';
import ReactModal from 'react-modal';
+import ErrorBoundary from './error-boundary.jsx';
import {openExtensionLibrary} from '../reducers/modals';
import {
activateTab,
@@ -13,7 +14,6 @@ import {
SOUNDS_TAB_INDEX
} from '../reducers/editor-tab';
-import AppStateHOC from '../lib/app-state-hoc.jsx';
import ProjectLoaderHOC from '../lib/project-loader-hoc.jsx';
import vmListenerHOC from '../lib/vm-listener-hoc.jsx';
@@ -73,13 +73,15 @@ class GUI extends React.Component {
...componentProps
} = this.props;
return (
- <GUIComponent
- loading={fetchingProject || this.state.loading || loadingStateVisible}
- vm={vm}
- {...componentProps}
- >
- {children}
- </GUIComponent>
+ <ErrorBoundary action="Top Level App">
+ <GUIComponent
+ loading={fetchingProject || this.state.loading || loadingStateVisible}
+ vm={vm}
+ {...componentProps}
+ >
+ {children}
+ </GUIComponent>
+ </ErrorBoundary>
);
}
}
@@ -102,6 +104,7 @@ const mapStateToProps = state => ({
cardsVisible: state.cards.visible,
costumesTabVisible: state.editorTab.activeTabIndex === COSTUMES_TAB_INDEX,
importInfoVisible: state.modals.importInfo,
+ isPlayerOnly: state.mode.isPlayerOnly,
loadingStateVisible: state.modals.loadingProject,
previewInfoVisible: state.modals.previewInfo,
targetIsStage: state.targets.stage && state.targets.stage.id === state.targets.editingTarget,
@@ -121,7 +124,7 @@ const ConnectedGUI = connect(
mapDispatchToProps,
)(GUI);
-const WrappedGui = ProjectLoaderHOC(AppStateHOC(vmListenerHOC(ConnectedGUI)));
+const WrappedGui = ProjectLoaderHOC(vmListenerHOC(ConnectedGUI));
WrappedGui.setAppElement = ReactModal.setAppElement;
export default WrappedGui;
diff --git a/src/lib/app-state-hoc.jsx b/src/lib/app-state-hoc.jsx
index 91d4069f0..7f7c2b0d6 100644
--- a/src/lib/app-state-hoc.jsx
+++ b/src/lib/app-state-hoc.jsx
@@ -9,7 +9,6 @@ import {IntlProvider, updateIntl} from 'react-intl-redux';
import {intlInitialState} from '../reducers/intl.js';
import {initialState as modeInitialState, setPlayer, setFullScreen} from '../reducers/mode.js';
import reducer from '../reducers/gui';
-import ErrorBoundary from '../containers/error-boundary.jsx';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const enhancer = composeEnhancers(
@@ -68,12 +67,16 @@ const AppStateHOC = function (WrappedComponent) {
}
}
render () {
+ const {
+ intl, // eslint-disable-line no-unused-vars
+ isFullScreen, // eslint-disable-line no-unused-vars
+ isPlayerOnly, // eslint-disable-line no-unused-vars
+ ...componentProps
+ } = this.props;
return (
<Provider store={this.store}>
<IntlProvider>
- <ErrorBoundary action="Top Level App">
- <WrappedComponent {...this.props} />
- </ErrorBoundary>
+ <WrappedComponent {...componentProps} />
</IntlProvider>
</Provider>
);
diff --git a/src/playground/blocks-only.jsx b/src/playground/blocks-only.jsx
index 9a925424c..636610433 100644
--- a/src/playground/blocks-only.jsx
+++ b/src/playground/blocks-only.jsx
@@ -6,6 +6,7 @@ import Controls from '../containers/controls.jsx';
import Blocks from '../containers/blocks.jsx';
import GUI from '../containers/gui.jsx';
import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import AppStateHOC from '../lib/app-state-hoc.jsx';
import styles from './blocks-only.css';
@@ -26,7 +27,7 @@ const BlocksOnly = props => (
</GUI>
);
-const App = HashParserHOC(BlocksOnly);
+const App = HashParserHOC(AppStateHOC(BlocksOnly));
const appTarget = document.createElement('div');
document.body.appendChild(appTarget);
diff --git a/src/playground/compatibility-testing.jsx b/src/playground/compatibility-testing.jsx
index a1b6fba5c..2fb57f1ca 100644
--- a/src/playground/compatibility-testing.jsx
+++ b/src/playground/compatibility-testing.jsx
@@ -7,6 +7,8 @@ import Stage from '../containers/stage.jsx';
import Box from '../components/box/box.jsx';
import GUI from '../containers/gui.jsx';
import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import AppStateHOC from '../lib/app-state-hoc.jsx';
+const WrappedGui = HashParserHOC(AppStateHOC(GUI));
const mapStateToProps = state => ({vm: state.vm});
@@ -37,27 +39,12 @@ class Player extends React.Component {
this.setState({projectId: window.location.hash.substring(1)});
}
render () {
- const width = 480;
- const height = 360;
return (
<div style={{display: 'flex'}}>
- <GUI
- {...this.props}
- width={width}
- >
- <Box height={40}>
- <VMControls
- style={{
- marginRight: 10,
- height: 40
- }}
- />
- </Box>
- <VMStage
- height={height}
- width={width}
- />
- </GUI>
+ <WrappedGui
+ isPlayerOnly
+ isFullScreen={false}
+ />
<iframe
allowFullScreen
allowTransparency
@@ -71,9 +58,7 @@ class Player extends React.Component {
}
}
-const App = HashParserHOC(Player);
-
const appTarget = document.createElement('div');
document.body.appendChild(appTarget);
-ReactDOM.render(<App />, appTarget);
+ReactDOM.render(<Player />, appTarget);
diff --git a/src/playground/index.jsx b/src/playground/index.jsx
index 60e018fb6..278d2dd43 100644
--- a/src/playground/index.jsx
+++ b/src/playground/index.jsx
@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
import analytics from '../lib/analytics';
import GUI from '../containers/gui.jsx';
import HashParserHOC from '../lib/hash-parser-hoc.jsx';
+import AppStateHOC from '../lib/app-state-hoc.jsx';
import styles from './index.css';
@@ -21,6 +22,6 @@ appTarget.className = styles.app;
document.body.appendChild(appTarget);
GUI.setAppElement(appTarget);
-const WrappedGui = HashParserHOC(GUI);
+const WrappedGui = HashParserHOC(AppStateHOC(GUI));
ReactDOM.render(<WrappedGui />, appTarget);
diff --git a/src/playground/player.jsx b/src/playground/player.jsx
index 4ecae4c0c..d1617571c 100644
--- a/src/playground/player.jsx
+++ b/src/playground/player.jsx
@@ -4,7 +4,8 @@ import ReactDOM from 'react-dom';
import Box from '../components/box/box.jsx';
import GUI from '../containers/gui.jsx';
import HashParserHOC from '../lib/hash-parser-hoc.jsx';
-const WrappedGui = HashParserHOC(GUI);
+import AppStateHOC from '../lib/app-state-hoc.jsx';
+const WrappedGui = HashParserHOC(AppStateHOC(GUI));
if (process.env.NODE_ENV === 'production' && typeof window === 'object') {
// Warn before navigating away
--
GitLab