refactor components based on airbnb style guide

Author: ShMcK

lib/components/AppMenu/MenuLink.js

@@ -0,0 +1,39 @@
+"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; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var React = require('react');
+var react_redux_1 = require('react-redux');
+var MenuItem_1 = require('material-ui/MenuItem');
+var actions_1 = require('../../actions');
+var MenuLink = (function (_super) {
+    __extends(MenuLink, _super);
+    function MenuLink() {
+        _super.apply(this, arguments);
+    }
+    MenuLink.prototype.render = function () {
+        var _a = this.props, route = _a.route, title = _a.title, routeTo = _a.routeTo;
+        return React.createElement(MenuItem_1.default, {primaryText: title ? title : route, onTouchTap: routeTo.bind(this, route), key: route});
+    };
+    MenuLink = __decorate([
+        react_redux_1.connect(null, function (dispatch) {
+            return {
+                routeTo: function (route) { return dispatch(actions_1.setRoute(route)); }
+            };
+        }), 
+        __metadata('design:paramtypes', [])
+    ], MenuLink);
+    return MenuLink;
+}(React.Component));
+exports.MenuLink = MenuLink;

lib/components/AppMenu/index.js

@@ -24,29 +24,10 @@ var IconButton_1 = require('material-ui/IconButton');
 var IconMenu_1 = require('material-ui/IconMenu');
 var MenuItem_1 = require('material-ui/MenuItem');
 var Divider_1 = require('material-ui/Divider');
+var MenuLink_1 = require('./MenuLink');
 var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
 var close_1 = require('material-ui/svg-icons/navigation/close');
 var origin = { horizontal: 'right', vertical: 'top' };
-var MenuLink = (function (_super) {
-    __extends(MenuLink, _super);
-    function MenuLink() {
-        _super.apply(this, arguments);
-    }
-    MenuLink.prototype.render = function () {
-        var _a = this.props, route = _a.route, title = _a.title, routeTo = _a.routeTo;
-        return React.createElement(MenuItem_1.default, {primaryText: title ? title : route, onTouchTap: routeTo.bind(this, route), key: route});
-    };
-    MenuLink = __decorate([
-        react_redux_1.connect(null, function (dispatch) {
-            return {
-                routeTo: function (route) { return dispatch(actions_1.setRoute(route)); }
-            };
-        }), 
-        __metadata('design:paramtypes', [])
-    ], MenuLink);
-    return MenuLink;
-}(React.Component));
-exports.MenuLink = MenuLink;
 var AppMenu = (function (_super) {
     __extends(AppMenu, _super);
     function AppMenu() {
@@ -57,7 +38,7 @@ var AppMenu = (function (_super) {
         switch (this.props.route) {
             case 'final':
             case 'page':
-                return React.createElement(MenuLink, {route: 'progress'});
+                return React.createElement(MenuLink_1.MenuLink, {route: 'progress'});
             case 'progress':
                 return React.createElement(MenuItem_1.default, {onTouchTap: routeToPage, primaryText: 'page', key: 'page'});
             default: return null;
@@ -67,9 +48,9 @@ var AppMenu = (function (_super) {
         switch (this.props.route) {
             case 'final':
             case 'page':
-                return (React.createElement("div", null, React.createElement(MenuLink, {route: 'progress'}), React.createElement(MenuLink, {route: 'tutorials'})));
+                return (React.createElement("div", null, React.createElement(MenuLink_1.MenuLink, {route: 'progress'}), React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'})));
             case 'progress':
-                return React.createElement(MenuLink, {route: 'tutorials'});
+                return React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'});
             default: return null;
         }
     };

lib/components/page/edit.js renamed to lib/components/Page/EditPage.js

@@ -3,7 +3,7 @@ var React = require('react');
 var path = require('path');
 var mode_edit_1 = require('material-ui/svg-icons/editor/mode-edit');
 var editStyle = { position: 'absolute', top: '10px', right: '10px' };
-exports.Edit = function (_a) {
+exports.EditPage = function (_a) {
     var editPath = _a.editPath;
     if (editPath && window.coderoad.edit) {
         var repoPath = path.join(window.coderoad.repo, 'edit', 'master', editPath);

lib/components/page/complete/page-complete.js renamed to lib/components/Page/PageComplete/index.js

@@ -1,4 +1,4 @@
-'use strict';
+"use strict";
 var React = require('react');
 var index_1 = require('../../index');
 exports.Chapter = function (_a) {

lib/components/page/content.js renamed to lib/components/Page/PageContent.js

@@ -2,7 +2,7 @@
 var React = require('react');
 var Card_1 = require('material-ui/Card');
 var index_1 = require('../../index');
-var buttons_1 = require('./buttons');
+var HintButton_1 = require('./HintButton');
 var help_1 = require('material-ui/svg-icons/action/help');
 exports.Hints = function (_a) {
     var task = _a.task, hintPosition = _a.hintPosition;
@@ -11,5 +11,5 @@ exports.Hints = function (_a) {
         return null;
     }
     var hint = hints[hintPosition];
-    return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(buttons_1.HintButton, {label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length, type: 'prev'}), React.createElement(buttons_1.HintButton, {label: 'Next', hintPosition: hintPosition, hintsLength: hints.length, type: 'next'}))));
+    return (React.createElement(Card_1.Card, {className: 'cr-task-hints'}, React.createElement(Card_1.CardHeader, {title: 'Hints', avatar: React.createElement(help_1.default, null), actAsExpander: true, showExpandableButton: true}), React.createElement(Card_1.CardText, {className: 'cr-task-hint', expandable: true}, React.createElement(index_1.Markdown, null, hint)), React.createElement(Card_1.CardActions, {expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.HintButton, {label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length, type: 'prev'}), React.createElement(HintButton_1.HintButton, {label: 'Next', hintPosition: hintPosition, hintsLength: hints.length, type: 'next'}))));
 };

lib/components/page/chapter/chapter.js renamed to lib/components/Page/chapter/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __assign = (this && this.__assign) || Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+            t[p] = s[p];
+    }
+    return t;
+};
+var _this = this;
+var React = require('react');
+var index_1 = require('../../index');
+var TaskCheckbox_1 = require('./TaskCheckbox');
+var List_1 = require('material-ui/List');
+exports.Task = function (_a) {
+    var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
+    var isCompleted = index < taskPosition;
+    return (React.createElement(List_1.ListItem, {key: index, className: 'cr-task', style: { backgroundColor: isCompleted ? '#c8e6c9' : 'inherit' }}, React.createElement(TaskCheckbox_1.TaskCheckbox, __assign({}, _this.props)), React.createElement("span", {className: 'cr-task-index'}, index + 1, "."), React.createElement("div", {className: 'cr-task-description'}, React.createElement(index_1.Markdown, null, task.description))));
+};

lib/components/page/hints/buttons.js renamed to lib/components/Page/hints/HintButton.js

@@ -0,0 +1,20 @@
+"use strict";
+var React = require('react');
+var colors_1 = require('material-ui/styles/colors');
+var check_box_1 = require('material-ui/svg-icons/toggle/check-box');
+var check_box_outline_blank_1 = require('material-ui/svg-icons/toggle/check-box-outline-blank');
+var indeterminate_check_box_1 = require('material-ui/svg-icons/toggle/indeterminate-check-box');
+exports.TaskCheckbox = function (_a) {
+    var index = _a.index, taskPosition = _a.taskPosition, testRun = _a.testRun;
+    var icon = null;
+    if (index < taskPosition) {
+        icon = React.createElement(check_box_1.default, {color: colors_1.green500});
+    }
+    else if (index === taskPosition && testRun) {
+        icon = React.createElement(indeterminate_check_box_1.default, {color: colors_1.orange500});
+    }
+    else {
+        icon = React.createElement(check_box_outline_blank_1.default, null);
+    }
+    return React.createElement("span", {className: 'cr-task-checkbox'}, icon);
+};