update tutorial button with icon

ShMcK · ShMcK · commit 63f7bce0aaa0 · 2016-04-26T19:29:28.000-07:00
diff --git a/lib/actions/index.js b/lib/actions/index.js
@@ -28,3 +28,4 @@ exports.testsLoad = test_1.testsLoad;
 var tutorial_1 = require('./tutorial');
 exports.tutorialsFind = tutorial_1.tutorialsFind;
 exports.tutorialSet = tutorial_1.tutorialSet;
+exports.tutorialUpdate = tutorial_1.tutorialUpdate;
diff --git a/lib/actions/tutorial.js b/lib/actions/tutorial.js
@@ -7,6 +7,10 @@ function tutorialSet(name) {
     };
 }
 exports.tutorialSet = tutorialSet;
+function tutorialUpdate(name) {
+    return { type: _types_1.TUTORIAL_UPDATE, payload: { name: name } };
+}
+exports.tutorialUpdate = tutorialUpdate;
 function tutorialsFind() {
     return { type: _types_1.TUTORIALS_FIND };
 }
diff --git a/lib/components/Tutorials/UpdateTutorial/index.js b/lib/components/Tutorials/UpdateTutorial/index.js
@@ -15,19 +15,27 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 var React = require('react');
 var react_redux_1 = require('react-redux');
-var file_upload_1 = require('material-ui/svg-icons/file/file-upload');
+var update_1 = require('material-ui/svg-icons/action/update');
+var actions_1 = require('../../../actions');
+var colors_1 = require('material-ui/styles/colors');
+var styles = {
+    width: '18px',
+    marginLeft: '10px',
+};
 var UpdateTutorial = (function (_super) {
     __extends(UpdateTutorial, _super);
     function UpdateTutorial() {
         _super.apply(this, arguments);
     }
     UpdateTutorial.prototype.render = function () {
         var _a = this.props, name = _a.name, tutorialUpdate = _a.tutorialUpdate;
-        return React.createElement(file_upload_1.default, null);
+        return (React.createElement(update_1.default, {style: styles, color: colors_1.pink500, onTouchTap: tutorialUpdate.bind(this, name)}));
     };
     UpdateTutorial = __decorate([
         react_redux_1.connect(null, function (dispatch) {
-            return {};
+            return {
+                tutorialUpdate: function (name) { return dispatch(actions_1.tutorialUpdate(name)); },
+            };
         }), 
         __metadata('design:paramtypes', [])
     ], UpdateTutorial);
diff --git a/lib/components/Tutorials/index.js b/lib/components/Tutorials/index.js
@@ -11,8 +11,8 @@ var styles = {
 exports.Tutorials = function (_a) {
     var tutorials = _a.tutorials;
     return (React.createElement("div", {style: styles}, React.createElement(Table_1.Table, null, React.createElement(Table_1.TableHeader, {displaySelectAll: false, adjustForCheckbox: false}, React.createElement(Table_1.TableRow, null, React.createElement(Table_1.TableHeaderColumn, null, "Tutorial"), React.createElement(Table_1.TableHeaderColumn, null, "Version"))), React.createElement(Table_1.TableBody, {displayRowCheckbox: false}, tutorials.map(function tutorialRow(tutorial, index) {
-        return (React.createElement(Table_1.TableRow, {key: index}, React.createElement(Table_1.TableRowColumn, null, React.createElement(SelectTutorial_1.SelectTutorial, {tutorial: tutorial})), tutorial.latest
-            ? React.createElement(Table_1.TableRowColumn, null, tutorial.version, " ", React.createElement(UpdateTutorial_1.UpdateTutorial, {name: tutorial.name}))
-            : React.createElement(Table_1.TableRowColumn, null, tutorial.version)));
+        return (React.createElement(Table_1.TableRow, {key: index}, React.createElement(Table_1.TableRowColumn, null, React.createElement(SelectTutorial_1.SelectTutorial, {tutorial: tutorial})), React.createElement(Table_1.TableRowColumn, null, tutorial.version, tutorial.latest
+            ? React.createElement(UpdateTutorial_1.UpdateTutorial, {name: tutorial.name})
+            : null)));
     }))), React.createElement("br", null), React.createElement(LoadTutorials_1.LoadTutorials, null)));
 };
diff --git a/lib/reducers/tutorials/check.js b/lib/reducers/tutorials/check.js
@@ -24,7 +24,7 @@ function searchForTutorials(deps) {
             return {
                 name: name,
                 version: version,
-                latest: !update_1.canUpdateTutorial(name, version)
+                latest: !!update_1.canUpdateTutorial(name, version)
             };
         }));
     }
diff --git a/lib/reducers/tutorials/update.js b/lib/reducers/tutorials/update.js
@@ -1,12 +1,7 @@
 "use strict";
 var command_line_1 = require('../../services/command-line');
-var store_1 = require('../../store');
-var actions_1 = require('../../actions');
 function tutorialUpdate(name) {
-    command_line_1.default('npm', "install --save-dev " + name)
-        .then(function () {
-        store_1.default.dispatch(actions_1.tutorialsFind());
-    });
+    alert(name);
 }
 exports.tutorialUpdate = tutorialUpdate;
 function canUpdateTutorial(name, currentVersion) {
diff --git a/src/actions/index.ts b/src/actions/index.ts
@@ -11,5 +11,5 @@ export {
   testRun, testComplete, testResult, testsLoad
 } from './test';
 export {
-  tutorialsFind, tutorialSet
+  tutorialsFind, tutorialSet, tutorialUpdate
 } from './tutorial';
diff --git a/src/actions/tutorial.ts b/src/actions/tutorial.ts
@@ -9,9 +9,9 @@ export function tutorialSet(name: string): Action {
   };
 }
 
-// export function tutorialUpdate(name: string): CR.Action {
-//   return { type: TUTORIAL_UPDATE, payload: { name } };
-// }
+export function tutorialUpdate(name: string): Action {
+  return { type: TUTORIAL_UPDATE, payload: { name } };
+}
 
 export function tutorialsFind(): Action {
   return { type: TUTORIALS_FIND };
diff --git a/src/components/Tutorials/UpdateTutorial/index.tsx b/src/components/Tutorials/UpdateTutorial/index.tsx
@@ -1,21 +1,30 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
-import FileUpload from 'material-ui/svg-icons/file/file-upload';
-// import {tutorialUpdate} from '../../actions';
+import Update from 'material-ui/svg-icons/action/update';
+import {tutorialUpdate} from '../../../actions';
+import {pink500} from 'material-ui/styles/colors';
 
-// TODO: tutorialUpdate action
+const styles = {
+  width: '18px',
+  marginLeft: '10px',
+};
 
 @connect(null, (dispatch) => {
   return {
-    // tutorialUpdate: (name: string) => dispatch(tutorialUpdate(name)),
+    tutorialUpdate: (name: string) => dispatch(tutorialUpdate(name)),
   };
 })
 export class UpdateTutorial extends React.Component<{
   name: string, tutorialUpdate?: any
 }, {}> {
   render() {
     const {name, tutorialUpdate} = this.props;
-    return <FileUpload />;
-    // return <FileUpload onClick={tutorialUpdate(name)} />;
+    return (
+      <Update
+        style={styles}
+        color={pink500}
+        onTouchTap={tutorialUpdate.bind(this, name)}
+      />
+    );
   }
 }
diff --git a/src/components/Tutorials/index.tsx b/src/components/Tutorials/index.tsx
@@ -36,11 +36,13 @@ export const Tutorials: React.StatelessComponent<{
             <TableRowColumn>
               <SelectTutorial tutorial={tutorial} />
             </TableRowColumn>
-            {tutorial.latest
-              ? <TableRowColumn>
-                  {tutorial.version} <UpdateTutorial name={tutorial.name} />
-                </TableRowColumn>
-              : <TableRowColumn>{tutorial.version}</TableRowColumn>}
+              <TableRowColumn>
+                {tutorial.version}
+                {tutorial.latest
+                  ? <UpdateTutorial name={tutorial.name} />
+                  : null
+                }
+            </TableRowColumn>
           </TableRow>
         );
       })
diff --git a/src/reducers/tutorials/check.ts b/src/reducers/tutorials/check.ts
@@ -30,7 +30,7 @@ export function searchForTutorials(deps: Object): Tutorial.Info[] {
         return {
           name,
           version,
-          latest: !canUpdateTutorial(name, version)
+          latest: !!canUpdateTutorial(name, version)
         };
       }));
   } else {
diff --git a/src/reducers/tutorials/update.ts b/src/reducers/tutorials/update.ts
@@ -3,10 +3,11 @@ import store from '../../store';
 import {tutorialsFind} from '../../actions';
 
 export function tutorialUpdate(name: string): void {
-  commandLine('npm', `install --save-dev ${name}`)
-    .then(() => {
-      store.dispatch(tutorialsFind());
-    });
+  alert(name);
+  // commandLine('npm', `install --save-dev ${name}`)
+  //   .then(() => {
+  //     store.dispatch(tutorialsFind());
+  //   });
 }
 
 export function canUpdateTutorial(

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,10 @@ function tutorialSet(name) {`
`7`	`7`	`};`
`8`	`8`	`}`
`9`	`9`	`exports.tutorialSet = tutorialSet;`
	`10`	`+function tutorialUpdate(name) {`
	`11`	`+ return { type: _types_1.TUTORIAL_UPDATE, payload: { name: name } };`
	`12`	`+}`
	`13`	`+exports.tutorialUpdate = tutorialUpdate;`
`10`	`14`	`function tutorialsFind() {`
`11`	`15`	`return { type: _types_1.TUTORIALS_FIND };`
`12`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ function searchForTutorials(deps) {`
`24`	`24`	`return {`
`25`	`25`	`name: name,`
`26`	`26`	`version: version,`
`27`		`- latest: !update_1.canUpdateTutorial(name, version)`
	`27`	`+ latest: !!update_1.canUpdateTutorial(name, version)`
`28`	`28`	`};`
`29`	`29`	`}));`
`30`	`30`	`}`