update tutorial button

ShMcK · ShMcK · commit 9e774ce284f4 · 2016-04-14T16:10:56.000+08:00
diff --git a/lib/actions/actionTypes.js b/lib/actions/actionTypes.js
@@ -3,6 +3,7 @@ exports.SET_PROJECT = 'SET_PROJECT';
 exports.VERIFY_SETUP = 'VERIFY_SETUP';
 exports.SET_GLOBALS = 'SET_GLOBALS';
 exports.LOAD_TUTORIALS = 'LOAD_TUTORIALS';
+exports.UPDATE_TUTORIAL = 'UPDATE_TUTORIAL';
 exports.SET_ROUTE = 'SET_ROUTE';
 exports.SET_PAGE = 'SET_PAGE';
 exports.NEXT_PAGE = 'NEXT_PAGE';
diff --git a/lib/actions/actions.js b/lib/actions/actions.js
@@ -53,6 +53,7 @@ exports.testResult = task_actions_1.testResult;
 exports.setHintPosition = task_actions_1.setHintPosition;
 var tutorials_1 = require('./tutorials');
 exports.loadTutorials = tutorials_1.loadTutorials;
+exports.updateTutorial = tutorials_1.updateTutorial;
 var alert_1 = require('./alert');
 exports.toggleAlert = alert_1.toggleAlert;
 exports.replayAlert = alert_1.replayAlert;
diff --git a/lib/actions/tutorials.js b/lib/actions/tutorials.js
@@ -4,3 +4,7 @@ function loadTutorials() {
     return { type: Type.LOAD_TUTORIALS };
 }
 exports.loadTutorials = loadTutorials;
+function updateTutorial(name) {
+    return { type: Type.UPDATE_TUTORIAL, payload: { name: name } };
+}
+exports.updateTutorial = updateTutorial;
diff --git a/lib/components/tutorials/tutorials.js b/lib/components/tutorials/tutorials.js
@@ -21,6 +21,7 @@ var table_row_1 = require('material-ui/lib/table/table-row');
 var table_header_1 = require('material-ui/lib/table/table-header');
 var table_row_column_1 = require('material-ui/lib/table/table-row-column');
 var table_body_1 = require('material-ui/lib/table/table-body');
+var file_upload_1 = require('material-ui/lib/svg-icons/file/file-upload');
 var react_redux_1 = require('react-redux');
 var Action = require('../../actions/actions');
 var TutorialList = (function (_super) {
@@ -39,9 +40,11 @@ var TutorialList = (function (_super) {
     };
     TutorialList.prototype.render = function () {
         var _this = this;
-        var _a = this.props, tutorials = _a.tutorials, loadTutorials = _a.loadTutorials, selectTutorial = _a.selectTutorial, toggleAlert = _a.toggleAlert;
+        var _a = this.props, tutorials = _a.tutorials, loadTutorials = _a.loadTutorials, selectTutorial = _a.selectTutorial, toggleAlert = _a.toggleAlert, updateTutorial = _a.updateTutorial;
         return (React.createElement("div", {className: 'cr-tutorials'}, React.createElement(table_1.default, null, React.createElement(table_header_1.default, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(table_row_1.default, null, React.createElement(table_header_column_1.default, null, "Tutorial"), React.createElement(table_header_column_1.default, null, "Version"))), React.createElement(table_body_1.default, {displayRowCheckbox: false}, tutorials.map(function (tutorial, index) {
-            return (React.createElement(table_row_1.default, null, React.createElement(table_row_column_1.default, null, React.createElement(flat_button_1.default, {label: _this.trim(tutorial.name), primary: true, onTouchTap: selectTutorial.bind(_this, tutorial)})), React.createElement(table_row_column_1.default, null, tutorial.version), "/>"));
+            return (React.createElement(table_row_1.default, null, React.createElement(table_row_column_1.default, null, React.createElement(flat_button_1.default, {label: _this.trim(tutorial.name), primary: true, onTouchTap: selectTutorial.bind(_this, tutorial)})), React.createElement(table_row_column_1.default, null, tutorial.version, " ", tutorial.latest
+                ? React.createElement(file_upload_1.default, {onClick: updateTutorial(tutorial.name)})
+                : null), "/>"));
         }))), React.createElement("br", null), React.createElement(flat_button_1.default, {style: { margin: '0 auto' }, label: 'Check for Tutorials', secondary: true, onTouchTap: loadTutorials})));
     };
     TutorialList = __decorate([
@@ -56,6 +59,9 @@ var TutorialList = (function (_super) {
                 },
                 loadTutorials: function () {
                     dispatch(Action.loadTutorials());
+                },
+                updateTutorial: function (name) {
+                    dispatch(Action.updateTutorial(name));
                 }
             };
         }), 
diff --git a/lib/reducers/tutorials/tutorials.js b/lib/reducers/tutorials/tutorials.js
@@ -1,9 +1,12 @@
 "use strict";
 var Type = require('../../actions/actionTypes');
 var check_tutorials_1 = require('./check-tutorials');
+var update_tutorial_1 = require('./update-tutorial');
 function tutorialsReducer(tutorials, action) {
     if (tutorials === void 0) { tutorials = []; }
     switch (action.type) {
+        case Type.UPDATE_TUTORIAL:
+            update_tutorial_1.updateTutorial(action.payload.name);
         case Type.LOAD_TUTORIALS:
             var packageJson = check_tutorials_1.loadRootPackageJson();
             if (!!packageJson) {
diff --git a/lib/reducers/tutorials/update-tutorial.js b/lib/reducers/tutorials/update-tutorial.js
@@ -1,5 +1,7 @@
 "use strict";
 var command_line_1 = require('../../services/command-line');
+var store_1 = require('../../store/store');
+var Action = require('../../actions/actions');
 function canUpdateTutorial(name, currentVersion) {
     var isLatest = command_line_1.default('npm', "outdated " + name)
         .then(function (res) {
@@ -12,3 +14,10 @@ function canUpdateTutorial(name, currentVersion) {
     });
 }
 exports.canUpdateTutorial = canUpdateTutorial;
+function updateTutorial(name) {
+    command_line_1.default('npm', "install --save-dev " + name)
+        .then(function () {
+        store_1.store.dispatch(Action.loadTutorials());
+    });
+}
+exports.updateTutorial = updateTutorial;
diff --git a/src/actions/actionTypes.ts b/src/actions/actionTypes.ts
@@ -3,6 +3,7 @@ export const SET_PROJECT = 'SET_PROJECT';
 export const VERIFY_SETUP = 'VERIFY_SETUP';
 export const SET_GLOBALS = 'SET_GLOBALS';
 export const LOAD_TUTORIALS = 'LOAD_TUTORIALS';
+export const UPDATE_TUTORIAL = 'UPDATE_TUTORIAL';
 
 // Navigation
 export const SET_ROUTE = 'SET_ROUTE';
diff --git a/src/actions/actions.ts b/src/actions/actions.ts
@@ -51,7 +51,7 @@ export {pageComplete, chapterComplete, projectComplete} from './progress-actions
 export {showHint, runTests, testComplete, testResult, setHintPosition} from './task-actions';
 
 /* Tutorials */
-export {loadTutorials} from './tutorials';
+export {loadTutorials, updateTutorial} from './tutorials';
 
 /* Alert */
 export {toggleAlert, replayAlert} from './alert';
diff --git a/src/actions/tutorials.ts b/src/actions/tutorials.ts
@@ -3,3 +3,7 @@ import * as Type from './actionTypes';
 export function loadTutorials(): CR.Action {
   return { type: Type.LOAD_TUTORIALS };
 }
+
+export function updateTutorial(name: string): CR.Action {
+  return { type: Type.UPDATE_TUTORIAL, payload: { name } };
+}
diff --git a/src/components/page/toolbar.tsx b/src/components/page/toolbar.tsx
@@ -8,7 +8,7 @@ import RaisedButton from 'material-ui/lib/raised-button';
 import FlatButton from 'material-ui/lib/flat-button';
 import {save} from '../../atom/editor';
 import {toggleDevTools} from '../../atom/actions';
-import {store} from '../store/store';
+import {store} from '../../store/store';
 import Code from 'material-ui/lib/svg-icons/action/code';
 
 const ProgressBar = ({progress}) => <LinearProgress mode='determinate'
diff --git a/src/components/tutorials/tutorials.tsx b/src/components/tutorials/tutorials.tsx
@@ -6,6 +6,7 @@ import TableRow from 'material-ui/lib/table/table-row';
 import TableHeader from 'material-ui/lib/table/table-header';
 import TableRowColumn from 'material-ui/lib/table/table-row-column';
 import TableBody from 'material-ui/lib/table/table-body';
+import FileUpload from 'material-ui/lib/svg-icons/file/file-upload';
 import {MarkdownText} from '../_components';
 import {connect} from 'react-redux';
 import * as Action from '../../actions/actions';
@@ -21,12 +22,16 @@ import * as Action from '../../actions/actions';
     },
     loadTutorials: () => {
       dispatch(Action.loadTutorials());
+    },
+    updateTutorial: (name: string) => {
+      dispatch(Action.updateTutorial(name));
     }
   };
 })
 class TutorialList extends React.Component<{
   tutorials: CR.Tutorial[], loadTutorials?: () => void,
-  selectTutorial?: (tutorial: CR.Tutorial) => void, toggleAlert?: (item: CR.Alert) => void
+  selectTutorial?: (tutorial: CR.Tutorial) => void,
+  toggleAlert?: (item: CR.Alert) => void, updateTutorial?: any
 }, {}> {
     trim(name: string): string {
       if (name.match(/^coderoad-tutorial-/)) {
@@ -38,7 +43,7 @@ class TutorialList extends React.Component<{
       return name;
     }
   render() {
-    const {tutorials, loadTutorials, selectTutorial, toggleAlert} = this.props;
+    const {tutorials, loadTutorials, selectTutorial, toggleAlert, updateTutorial} = this.props;
     return (
   <div className='cr-tutorials'>
     <Table>
@@ -58,7 +63,11 @@ class TutorialList extends React.Component<{
             <TableRowColumn>
             <FlatButton label={this.trim(tutorial.name)} primary={true} onTouchTap={selectTutorial.bind(this, tutorial)} />
             </TableRowColumn>
-            <TableRowColumn>{tutorial.version}</TableRowColumn>
+            <TableRowColumn>
+            {tutorial.version} {tutorial.latest
+              ? <FileUpload onClick={updateTutorial(tutorial.name)} />
+              : null}
+            </TableRowColumn>
             />
           </TableRow>
           );
diff --git a/src/reducers/tutorials/tutorials.ts b/src/reducers/tutorials/tutorials.ts
@@ -1,8 +1,12 @@
 import * as Type from '../../actions/actionTypes';
 import {loadRootPackageJson, searchForTutorials} from './check-tutorials';
+import {updateTutorial} from './update-tutorial';
 
 export default function tutorialsReducer(tutorials = [], action: CR.Action): CR.Tutorial[] {
   switch (action.type) {
+    case Type.UPDATE_TUTORIAL:
+      updateTutorial(action.payload.name);
+      /* jshint: fall through */
     case Type.LOAD_TUTORIALS:
       let packageJson: PackageJson = loadRootPackageJson();
       if (!!packageJson) {
diff --git a/src/reducers/tutorials/update-tutorial.ts b/src/reducers/tutorials/update-tutorial.ts
@@ -1,4 +1,6 @@
 import commandLine from '../../services/command-line';
+import {store} from '../../store/store';
+import * as Action from '../../actions/actions';
 
 export function canUpdateTutorial(name: string, currentVersion: string): string|void {
   let isLatest = commandLine('npm', `outdated ${name}`)
@@ -10,3 +12,10 @@ export function canUpdateTutorial(name: string, currentVersion: string): string|
     }
   });
 }
+
+export function updateTutorial(name: string): void {
+  commandLine('npm', `install --save-dev ${name}`)
+  .then(() => {
+    store.dispatch(Action.loadTutorials());
+  });
+}

Original file line number	Diff line number	Diff line change
`@@ -4,3 +4,7 @@ function loadTutorials() {`
`4`	`4`	`return { type: Type.LOAD_TUTORIALS };`
`5`	`5`	`}`
`6`	`6`	`exports.loadTutorials = loadTutorials;`
	`7`	`+function updateTutorial(name) {`
	`8`	`+ return { type: Type.UPDATE_TUTORIAL, payload: { name: name } };`
	`9`	`+}`
	`10`	`+exports.updateTutorial = updateTutorial;`
Original file line number	Diff line number	Diff line change
`@@ -3,3 +3,7 @@ import * as Type from './actionTypes';`
`3`	`3`	`export function loadTutorials(): CR.Action {`
`4`	`4`	`return { type: Type.LOAD_TUTORIALS };`
`5`	`5`	`}`
	`6`	`+`
	`7`	`+export function updateTutorial(name: string): CR.Action {`
	`8`	`+ return { type: Type.UPDATE_TUTORIAL, payload: { name } };`
	`9`	`+}`