diff --git a/src/containers/gui.jsx b/src/containers/gui.jsx
index 519d09a32a479ef91a63444153922b4e7daff079..42a6d1ab736ebf92fce3a66fdb4c86f62df8a425 100644
--- a/src/containers/gui.jsx
+++ b/src/containers/gui.jsx
@@ -84,7 +84,6 @@ class GUI extends React.Component {
assetHost,
cloudHost,
error,
- hideIntro,
isError,
isShowingProject,
onStorageInit,
@@ -118,7 +117,6 @@ GUI.propTypes = {
cloudHost: PropTypes.string,
error: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
fetchingProject: PropTypes.bool,
- hideIntro: PropTypes.bool,
importInfoVisible: PropTypes.bool,
intl: intlShape,
isError: PropTypes.bool,
@@ -143,7 +141,7 @@ GUI.defaultProps = {
onUpdateProjectId: () => {}
};
-const mapStateToProps = (state, ownProps) => {
+const mapStateToProps = state => {
const loadingState = state.scratchGui.projectState.loadingState;
return {
activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
@@ -161,7 +159,7 @@ const mapStateToProps = (state, ownProps) => {
isRtl: state.locales.isRtl,
isShowingProject: getIsShowingProject(loadingState),
loadingStateVisible: state.scratchGui.modals.loadingProject,
- previewInfoVisible: state.scratchGui.modals.previewInfo && !ownProps.hideIntro,
+ previewInfoVisible: state.scratchGui.modals.previewInfo,
projectId: state.scratchGui.projectState.projectId,
targetIsStage: (
state.scratchGui.targets.stage &&
diff --git a/src/lib/app-state-hoc.jsx b/src/lib/app-state-hoc.jsx
index 9177c52192d4cb2126e34320826ccec19698eedf..2c3e4d79209d669b73a265564a40d74c53bbaac6 100644
--- a/src/lib/app-state-hoc.jsx
+++ b/src/lib/app-state-hoc.jsx
@@ -31,10 +31,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
let reducers = {};
let enhancer;
- this.state = {
- tutorial: false
- };
-
let initializedLocales = localesInitialState;
const locale = detectLocale(Object.keys(locales));
if (locale !== 'en') {
@@ -56,6 +52,7 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
guiMiddleware,
initFullScreen,
initPlayer,
+ initPreviewInfo,
initTutorialLibrary
} = guiRedux;
const {ScratchPaintReducer} = require('scratch-paint');
@@ -70,11 +67,17 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
}
} else {
const tutorialId = detectTutorialId();
- // handle ?tutorial=all for beta
- // if we decide to keep this for www, functionality should move to
- // setActiveCards in the GUI container
- if (tutorialId === 'all') initializedGui = initTutorialLibrary(initializedGui);
- if (tutorialId) this.state.tutorial = true;
+ if (tutorialId === null) {
+ if (props.showPreviewInfo) {
+ // Show preview info if requested and no tutorial ID found
+ initializedGui = initPreviewInfo(initializedGui);
+ }
+ } else if (tutorialId === 'all') {
+ // Specific tutorials are set in setActiveCards in the GUI container.
+ // Handle ?tutorial=all here for beta, if we decide to keep this for the
+ // project page, this functionality should move to GUI container also.
+ initializedGui = initTutorialLibrary(initializedGui);
+ }
}
reducers = {
locales: localesReducer,
@@ -107,9 +110,9 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
const {
isFullScreen, // eslint-disable-line no-unused-vars
isPlayerOnly, // eslint-disable-line no-unused-vars
+ showPreviewInfo, // eslint-disable-line no-unused-vars
...componentProps
} = this.props;
- if (this.state.tutorial) componentProps.hideIntro = true;
return (
<Provider store={this.store}>
<ConnectedIntlProvider>
@@ -123,7 +126,8 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
}
AppStateWrapper.propTypes = {
isFullScreen: PropTypes.bool,
- isPlayerOnly: PropTypes.bool
+ isPlayerOnly: PropTypes.bool,
+ showPreviewInfo: PropTypes.bool
};
return AppStateWrapper;
};
diff --git a/src/lib/hash-parser-hoc.jsx b/src/lib/hash-parser-hoc.jsx
index 611f6769923f81e02489b1431d1b9874abdf8a1f..b948d3d69be2b8af865bdd8b6184d194143de3af 100644
--- a/src/lib/hash-parser-hoc.jsx
+++ b/src/lib/hash-parser-hoc.jsx
@@ -9,6 +9,8 @@ import {
setProjectId
} from '../reducers/project-state';
+import {closePreviewInfo} from '../reducers/modals';
+
/* Higher Order Component to get the project id from location.hash
* @param {React.Component} WrappedComponent: component to render
* @returns {React.Component} component with hash parsing behavior
@@ -20,9 +22,6 @@ const HashParserHOC = function (WrappedComponent) {
bindAll(this, [
'handleHashChange'
]);
- this.state = {
- hideIntro: false
- };
}
componentDidMount () {
window.addEventListener('hashchange', this.handleHashChange);
@@ -43,9 +42,6 @@ const HashParserHOC = function (WrappedComponent) {
const hashMatch = window.location.hash.match(/#(\d+)/);
const hashProjectId = hashMatch === null ? defaultProjectId : hashMatch[1];
this.props.setProjectId(hashProjectId.toString());
- if (hashProjectId !== defaultProjectId) {
- this.setState({hideIntro: true});
- }
}
render () {
const {
@@ -58,7 +54,6 @@ const HashParserHOC = function (WrappedComponent) {
} = this.props;
return (
<WrappedComponent
- hideIntro={this.state.hideIntro}
{...componentProps}
/>
);
@@ -77,7 +72,12 @@ const HashParserHOC = function (WrappedComponent) {
};
};
const mapDispatchToProps = dispatch => ({
- setProjectId: projectId => dispatch(setProjectId(projectId))
+ setProjectId: projectId => {
+ dispatch(setProjectId(projectId));
+ if (projectId !== defaultProjectId) {
+ dispatch(closePreviewInfo());
+ }
+ }
});
// Allow incoming props to override redux-provided props. Used to mock in tests.
const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(
diff --git a/src/playground/render-gui.jsx b/src/playground/render-gui.jsx
index 4134b8c5fd5d6248f68bc7cb03e06fc79be2b789..fac1137e927ef1ffa78a2f766dc1d8f1acb2850c 100644
--- a/src/playground/render-gui.jsx
+++ b/src/playground/render-gui.jsx
@@ -37,6 +37,7 @@ export default appTarget => {
<WrappedGui
backpackVisible
showComingSoon
+ showPreviewInfo
backpackHost={backpackHost}
/>,
appTarget);
diff --git a/src/reducers/gui.js b/src/reducers/gui.js
index b41f72452264242a345c6d25a2f74ce0fc506504..4be1fd19a35568c5260ab64a87ab7d23b8097c94 100644
--- a/src/reducers/gui.js
+++ b/src/reducers/gui.js
@@ -80,9 +80,6 @@ const initTutorialCard = function (currentState, deckId) {
{},
currentState,
{
- modals: {
- previewInfo: false
- },
cards: {
visible: true,
content: decks,
@@ -102,13 +99,24 @@ const initTutorialLibrary = function (currentState) {
currentState,
{
modals: {
- previewInfo: false,
tipsLibrary: true
}
}
);
};
+const initPreviewInfo = function (currentState) {
+ return Object.assign(
+ {},
+ currentState,
+ {
+ modals: {
+ previewInfo: true
+ }
+ }
+ );
+};
+
const guiReducer = combineReducers({
alerts: alertsReducer,
assetDrag: assetDragReducer,
@@ -141,6 +149,7 @@ export {
guiMiddleware,
initFullScreen,
initPlayer,
+ initPreviewInfo,
initTutorialCard,
initTutorialLibrary
};
diff --git a/src/reducers/modals.js b/src/reducers/modals.js
index d385f2613f7237f6b45eb4af0b75bb3051adde09..c554536ad1fd342ad8d501b55b676e8e37aa66d2 100644
--- a/src/reducers/modals.js
+++ b/src/reducers/modals.js
@@ -23,7 +23,7 @@ const initialState = {
[MODAL_EXTENSION_LIBRARY]: false,
[MODAL_IMPORT_INFO]: false,
[MODAL_LOADING_PROJECT]: false,
- [MODAL_PREVIEW_INFO]: true,
+ [MODAL_PREVIEW_INFO]: false,
[MODAL_SOUND_LIBRARY]: false,
[MODAL_SPRITE_LIBRARY]: false,
[MODAL_SOUND_RECORDER]: false,