setup progress reset button

Author: ShMcK

CHANGELOG.md

@@ -4,6 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [0.12.3] - WIP
 - improved page open. uses `onDidOpen` callback
+- progress reset button
 - improved documentation, tests
 
 ## [0.12.2] - 2016-08-25

lib/actions.js

@@ -18,8 +18,9 @@ var actions_5 = require('./modules/page/actions');
 exports.pageSet = actions_5.pageSet;
 exports.pageNext = actions_5.pageNext;
 var actions_6 = require('./modules/progress/actions');
-exports.progressLoad = actions_6.progressLoad;
 exports.progressCompletePage = actions_6.progressCompletePage;
+exports.progressLoad = actions_6.progressLoad;
+exports.progressReset = actions_6.progressReset;
 var actions_7 = require('./modules/route/actions');
 exports.routeSet = actions_7.routeSet;
 var actions_8 = require('./modules/setup/actions');

lib/components/Progress/index.js

@@ -10,6 +10,7 @@ var actions_1 = require('../../actions');
 var ProgressPage_1 = require('./ProgressPage');
 var List_1 = require('material-ui/List');
 var Paper_1 = require('material-ui/Paper');
+var RaisedButton_1 = require('material-ui/RaisedButton');
 var Subheader_1 = require('material-ui/Subheader');
 var styles = {
     page: {
@@ -18,19 +19,35 @@ var styles = {
     list: {
         margin: '5px',
     },
+    options: {
+        display: 'flex',
+        justifyContent: 'center',
+        marginTop: '10px',
+        opacity: '0.6',
+    },
 };
 var Progress = (function (_super) {
     __extends(Progress, _super);
     function Progress() {
         _super.apply(this, arguments);
     }
+    Progress.prototype.verifyReset = function () {
+        var reset = confirm('Are you sure you want to erase your progress?');
+        if (reset) {
+            this.props.progressReset();
+        }
+    };
     Progress.prototype.render = function () {
         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})); }))
-        ));
+        return (React.createElement("div", null, 
+            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})); }))
+            ), 
+            React.createElement("div", {style: styles.options}, 
+                React.createElement(RaisedButton_1.default, {label: "Reset", onClick: this.verifyReset.bind(this)})
+            )));
     };
     Progress.prototype.componentWillMount = function () {
         this.props.progressLoad();
@@ -42,7 +59,8 @@ var mapStateToProps = function (state) { return ({
     tutorial: state.tutorial,
 }); };
 var mapDispatchToProps = {
-    progressLoad: actions_1.progressLoad
+    progressLoad: actions_1.progressLoad,
+    progressReset: actions_1.progressReset
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(Progress);

lib/modules/progress/actions.js

@@ -44,3 +44,10 @@ function progressCompleteTutorial(completed) {
     };
 }
 exports.progressCompleteTutorial = progressCompleteTutorial;
+function progressReset() {
+    return function (dispatch, getState) {
+        var tutorial = getState().tutorial;
+        dispatch({ type: types_1.PROGRESS_RESET, payload: { tutorial: tutorial } });
+    };
+}
+exports.progressReset = progressReset;

lib/modules/progress/index.js

@@ -1,3 +1,41 @@
 "use strict";
-var reducer_1 = require('./reducer');
-exports.reducer = reducer_1.default;
+var types_1 = require('./types');
+var local_storage_1 = require('./utils/local-storage');
+exports._progress = {
+    completed: false,
+    pages: []
+};
+function getReset(pages) {
+    return {
+        completed: false,
+        pages: pages.map(function () { return false; })
+    };
+}
+function progress(progress, action) {
+    if (progress === void 0) { progress = exports._progress; }
+    switch (action.type) {
+        case types_1.PROGRESS_LOAD:
+            var saved = local_storage_1.loadProgressFromLocalStorage(action.payload.tutorial);
+            if (saved) {
+                return saved;
+            }
+            return getReset(action.payload.tutorial.pages);
+        case types_1.PROGRESS_COMPLETE_PAGE:
+            var _a = action.payload, tutorial = _a.tutorial, pagePosition = _a.pagePosition, completed = _a.completed;
+            progress.pages[pagePosition] = completed;
+            local_storage_1.saveToLocalStorage(tutorial, progress);
+            return progress;
+        case types_1.PROGRESS_COMPLETE_TUTORIAL:
+            progress.completed = action.payload.completed;
+            local_storage_1.saveToLocalStorage(action.payload.tutorial, progress);
+            return progress;
+        case types_1.PROGRESS_RESET:
+            var reset = getReset(action.payload.tutorial.pages);
+            local_storage_1.saveToLocalStorage(action.payload.tutorial, reset);
+            return reset;
+        default:
+            return progress;
+    }
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = progress;

lib/modules/progress/types.js

@@ -3,3 +3,4 @@ exports.PROGRESS_COMPLETE_PAGE = 'PROGRESS_COMPLETE_PAGE';
 exports.PROGRESS_COMPLETE_TUTORIAL = 'PROGRESS_COMPLETE_TUTORIAL';
 exports.PROGRESS_LOAD = 'PROGRESS_LOAD';
 exports.PROGRESS_PAGE_POSITION = 'PROGRESS_PAGE_POSITION';
+exports.PROGRESS_RESET = 'PROGRESS_RESET';

lib/reducers.js

@@ -15,7 +15,7 @@ var window_1 = require('./modules/window');
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = redux_1.combineReducers({
     alert: alert_1.default, checks: setup_1.checks, editor: editor_1.reducer, dir: dir_1.default, hintPosition: hints_1.default,
-    packageJson: setup_1.packageJson, pagePosition: page_1.pagePosition, progress: progress_1.reducer, route: route_1.reducer,
+    packageJson: setup_1.packageJson, pagePosition: page_1.pagePosition, progress: progress_1.default, route: route_1.reducer,
     tutorial: tutorial_1.reducer, tutorials: tutorials_1.reducer,
     taskActions: page_1.taskActions, taskPosition: tests_1.taskPosition, testRun: tests_1.testRun, window: window_1.reducer
 });

src/actions.ts

@@ -3,7 +3,7 @@ export {editorDevToolsToggle, editorOpen, editorInsert} from './modules/editor/a
 export {editorSave, editorSet, editorWriteFileFromFile, editorWriteFileFromContent} from './modules/editor/actions';
 export {hintPositionSet} from './modules/hints/actions';
 export {pageSet, pageNext} from './modules/page/actions';
-export {progressLoad, progressCompletePage} from './modules/progress/actions';
+export {progressCompletePage, progressLoad, progressReset} from './modules/progress/actions';
 export {routeSet} from './modules/route/actions';
 export {setupVerify, setupPackage} from './modules/setup/actions';
 export {testLoad, testRun, testResult, testComplete} from './modules/tests/actions';

src/components/Progress/index.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 
-import {progressLoad} from '../../actions';
+import {progressLoad, progressReset} from '../../actions';
 import ProgressPage from './ProgressPage';
 import {List} from 'material-ui/List';
 import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
 import Subheader from 'material-ui/Subheader';
 
 const styles = {
@@ -14,14 +15,28 @@ const styles = {
   list: {
     margin: '5px',
   },
+  options: {
+    display: 'flex',
+    justifyContent: 'center',
+    marginTop: '10px',
+    opacity: '0.6',
+  },
 };
 
 class Progress extends React.Component<{
-    info: Tutorial.Info, tutorial: CR.Tutorial, progressLoad: () => any,
+    info: Tutorial.Info, tutorial: CR.Tutorial,
+    progressLoad: () => any, progressReset: () => any
 }, {}> {
+  public verifyReset() {
+    const reset = confirm('Are you sure you want to erase your progress?');
+    if (reset) {
+      this.props.progressReset();
+    }
+  }
   public render() {
     const {info, tutorial} = this.props;
     return (
+    <div>
       <Paper style={styles.page}>
         <List style={styles.list}>
           <Subheader>{info.title}</Subheader>
@@ -35,6 +50,13 @@ class Progress extends React.Component<{
         }
         </List>
       </Paper>
+      <div style={styles.options}>
+       <RaisedButton
+          label="Reset"
+          onClick={this.verifyReset.bind(this)}
+        />
+      </div>
+    </div>
     );
   }
   private componentWillMount() {
@@ -48,7 +70,8 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
-  progressLoad
+  progressLoad,
+  progressReset
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Progress);

src/modules/progress/index.ts

@@ -6,6 +6,13 @@ export const _progress: CR.Progress = {
   pages: []
 };
 
+function getReset(pages: boolean[]) {
+  return {
+    completed: false,
+    pages: pages.map(() => false)
+  };
+}
+
 /**
  * Progress reducer saves local tutorial progress
  * @param  {} progress=_progress
@@ -22,10 +29,7 @@ export default function progress(
       const saved = loadProgressFromLocalStorage(action.payload.tutorial);
       if (saved) { return saved; }
       // set progress defaults
-      return {
-        completed: false,
-        pages: action.payload.tutorial.pages.map(() => false)
-      };
+      return getReset(action.payload.tutorial.pages);
 
     case PROGRESS_COMPLETE_PAGE:
       const {tutorial, pagePosition, completed} = action.payload;
@@ -39,8 +43,9 @@ export default function progress(
       return progress;
 
     case PROGRESS_RESET:
-      saveToLocalStorage(action.payload.tutorial, _progress);
-      return _progress;
+      const reset = getReset(action.payload.tutorial.pages);
+      saveToLocalStorage(action.payload.tutorial, reset);
+      return reset;
 
     default:
       return progress;