Merge pull request #3725 from chrisgarrity/issue/www-2281-tutorials

Handle ?tutorial= query in gui

Author: chrisgarrity

src/containers/gui.jsx

@@ -13,6 +13,8 @@ import {
     getIsShowingProject
 } from '../reducers/project-state';
 import {setProjectTitle} from '../reducers/project-title';
+import {detectTutorialId} from '../lib/tutorial-from-url';
+import {activateDeck} from '../reducers/cards';
 import {
     activateTab,
     BLOCKS_TAB_INDEX,
@@ -47,6 +49,7 @@ class GUI extends React.Component {
     componentDidMount () {
         this.setReduxTitle(this.props.projectTitle);
         this.props.onStorageInit(storage);
+        this.setActiveCards(detectTutorialId());
     }
     componentDidUpdate (prevProps) {
         if (this.props.projectId !== prevProps.projectId && this.props.projectId !== null) {
@@ -65,6 +68,11 @@ class GUI extends React.Component {
             this.props.onUpdateReduxProjectTitle(newTitle);
         }
     }
+    setActiveCards (tutorialId) {
+        if (tutorialId && tutorialId !== 'all') {
+            this.props.onUpdateReduxDeck(tutorialId);
+        }
+    }
     render () {
         if (this.props.isError) {
             throw new Error(
@@ -80,6 +88,7 @@ class GUI extends React.Component {
             isShowingProject,
             onStorageInit,
             onUpdateProjectId,
+            onUpdateReduxDeck,
             onUpdateReduxProjectTitle,
             projectHost,
             projectId,
@@ -119,6 +128,7 @@ GUI.propTypes = {
     onStorageInit: PropTypes.func,
     onUpdateProjectId: PropTypes.func,
     onUpdateProjectTitle: PropTypes.func,
+    onUpdateReduxDeck: PropTypes.func,
     onUpdateReduxProjectTitle: PropTypes.func,
     previewInfoVisible: PropTypes.bool,
     projectHost: PropTypes.string,
@@ -169,6 +179,7 @@ const mapDispatchToProps = dispatch => ({
     onActivateSoundsTab: () => dispatch(activateTab(SOUNDS_TAB_INDEX)),
     onRequestCloseBackdropLibrary: () => dispatch(closeBackdropLibrary()),
     onRequestCloseCostumeLibrary: () => dispatch(closeCostumeLibrary()),
+    onUpdateReduxDeck: tutorialId => dispatch(activateDeck(tutorialId)),
     onUpdateReduxProjectTitle: title => dispatch(setProjectTitle(title))
 });
 

src/index.js

@@ -1,7 +1,6 @@
 import GUI from './containers/gui.jsx';
 import AppStateHOC from './lib/app-state-hoc.jsx';
-import {detectTutorialId} from './lib/tutorial-from-url';
-import GuiReducer, {guiInitialState, guiMiddleware, initFullScreen, initPlayer, initTutorialCard} from './reducers/gui';
+import GuiReducer, {guiInitialState, guiMiddleware, initFullScreen, initPlayer} from './reducers/gui';
 import LocalesReducer, {localesInitialState, initLocale} from './reducers/locales';
 import {ScratchPaintReducer} from 'scratch-paint';
 import {setFullScreen, setPlayer} from './reducers/mode';
@@ -25,7 +24,5 @@ export {
     initLocale,
     localesInitialState,
     setFullScreen,
-    setPlayer,
-    detectTutorialId,
-    initTutorialCard
+    setPlayer
 };

src/lib/app-state-hoc.jsx

@@ -31,6 +31,10 @@ 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') {
@@ -52,7 +56,6 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
                     guiMiddleware,
                     initFullScreen,
                     initPlayer,
-                    initTutorialCard,
                     initTutorialLibrary
                 } = guiRedux;
                 const {ScratchPaintReducer} = require('scratch-paint');
@@ -67,16 +70,11 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
                     }
                 } else {
                     const tutorialId = detectTutorialId();
-                    if (tutorialId !== null) {
-                        // When loading a tutorial from the URL,
-                        // load w/o preview modal
-                        // open requested tutorial card or tutorials library modal for 'all'
-                        if (tutorialId === 'all') {
-                            initializedGui = initTutorialLibrary(initializedGui);
-                        } else {
-                            initializedGui = initTutorialCard(initializedGui, tutorialId);
-                        }
-                    }
+                    // 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;
                 }
                 reducers = {
                     locales: localesReducer,
@@ -111,10 +109,13 @@ const AppStateHOC = function (WrappedComponent, localesOnly) {
                 isPlayerOnly, // eslint-disable-line no-unused-vars
                 ...componentProps
             } = this.props;
+            if (this.state.tutorial) componentProps.hideIntro = true;
             return (
                 <Provider store={this.store}>
                     <ConnectedIntlProvider>
-                        <WrappedComponent {...componentProps} />
+                        <WrappedComponent
+                            {...componentProps}
+                        />
                     </ConnectedIntlProvider>
                 </Provider>
             );