repair progress page loading

Author: ShMcK

lib/components/Progress/ProgressPage/index.js

@@ -5,6 +5,8 @@ var __extends = (this && this.__extends) || function (d, b) {
     d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
 };
 var React = require('react');
+var react_redux_1 = require('react-redux');
+var actions_1 = require('../../../actions');
 var progressIcon_1 = require('../progressIcon');
 var List_1 = require('material-ui/List');
 var colors_1 = require('material-ui/styles/colors');
@@ -29,5 +31,17 @@ var ProgressPage = (function (_super) {
     return ProgressPage;
 }(React.Component));
 ;
+var mapStateToProps = function (state, props) { return ({
+    progress: state.progress,
+    pagePosition: state.pagePosition,
+    page: props.page,
+    index: props.index,
+}); };
+var mapDispatchToProps = function (dispatch) { return ({
+    selectPage: function (pagePosition) {
+        dispatch(actions_1.pageSet(pagePosition));
+        dispatch(actions_1.routeSet('page'));
+    }
+}); };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = ProgressPage;
+exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ProgressPage);

lib/components/Progress/index.js

@@ -25,11 +25,11 @@ var Progress = (function (_super) {
         _super.apply(this, arguments);
     }
     Progress.prototype.render = function () {
-        var _a = this.props, progress = _a.progress, pagePosition = _a.pagePosition, info = _a.info, tutorial = _a.tutorial, selectPage = _a.selectPage;
+        var _a = this.props, info = _a.info, tutorial = _a.tutorial;
         return (React.createElement(Paper_1.default, {style: styles.page}, 
             React.createElement(List_1.List, {style: styles.list}, 
                 React.createElement(Subheader_1.default, null, info.title), 
-                tutorial.pages.map(function (page, index) { return (React.createElement(ProgressPage_1.default, {key: index, index: index, page: page, pagePosition: pagePosition, progress: progress, selectPage: selectPage})); }))
+                tutorial.pages.map(function (page, index) { return (React.createElement(ProgressPage_1.default, {key: index, index: index, page: page})); }))
         ));
     };
     Progress.prototype.componentWillMount = function () {
@@ -38,17 +38,11 @@ var Progress = (function (_super) {
     return Progress;
 }(React.Component));
 var mapStateToProps = function (state) { return ({
-    progress: state.progress,
-    pagePosition: state.pagePosition,
     info: state.tutorial.info,
     tutorial: state.tutorial,
 }); };
-var mapDispatchToProps = function (dispatch) { return ({
-    selectPage: function (pagePosition) {
-        dispatch(actions_1.pageSet(pagePosition));
-        dispatch(actions_1.routeSet('page'));
-    },
+var mapDispatchToProps = {
     progressLoad: actions_1.progressLoad
-}); };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(Progress);

lib/store.js

@@ -4,5 +4,5 @@ var reducers_1 = require('./reducers');
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = configureStore_1.default({
     reducer: reducers_1.default,
-    devMode: false,
+    devMode: true,
 });

src/components/Progress/ProgressPage/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 
+import {pageSet, routeSet} from '../../../actions';
 import progressIcon from '../progressIcon';
 import {ListItem} from 'material-ui/List';
 import {grey400} from 'material-ui/styles/colors';
@@ -34,6 +35,18 @@ class ProgressPage extends React.Component<{
   };
 };
 
+const mapStateToProps = (state, props) => ({
+  progress: state.progress,
+  pagePosition: state.pagePosition,
+  page: props.page,
+  index: props.index,
+});
 
+const mapDispatchToProps = dispatch => ({
+  selectPage(pagePosition: CR.PagePosition) {
+    dispatch(pageSet(pagePosition));
+    dispatch(routeSet('page'));
+  }
+});
 
-export default ProgressPage;
+export default connect(mapStateToProps, mapDispatchToProps)(ProgressPage);

src/components/Progress/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 
-import {pageSet, routeSet, progressLoad} from '../../actions';
+import {progressLoad} from '../../actions';
 import ProgressPage from './ProgressPage';
 import {List} from 'material-ui/List';
 import Paper from 'material-ui/Paper';
@@ -17,12 +17,10 @@ const styles = {
 };
 
 class Progress extends React.Component<{
-    progress: CR.Progress, pagePosition: CR.PagePosition,
     info: Tutorial.Info, tutorial: CR.Tutorial, progressLoad: () => any,
-    selectPage: (pagePosition: CR.PagePosition) => any,
 }, {}> {
   public render() {
-    const {progress, pagePosition, info, tutorial, selectPage} = this.props;
+    const {info, tutorial} = this.props;
     return (
       <Paper style={styles.page}>
         <List style={styles.list}>
@@ -32,9 +30,6 @@ class Progress extends React.Component<{
               key={index}
               index={index}
               page={page}
-              pagePosition={pagePosition}
-              progress={progress}
-              selectPage={selectPage}
             />
          ))
         }
@@ -48,18 +43,12 @@ class Progress extends React.Component<{
 }
 
 const mapStateToProps = state => ({
-  progress: state.progress,
-  pagePosition: state.pagePosition,
   info: state.tutorial.info,
   tutorial: state.tutorial,
 });
 
-const mapDispatchToProps = dispatch => ({
-  selectPage(pagePosition: CR.PagePosition) {
-    dispatch(pageSet(pagePosition));
-    dispatch(routeSet('page'));
-  },
+const mapDispatchToProps = {
   progressLoad
-});
+};
 
 export default connect(mapStateToProps, mapDispatchToProps)(Progress);

src/store.ts

@@ -3,5 +3,5 @@ import reducer from './reducers';
 
 export default configureStore({
   reducer,
-  devMode: false,
+  devMode: true,
 });