route to final page on complete

ShMcK · ShMcK · commit 4cb98dd95c07 · 2016-03-06T18:06:39.000-08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -20,3 +20,6 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 - smoother setup process
 - style, ui improvements
+
+## [0.5.3] - in progress
+- fix tutorial progress issues
diff --git a/lib/actions/page-actions.js b/lib/actions/page-actions.js
@@ -5,6 +5,9 @@ var package_1 = require('../services/package');
 var _ = require('lodash');
 function setPage(selectedPosition) {
     if (selectedPosition === void 0) { selectedPosition = { chapter: 0, page: 0 }; }
+    if (selectedPosition.completed) {
+        return { type: Type.SET_ROUTE, payload: { route: 'final' } };
+    }
     var page = package_1.default.getPage(selectedPosition);
     var tasks = package_1.default.getTasks(selectedPosition);
     var taskTests = _.flatten(tasks.map(function (task) { return task.tests || []; }));
diff --git a/lib/components/_components.js b/lib/components/_components.js
@@ -15,6 +15,8 @@ var progress_1 = require('./progress/progress');
 exports.Progress = progress_1.default;
 var start_1 = require('./start/start');
 exports.Start = start_1.Start;
+var final_page_1 = require('./final-page/final-page');
+exports.FinalPage = final_page_1.FinalPage;
 var markdown_1 = require('./markdown/markdown');
 exports.MarkdownText = markdown_1.default;
 var alert_1 = require('./alert/alert');
diff --git a/lib/components/app/router.js b/lib/components/app/router.js
@@ -19,6 +19,8 @@ var default_1 = (function (_super) {
                 return React.createElement(_components_1.Progress, {progress: state.progress, position: state.position});
             case 'projects':
                 return React.createElement(_components_1.Start, {tutorials: state.tutorials, warning: state.warning});
+            case 'final':
+                return React.createElement(_components_1.FinalPage, null);
             default:
                 throw 'Error: Route not found.';
         }
diff --git a/lib/components/final-page/final-page.js b/lib/components/final-page/final-page.js
@@ -0,0 +1,3 @@
+"use strict";
+var React = require('react');
+exports.FinalPage = function () { return (React.createElement("div", null, "Final Page")); };
diff --git a/lib/components/menu/menu.js b/lib/components/menu/menu.js
@@ -53,7 +53,7 @@ var default_1 = (function (_super) {
     default_1.prototype.render = function () {
         var origin = { horizontal: 'right', vertical: 'top' };
         var quit = this.props.quit;
-        return (React.createElement(material_ui_1.AppBar, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(material_ui_1.IconButton, {onTouchTap: this.closePanel}, React.createElement(NavigationClose, null)), iconElementRight: React.createElement(material_ui_1.IconMenu, {iconButtonElement: React.createElement(material_ui_1.IconButton, null, React.createElement(MoreVertIcon, null)), targetOrigin: origin, anchorOrigin: origin}, this.menuOptions(), window.coderoad.issuesPath ? React.createElement(material_ui_1.MenuItem, {key: 'issue'}, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue")) : null, React.createElement(material_ui_1.Divider, null), React.createElement(material_ui_1.MenuItem, {primaryText: 'quit', onTouchTap: quit}))}));
+        return (React.createElement(material_ui_1.AppBar, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(material_ui_1.IconButton, {onTouchTap: this.closePanel}, React.createElement(NavigationClose, null)), iconElementRight: React.createElement(material_ui_1.IconMenu, {iconButtonElement: React.createElement(material_ui_1.IconButton, null, React.createElement(MoreVertIcon, null)), targetOrigin: origin, anchorOrigin: origin}, this.menuOptions(), window.coderoad.issuesPath ? React.createElement(material_ui_1.MenuItem, {key: 'issue', className: 'link'}, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue")) : null, React.createElement(material_ui_1.Divider, null), React.createElement(material_ui_1.MenuItem, {primaryText: 'quit', onTouchTap: quit}))}));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch) {
diff --git a/lib/components/page/page.js b/lib/components/page/page.js
@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 var __extends = (this && this.__extends) || function (d, b) {
     for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
     function __() { this.constructor = d; }
@@ -28,7 +28,7 @@ var default_1 = (function (_super) {
         var _a = this.props, page = _a.page, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, tasks = _a.tasks, runTests = _a.runTests;
         var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
         var allComplete = taskPosition >= tasks.length;
-        return (React.createElement(material_ui_1.Paper, {style: pageStyle, zDepth: 1, className: 'cr-page'}, React.createElement(content_1.default, {page: page}), React.createElement(material_ui_1.Divider, null), React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement(hint_1.default, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement("div", {ref: 'listEnd'}), React.createElement(toolbar_1.default, {tasks: tasks, taskPosition: taskPosition, hintPosition: hintPosition})));
+        return (React.createElement(material_ui_1.Paper, {style: pageStyle, zDepth: 1, className: 'cr-page'}, React.createElement(content_1.default, {page: page}), React.createElement(material_ui_1.Divider, null), React.createElement(task_1.Tasks, {tasks: tasks, taskPosition: taskPosition, runTests: runTests}), React.createElement(hint_1.default, {task: currentTask, hintPosition: hintPosition}), React.createElement(page_complete_1.PageCompleteMessage, {page: page}), React.createElement("div", {ref: 'listEnd'}), React.createElement(toolbar_1.default, {tasks: tasks, taskPosition: taskPosition})));
     };
     return default_1;
 }(React.Component));
diff --git a/lib/components/page/toolbar.js b/lib/components/page/toolbar.js
@@ -30,15 +30,19 @@ var default_1 = (function (_super) {
     function default_1() {
         _super.apply(this, arguments);
     }
+    default_1.prototype.getButton = function () {
+        var _a = this.props, callNextPage = _a.callNextPage, showHint = _a.showHint, taskPosition = _a.taskPosition, tasks = _a.tasks;
+        switch (true) {
+            case taskPosition >= tasks.length:
+                return React.createElement(material_ui_1.RaisedButton, {label: 'Continue', primary: true, onTouchTap: callNextPage});
+            default:
+                return React.createElement(material_ui_1.RaisedButton, {label: 'Save', secondary: true, onTouchTap: editor_1.save});
+        }
+    };
     default_1.prototype.render = function () {
-        var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, callNextPage = _a.callNextPage, showHint = _a.showHint;
-        var currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
+        var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition;
         var progress = taskProgress(taskPosition, tasks.length);
-        var allComplete = taskPosition >= tasks.length;
-        return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(ProgressBar, {progress: progress}), React.createElement(material_ui_1.Toolbar, null, React.createElement(material_ui_1.ToolbarGroup, {float: 'right'}, allComplete ?
-            React.createElement(material_ui_1.RaisedButton, {label: 'Continue', primary: true, onTouchTap: callNextPage})
-            :
-                React.createElement(material_ui_1.RaisedButton, {label: 'Save', secondary: true, onTouchTap: editor_1.save})))));
+        return (React.createElement("section", {className: 'cr-page-toolbar'}, React.createElement(ProgressBar, {progress: progress}), React.createElement(material_ui_1.Toolbar, null, React.createElement(material_ui_1.ToolbarGroup, {float: 'right'}, this.getButton()))));
     };
     default_1 = __decorate([
         react_redux_1.connect(null, function (dispatch, state) {
diff --git a/lib/services/package.js b/lib/services/package.js
@@ -84,7 +84,7 @@ var PackageService = (function () {
         }
         else {
             _base_1.store.dispatch(Action.projectComplete());
-            return { chapter: chapter, page: page };
+            return { chapter: chapter, page: page, completed: true };
         }
     };
     PackageService.prototype.getProject = function () {
diff --git a/src/actions/page-actions.ts b/src/actions/page-actions.ts
@@ -4,6 +4,9 @@ import Package from '../services/package';
 const _ = require('lodash');
 
 export function setPage(selectedPosition: CR.Position = { chapter: 0, page: 0 }): CR.Action {
+  if (selectedPosition.completed) {
+    return { type: Type.SET_ROUTE, payload: { route: 'final'} };
+  }
   const page: CR.Page = Package.getPage(selectedPosition);
   const tasks: CR.Task[] = Package.getTasks(selectedPosition);
   const taskTests: CR.TaskTest[] = _.flatten(tasks.map((task) => task.tests || []));
diff --git a/src/components/_components.ts b/src/components/_components.ts
@@ -14,6 +14,7 @@ export {default as Menu} from './menu/menu';
 export {default as Account} from './account/account';
 export {default as Progress} from './progress/progress';
 export {Start} from './start/start';
+export {FinalPage} from './final-page/final-page';
 
 // Common
 export {default as MarkdownText} from './markdown/markdown';
diff --git a/src/components/app/router.tsx b/src/components/app/router.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Page, Progress, Start} from './../_components';
+import {Page, Progress, Start, FinalPage} from './../_components';
 
 export default class extends React.Component<{state: CR.State}, {}> {
   chooseRoute(state: CR.State) {
@@ -17,6 +17,8 @@ export default class extends React.Component<{state: CR.State}, {}> {
                         position={state.position} />;
       case 'projects':
         return <Start tutorials={state.tutorials} warning={state.warning} />;
+      case 'final':
+        return <FinalPage />;
       default:
         throw 'Error: Route not found.';
     }
diff --git a/src/components/final-page/final-page.tsx b/src/components/final-page/final-page.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import {Paper, Divider} from 'material-ui';
+
+export const FinalPage = () => (
+  <div>Final Page</div>
+);
diff --git a/src/components/menu/_menu.less b/src/components/menu/_menu.less
@@ -1,5 +1,10 @@
 .cr {
   .cr-menu-bar {
     z-index: 999 !important;
+
+    a, a:visited, a:link, a:hover {
+      color: black;
+      text-decoration: none;
+    }
   }
 }
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
@@ -77,7 +77,7 @@ export default class extends React.Component<{
         {/* Menu Items */}
         {this.menuOptions()}
 
-        {window.coderoad.issuesPath ? <MenuItem key='issue'>
+        {window.coderoad.issuesPath ? <MenuItem key='issue' className='link'>
           <a href={window.coderoad.issuesPath}>
             post issue
           </a>
diff --git a/src/components/page/page.tsx b/src/components/page/page.tsx
@@ -1,4 +1,3 @@
-'use strict';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {Paper, Divider} from 'material-ui';
@@ -44,7 +43,7 @@ render() {
     <PageCompleteMessage page={page} />
     <div ref='listEnd'></div>
 
-    <PageToolbar tasks={tasks} taskPosition={taskPosition} hintPosition={hintPosition} />
+    <PageToolbar tasks={tasks} taskPosition={taskPosition} />
   </Paper>
   );
   }
diff --git a/src/components/page/toolbar.tsx b/src/components/page/toolbar.tsx
@@ -3,6 +3,7 @@ import {connect} from 'react-redux';
 import * as Action from '../../actions/actions';
 import {LinearProgress, Toolbar, ToolbarGroup, RaisedButton} from 'material-ui';
 import {save} from '../../atom/editor';
+import {store} from '../../_base';
 
 const ProgressBar = ({progress}) => <LinearProgress mode='determinate'
  value={progress} style={{height: '10px'}}/>;
@@ -18,14 +19,22 @@ function taskProgress(current: number, max: number) {
   };
 })
 export default class extends React.Component<{
-  tasks: CR.Task[], taskPosition: number, hintPosition: number,
+  tasks: CR.Task[], taskPosition: number,
   callNextPage?: () => void, callNextTask?: () => void, showHint?: (pos: number) => void
 }, {}> {
+  getButton() {
+    const {callNextPage, showHint, taskPosition, tasks} = this.props;
+    switch (true) {
+      case taskPosition >= tasks.length:
+        return <RaisedButton label='Continue' primary={true} onTouchTap={callNextPage}/>;
+      default:
+        return <RaisedButton label='Save' secondary={true} onTouchTap={save}/>;
+    }
+  }
   render() {
-    const {tasks, taskPosition, hintPosition, callNextPage, showHint} = this.props;
-    const currentTask = taskPosition <= tasks.length ? tasks[taskPosition] : null;
+    const {tasks, taskPosition} = this.props;
     const progress: number = taskProgress(taskPosition, tasks.length);
-    const allComplete = taskPosition >= tasks.length;
+
     return (
     <section className='cr-page-toolbar'>
       <ProgressBar progress={progress} />
@@ -34,13 +43,7 @@ export default class extends React.Component<{
 
       <ToolbarGroup float='right'>
         {/* add log here */}
-
-        {/* check work || continue */}
-        {allComplete ?
-          <RaisedButton label='Continue' primary={true} onTouchTap={callNextPage}/>
-          :
-          <RaisedButton label='Save' secondary={true} onTouchTap={save}/>
-        }
+        {this.getButton()}
       </ToolbarGroup>
 
     </Toolbar>
diff --git a/src/services/package.ts b/src/services/package.ts
@@ -83,7 +83,7 @@ class PackageService {
       return { chapter: chapter + 1, page: 0 };
     } else {
       store.dispatch(Action.projectComplete());
-      return {chapter, page};
+      return {chapter, page, completed: true};
     }
   }
   getProject(): CR.Project {
diff --git a/src/typings/cr/cr.d.ts b/src/typings/cr/cr.d.ts
@@ -51,6 +51,7 @@ declare namespace CR {
   interface Position {
     chapter: number;
     page: number;
+    completed?: boolean;
   }
 
   interface Progress {
diff --git a/src/typings/material-ui/material-ui.d.ts b/src/typings/material-ui/material-ui.d.ts
@@ -37,7 +37,7 @@ declare module "material-ui" {
   export import LeftNav = __MaterialUI.LeftNav; // require('material-ui/lib/left-nav');
   export import LinearProgress = __MaterialUI.LinearProgress; // require('material-ui/lib/linear-progress');
   export import List = __MaterialUI.Lists.List; // require('material-ui/lib/lists/list');
-  export import ListDivider = __MaterialUI.Lists.ListDivider; // require('material-ui/lib/lists/list-divider');
+  export import Divider = __MaterialUI.Divider; // require('material-ui/lib/divider');
   export import ListItem = __MaterialUI.Lists.ListItem; // require('material-ui/lib/lists/list-item');
   export import Menu = __MaterialUI.Menus.Menu; // require('material-ui/lib/menus/menu');
   export import MenuItem = __MaterialUI.Menus.MenuItem; // require('material-ui/lib/menus/menu-item');
diff --git a/styles/styles.css b/styles/styles.css
@@ -32,6 +32,13 @@ atom-panel-container > atom-panel > #crv {
 .cr .cr-menu-bar {
   z-index: 999 !important;
 }
+.cr .cr-menu-bar a,
+.cr .cr-menu-bar a:visited,
+.cr .cr-menu-bar a:link,
+.cr .cr-menu-bar a:hover {
+  color: black;
+  text-decoration: none;
+}
 .cr-chapter {
   border: 2px solid red;
   border-sizing: border-box;
diff --git a/tsconfig.json b/tsconfig.json
@@ -102,6 +102,7 @@
     "src/components/alert/alert.tsx",
     "src/components/app/app.tsx",
     "src/components/app/router.tsx",
+    "src/components/final-page/final-page.tsx",
     "src/components/markdown/markdown.tsx",
     "src/components/menu/menu.tsx",
     "src/components/page/chapter.tsx",

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,8 @@ var default_1 = (function (_super) {`
`19`	`19`	`return React.createElement(_components_1.Progress, {progress: state.progress, position: state.position});`
`20`	`20`	`case 'projects':`
`21`	`21`	`return React.createElement(_components_1.Start, {tutorials: state.tutorials, warning: state.warning});`
	`22`	`+ case 'final':`
	`23`	`+ return React.createElement(_components_1.FinalPage, null);`
`22`	`24`	`default:`
`23`	`25`	`throw 'Error: Route not found.';`
`24`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+"use strict";`
	`2`	`+var React = require('react');`
	`3`	`+exports.FinalPage = function () { return (React.createElement("div", null, "Final Page")); };`
Original file line number	Diff line number	Diff line change
`@@ -84,7 +84,7 @@ var PackageService = (function () {`
`84`	`84`	`}`
`85`	`85`	`else {`
`86`	`86`	`_base_1.store.dispatch(Action.projectComplete());`
`87`		`- return { chapter: chapter, page: page };`
	`87`	`+ return { chapter: chapter, page: page, completed: true };`
`88`	`88`	`}`
`89`	`89`	`};`
`90`	`90`	`PackageService.prototype.getProject = function () {`