progress changing position to page-position

Author: ShMcK

lib/actions/page.js

@@ -13,7 +13,7 @@ function pageNext() {
     }
     else {
         pagePosition = pagePosition + 1;
-        store_1.default.dispatch(test_1.testsLoad(pagePosition));
+        setTimeout(function () { return store_1.default.dispatch(test_1.testsLoad(pagePosition)); });
         return {
             payload: { pagePosition: pagePosition },
             type: _types_1.PAGE_SET,
@@ -23,7 +23,7 @@ function pageNext() {
 exports.pageNext = pageNext;
 function pageSet(pagePosition) {
     if (pagePosition === void 0) { pagePosition = 0; }
-    if (store_1.default.getState().progress.pages[pagePosition]) {
+    if (pagePosition >= store_1.default.getState().progress.pages.length) {
         return {
             payload: { route: 'final' },
             type: _types_1.ROUTE_SET,

lib/components/Progress/ProgressPage/index.js

@@ -31,8 +31,9 @@ var ProgressPage = (function (_super) {
     ProgressPage.prototype.render = function () {
         var _a = this.props, page = _a.page, pagePosition = _a.pagePosition, index = _a.index, progress = _a.progress, selectPage = _a.selectPage;
         var isCompleted = progress.pages[index] || false;
-        var canActivate = index >= pagePosition;
-        return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, !canActivate ? { color: colors_1.grey400 } : {}), primaryText: (index + 1) + ". " + page.title, secondaryText: page.description, leftIcon: progressIcon_1.progressIcon(isCompleted, index === pagePosition), onClick: canActivate
+        var canActivate = index <= pagePosition + 1;
+        var isCurrentPage = index === pagePosition;
+        return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles, !canActivate ? { color: colors_1.grey400 } : {}), primaryText: (index + 1) + ". " + page.title, secondaryText: page.description, leftIcon: progressIcon_1.progressIcon(isCompleted, isCurrentPage), onClick: canActivate
             ? selectPage.bind(this, index)
             : function () { return; }}));
     };

lib/components/Progress/progressIcon.js

@@ -4,8 +4,8 @@ var colors_1 = require('material-ui/styles/colors');
 var check_box_1 = require('material-ui/svg-icons/toggle/check-box');
 var play_circle_filled_1 = require('material-ui/svg-icons/av/play-circle-filled');
 var check_box_outline_blank_1 = require('material-ui/svg-icons/toggle/check-box-outline-blank');
-function progressIcon(completed, current) {
-    if (completed) {
+function progressIcon(isCompleted, current) {
+    if (isCompleted) {
         return React.createElement(check_box_1.default, {style: { fill: colors_1.green300 }});
     }
     else if (current) {

lib/reducers/page-position/index.js

@@ -6,12 +6,8 @@ function pagePositionReducer(pagePosition, action) {
     switch (action.type) {
         case _types_1.PAGE_POSITION_LOAD:
             var pages = store_1.default.getState().progress.pages;
-            pagePosition = pages.indexOf(function (x) { return x; }) + 1;
-            console.log('expected pagePosition', pagePosition, pages);
-            if (pagePosition >= pages.length) {
-                pagePosition = pages.length - 1;
-            }
-            return pagePosition;
+            var firstFail = pages.indexOf(function (x) { return !x; });
+            return firstFail > 0 ? firstFail : pages.length - 1;
         case _types_1.PAGE_SET:
         case _types_1.PAGE_POSITION_SET:
             return action.payload.pagePosition;

src/actions/page.ts

@@ -14,7 +14,7 @@ export function pageNext(): Action {
     };
   } else {
     pagePosition = pagePosition + 1;
-    store.dispatch(testsLoad(pagePosition));
+    setTimeout(() => store.dispatch(testsLoad(pagePosition)));
     return {
       payload: { pagePosition },
       type: PAGE_SET,
@@ -23,7 +23,8 @@ export function pageNext(): Action {
 }
 
 export function pageSet(pagePosition = 0): Action {
-  if (store.getState().progress.pages[pagePosition]) {
+  // beyond the final page
+  if (pagePosition >= store.getState().progress.pages.length) {
     return {
       payload: { route: 'final' },
       type: ROUTE_SET,

src/components/Progress/ProgressPage/index.tsx

@@ -25,15 +25,16 @@ export class ProgressPage extends React.Component<{
   pagePosition: CR.PagePosition, index: number, selectPage?: () => void}, {}> {
   render() {
     const {page, pagePosition, index, progress, selectPage} = this.props;
-    const isCompleted = progress.pages[index] || false;
-    const canActivate = index >= pagePosition;
+    const isCompleted: boolean = progress.pages[index] || false;
+    const canActivate: boolean = index <= pagePosition + 1;
+    const isCurrentPage: boolean = index === pagePosition;
     return (
       <ListItem
         key={index}
         style={Object.assign({}, styles, !canActivate ? {color: grey400} : {})}
         primaryText={`${index + 1}. ${page.title}`}
         secondaryText={page.description}
-        leftIcon={progressIcon(isCompleted, index === pagePosition)}
+        leftIcon={progressIcon(isCompleted, isCurrentPage)}
         onClick={
           canActivate
             ? selectPage.bind(this, index)

src/components/Progress/progressIcon.tsx

@@ -4,8 +4,8 @@ import CheckBox from 'material-ui/svg-icons/toggle/check-box';
 import PlayCircleFilled from 'material-ui/svg-icons/av/play-circle-filled';
 import CheckBoxOutlineBlank from 'material-ui/svg-icons/toggle/check-box-outline-blank';
 
-export function progressIcon(completed: boolean, current?: boolean) {
-  if (completed) {
+export function progressIcon(isCompleted: boolean, current?: boolean) {
+  if (isCompleted) {
     return <CheckBox style={{fill: green300}} />;
   } else if (current) {
     return <PlayCircleFilled style={{fill: pink500}} />;

src/reducers/editor-actions/index.ts

@@ -37,6 +37,7 @@ export default function editorActionsReducer(
         currentTaskPosition = nextTaskPosition;
       }
       return actions;
+
     default:
       return editorActions;
   }

src/reducers/page-position/index.ts

@@ -9,13 +9,8 @@ export default function pagePositionReducer(
   switch (action.type) {
     case PAGE_POSITION_LOAD:
       const pages = store.getState().progress.pages;
-      pagePosition = pages.indexOf(x => x) + 1;
-      console.log('expected pagePosition', pagePosition, pages);
-      // all pages complete ? page = -1
-      if (pagePosition >= pages.length) {
-        pagePosition = pages.length - 1;
-      }
-      return pagePosition;
+      const firstFail = pages.indexOf(x => !x);
+      return firstFail > 0 ? firstFail : pages.length - 1;
     case PAGE_SET:
     case PAGE_POSITION_SET:
       return action.payload.pagePosition;