Skip to content

Commit fae097a

Browse files
ShMcKShMcK
committed
refactor components into smaller parts
1 parent 93881b5 commit fae097a

36 files changed

+454
-450
lines changed

‎lib/components/AppMenu/Quit.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
"use strict";
2+
var __extends = (this && this.__extends) || function (d, b) {
3+
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4+
function __() { this.constructor = d; }
5+
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6+
};
7+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10+
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;
11+
return c > 3 && r && Object.defineProperty(target, key, r), r;
12+
};
13+
var __metadata = (this && this.__metadata) || function (k, v) {
14+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15+
};
16+
var React = require('react');
17+
var react_redux_1 = require('react-redux');
18+
var mount_1 = require('../mount');
19+
var subscriptions_1 = require('../../atom/subscriptions');
20+
var MenuItem_1 = require('material-ui/MenuItem');
21+
var Quit = (function (_super) {
22+
__extends(Quit, _super);
23+
function Quit() {
24+
_super.apply(this, arguments);
25+
}
26+
Quit.prototype.render = function () {
27+
return (React.createElement(MenuItem_1.default, {key: 'quit', onClick: this.props.quit}, "quit"));
28+
};
29+
Quit = __decorate([
30+
react_redux_1.connect(null, function (dispatch) {
31+
return {
32+
quit: function () {
33+
mount_1.togglePanel();
34+
subscriptions_1.onDeactivate();
35+
}
36+
};
37+
}),
38+
__metadata('design:paramtypes', [])
39+
], Quit);
40+
return Quit;
41+
}(React.Component));
42+
exports.Quit = Quit;

‎lib/components/AppMenu/index.js

+6-81
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,9 @@
11
"use strict";
2-
var __extends = (this && this.__extends) || function (d, b) {
3-
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4-
function __() { this.constructor = d; }
5-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6-
};
7-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10-
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;
11-
return c > 3 && r && Object.defineProperty(target, key, r), r;
12-
};
13-
var __metadata = (this && this.__metadata) || function (k, v) {
14-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15-
};
16-
var _this = this;
172
var React = require('react');
18-
var react_redux_1 = require('react-redux');
19-
var actions_1 = require('../../actions');
20-
var mount_1 = require('../mount');
21-
var subscriptions_1 = require('../../atom/subscriptions');
223
var AppBar_1 = require('material-ui/AppBar');
23-
var IconButton_1 = require('material-ui/IconButton');
24-
var IconMenu_1 = require('material-ui/IconMenu');
25-
var MenuItem_1 = require('material-ui/MenuItem');
26-
var Divider_1 = require('material-ui/Divider');
27-
var MenuLink_1 = require('./MenuLink');
28-
var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
29-
var close_1 = require('material-ui/svg-icons/navigation/close');
30-
var origin = { horizontal: 'right', vertical: 'top' };
31-
var AppMenu = (function (_super) {
32-
__extends(AppMenu, _super);
33-
function AppMenu() {
34-
_super.apply(this, arguments);
35-
}
36-
AppMenu.prototype.navOptions = function () {
37-
var routeToPage = this.props.routeToPage;
38-
switch (this.props.route) {
39-
case 'final':
40-
case 'page':
41-
return React.createElement(MenuLink_1.MenuLink, {route: 'progress'});
42-
case 'progress':
43-
return (React.createElement(MenuItem_1.default, {onTouchTap: routeToPage, primaryText: 'page', key: 'page'}));
44-
default: return null;
45-
}
46-
};
47-
AppMenu.prototype.menuOptions = function () {
48-
switch (this.props.route) {
49-
case 'final':
50-
case 'page':
51-
return (React.createElement("div", null, React.createElement(MenuLink_1.MenuLink, {route: 'progress'}), React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'})));
52-
case 'progress':
53-
return React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'});
54-
default: return null;
55-
}
56-
};
57-
AppMenu.prototype.closePanel = function () {
58-
mount_1.togglePanel();
59-
};
60-
AppMenu.prototype.render = function () {
61-
var quit = this.props.quit;
62-
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: React.createElement(IconButton_1.default, {onClick: this.closePanel}, React.createElement(close_1.default, null)), iconElementRight: React.createElement(IconMenu_1.default, {iconButtonElement: React.createElement(IconButton_1.default, null, React.createElement(more_vert_1.default, null)), targetOrigin: origin, anchorOrigin: origin}, this.menuOptions(), window.coderoad.issuesPath
63-
? React.createElement(MenuItem_1.default, {key: 'issue', className: 'link'}, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue"))
64-
: null, React.createElement(Divider_1.default, null), React.createElement(MenuItem_1.default, {key: 'quit', onClick: quit}, "quit"))}));
65-
};
66-
AppMenu = __decorate([
67-
react_redux_1.connect(null, function (dispatch) {
68-
return {
69-
routeToPage: function () {
70-
var position = _this.props.position;
71-
dispatch(actions_1.pageSet(position));
72-
dispatch(actions_1.setRoute('page'));
73-
},
74-
quit: function () {
75-
mount_1.togglePanel();
76-
subscriptions_1.onDeactivate();
77-
}
78-
};
79-
}),
80-
__metadata('design:paramtypes', [])
81-
], AppMenu);
82-
return AppMenu;
83-
}(React.Component));
84-
exports.AppMenu = AppMenu;
4+
var menuIconLeft_1 = require('./menuIconLeft');
5+
var menuRight_1 = require('./menuRight');
6+
exports.AppMenu = function (_a) {
7+
var route = _a.route;
8+
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', iconElementLeft: menuIconLeft_1.menuIconLeft(), iconElementRight: menuRight_1.menuRight(route)}));
9+
};

‎lib/components/AppMenu/issuesLink.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
"use strict";
2+
var React = require('react');
3+
var MenuItem_1 = require('material-ui/MenuItem');
4+
function issuesLink() {
5+
if (!window.coderoad.issuesPath) {
6+
return null;
7+
}
8+
return (React.createElement(MenuItem_1.default, {key: 'issue', className: 'link'}, React.createElement("a", {href: window.coderoad.issuesPath}, "post issue")));
9+
}
10+
exports.issuesLink = issuesLink;

‎lib/components/AppMenu/menuIconLeft.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
"use strict";
2+
var React = require('react');
3+
var IconButton_1 = require('material-ui/IconButton');
4+
var mount_1 = require('../mount');
5+
var close_1 = require('material-ui/svg-icons/navigation/close');
6+
function menuIconLeft() {
7+
return (React.createElement(IconButton_1.default, {onClick: mount_1.togglePanel}, React.createElement(close_1.default, null)));
8+
}
9+
exports.menuIconLeft = menuIconLeft;

‎lib/components/AppMenu/menuIconRight.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
"use strict";
2+
var React = require('react');
3+
var IconButton_1 = require('material-ui/IconButton');
4+
var more_vert_1 = require('material-ui/svg-icons/navigation/more-vert');
5+
function menuIconRight() {
6+
return (React.createElement(IconButton_1.default, null, React.createElement(more_vert_1.default, null)));
7+
}
8+
exports.menuIconRight = menuIconRight;

‎lib/components/AppMenu/menuRight.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
"use strict";
2+
var React = require('react');
3+
var IconMenu_1 = require('material-ui/IconMenu');
4+
var Divider_1 = require('material-ui/Divider');
5+
var Quit_1 = require('./Quit');
6+
var issuesLink_1 = require('./issuesLink');
7+
var menuIconRight_1 = require('./menuIconRight');
8+
var menuRightRouteOptions_1 = require('./menuRightRouteOptions');
9+
var origin = { horizontal: 'right', vertical: 'top' };
10+
function menuRight(route) {
11+
return (React.createElement(IconMenu_1.default, {iconButtonElement: menuIconRight_1.menuIconRight(), targetOrigin: origin, anchorOrigin: origin}, menuRightRouteOptions_1.menuRightRouteOptions(route), issuesLink_1.issuesLink(), React.createElement(Divider_1.default, null), React.createElement(Quit_1.Quit, null)));
12+
}
13+
exports.menuRight = menuRight;

‎lib/components/AppMenu/menuRightRouteOptions.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
"use strict";
2+
var React = require('react');
3+
var MenuLink_1 = require('./MenuLink');
4+
function menuRightRouteOptions(route) {
5+
switch (route) {
6+
case 'final':
7+
case 'page':
8+
return (React.createElement("div", null, React.createElement(MenuLink_1.MenuLink, {route: 'progress'}), React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'})));
9+
case 'progress':
10+
return React.createElement(MenuLink_1.MenuLink, {route: 'tutorials'});
11+
default:
12+
return null;
13+
}
14+
;
15+
}
16+
exports.menuRightRouteOptions = menuRightRouteOptions;

‎lib/components/start/checks/verify.js renamed to ‎lib/components/Common/RouteButton.js

+13-13
Original file line numberDiff line numberDiff line change
@@ -14,26 +14,26 @@ var __metadata = (this && this.__metadata) || function (k, v) {
1414
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
1515
};
1616
var React = require('react');
17-
var FlatButton_1 = require('material-ui/FlatButton');
18-
var store_1 = require('../../../store/store');
19-
var actions_1 = require('../../../actions');
2017
var react_redux_1 = require('react-redux');
21-
var VerifyButton = (function (_super) {
22-
__extends(VerifyButton, _super);
23-
function VerifyButton() {
18+
var actions_1 = require('../../actions');
19+
var FlatButton_1 = require('material-ui/FlatButton');
20+
var RouteButton = (function (_super) {
21+
__extends(RouteButton, _super);
22+
function RouteButton() {
2423
_super.apply(this, arguments);
2524
}
26-
VerifyButton.prototype.render = function () {
27-
return React.createElement(FlatButton_1.default, {label: 'Verify Setup Complete', primtary: true, onTouchTap: this.props.verify});
25+
RouteButton.prototype.render = function () {
26+
var _a = this.props, label = _a.label, route = _a.route, style = _a.style, routeTo = _a.routeTo;
27+
return (React.createElement(FlatButton_1.default, {label: label, style: style || {}, onTouchTap: routeTo.bind(this, route), secondary: true}));
2828
};
29-
VerifyButton = __decorate([
29+
RouteButton = __decorate([
3030
react_redux_1.connect(null, function (dispatch) {
3131
return {
32-
verify: function () { return store_1.store.dispatch(actions_1.setupVerify()); }
32+
routeTo: function (route) { return dispatch(actions_1.setRoute(route)); }
3333
};
3434
}),
3535
__metadata('design:paramtypes', [])
36-
], VerifyButton);
37-
return VerifyButton;
36+
], RouteButton);
37+
return RouteButton;
3838
}(React.Component));
39-
exports.VerifyButton = VerifyButton;
39+
exports.RouteButton = RouteButton;

‎lib/components/Progress/ProgressChapter.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
"use strict";
2+
var React = require('react');
3+
var classnames = require('classnames');
4+
var List_1 = require('material-ui/List');
5+
var ProgressPage_1 = require('./ProgressPage');
6+
var progressIcon_1 = require('./progressIcon');
7+
var index_1 = require('../index');
8+
exports.ProgressChapter = function (_a) {
9+
var chapter = _a.chapter, chapterIndex = _a.chapterIndex, position = _a.position;
10+
var isActive = chapterIndex === position.chapter;
11+
return (React.createElement(List_1.ListItem, {key: 'c' + chapterIndex, className: classnames({
12+
'chapter': true,
13+
'isActive': isActive
14+
}), initiallyOpen: chapterIndex === 0, leftIcon: progressIcon_1.progressIcon(chapter.completed), primaryTogglesNestedList: chapterIndex === position.chapter && !chapter.completed, nestedItems: chapter.pages.map(function (page, pageIndex) { return (React.createElement(ProgressPage_1.ProgressPage, {key: 'c' + chapterIndex + 'p' + pageIndex, pageIndex: pageIndex, page: page, chapterIndex: chapterIndex, position: position})); })}, React.createElement("h3", null, chapterIndex + 1, ". ", chapter.title), React.createElement("span", {className: 'chapter-description'}, React.createElement(index_1.Markdown, null, chapter.description))));
15+
};

‎lib/components/Progress/ProgressPage.js

+17-25
Original file line numberDiff line numberDiff line change
@@ -18,45 +18,37 @@ var react_redux_1 = require('react-redux');
1818
var actions_1 = require('../../actions');
1919
var classnames = require('classnames');
2020
var List_1 = require('material-ui/List');
21-
var colors_1 = require('material-ui/styles/colors');
22-
var check_box_1 = require('material-ui/svg-icons/toggle/check-box');
23-
var play_circle_filled_1 = require('material-ui/svg-icons/av/play-circle-filled');
24-
var check_box_outline_blank_1 = require('material-ui/svg-icons/toggle/check-box-outline-blank');
21+
var progressIcon_1 = require('./progressIcon');
2522
var ProgressPage = (function (_super) {
2623
__extends(ProgressPage, _super);
2724
function ProgressPage() {
2825
_super.apply(this, arguments);
2926
}
30-
ProgressPage.prototype.getProgressIcon = function (completed, current) {
31-
if (completed) {
32-
return React.createElement(check_box_1.default, null);
33-
}
34-
else if (current) {
35-
return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});
36-
}
37-
else {
38-
return React.createElement(check_box_outline_blank_1.default, null);
39-
}
40-
};
41-
ProgressPage.prototype.canActivate = function (isActive, itemPosition, position) {
42-
var earlierChapter = itemPosition.chapter < position.chapter;
43-
var currentChapter = itemPosition.chapter = position.chapter;
44-
var earlierOrCurrentPage = itemPosition.page <= position.page;
45-
if (isActive || earlierChapter || (currentChapter && earlierOrCurrentPage)) {
27+
ProgressPage.prototype.canActivate = function (isActive) {
28+
var _a = this.props, chapterIndex = _a.chapterIndex, pageIndex = _a.pageIndex, position = _a.position;
29+
var earlierChapter = chapterIndex < position.chapter;
30+
var currentChapter = chapterIndex === position.chapter;
31+
var earlierOrCurrentPage = pageIndex <= position.page;
32+
if (isActive || earlierChapter ||
33+
(currentChapter && earlierOrCurrentPage)) {
4634
return true;
4735
}
4836
else {
4937
return null;
5038
}
5139
};
5240
ProgressPage.prototype.render = function () {
53-
var _a = this.props, page = _a.page, itemPosition = _a.itemPosition, position = _a.position;
54-
var isActive = itemPosition.chapter === position.chapter && itemPosition.page === position.page;
41+
var _a = this.props, page = _a.page, position = _a.position, chapterIndex = _a.chapterIndex, pageIndex = _a.pageIndex, selectPage = _a.selectPage;
42+
console.log(this.props);
43+
var isActive = chapterIndex === position.chapter && pageIndex === position.page;
5544
return (React.createElement(List_1.ListItem, {className: classnames({
5645
'page': true,
57-
'page-isDisabled': !this.canActivate(isActive, itemPosition, position)
58-
}), primaryText: (itemPosition.page + 1) + ". " + page.title, secondaryText: page.description, leftIcon: this.getProgressIcon(page.completed, isActive), onClick: this.canActivate(isActive, itemPosition, position)
59-
? this.props.selectPage.bind(this, itemPosition)
46+
'page-isDisabled': !this.canActivate(isActive)
47+
}), primaryText: (pageIndex + 1) + ". " + page.title, secondaryText: page.description, leftIcon: progressIcon_1.progressIcon(page.completed, isActive), onClick: this.canActivate(isActive)
48+
? selectPage.bind(this, {
49+
chapter: chapterIndex,
50+
page: pageIndex
51+
})
6052
: null}));
6153
};
6254
;

‎lib/components/Progress/progressIcon.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
"use strict";
2+
var React = require('react');
3+
var colors_1 = require('material-ui/styles/colors');
4+
var check_box_1 = require('material-ui/svg-icons/toggle/check-box');
5+
var play_circle_filled_1 = require('material-ui/svg-icons/av/play-circle-filled');
6+
var check_box_outline_blank_1 = require('material-ui/svg-icons/toggle/check-box-outline-blank');
7+
function progressIcon(completed, current) {
8+
if (completed) {
9+
return React.createElement(check_box_1.default, null);
10+
}
11+
else if (current) {
12+
return React.createElement(play_circle_filled_1.default, {color: colors_1.pink500});
13+
}
14+
else if (typeof current === 'undefined') {
15+
return null;
16+
}
17+
else {
18+
return React.createElement(check_box_outline_blank_1.default, null);
19+
}
20+
}
21+
exports.progressIcon = progressIcon;
22+
;

‎lib/components/Start/Welcome/index.js

+2-36
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,7 @@
11
"use strict";
2-
var __extends = (this && this.__extends) || function (d, b) {
3-
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
4-
function __() { this.constructor = d; }
5-
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
6-
};
7-
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
8-
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
9-
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
10-
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;
11-
return c > 3 && r && Object.defineProperty(target, key, r), r;
12-
};
13-
var __metadata = (this && this.__metadata) || function (k, v) {
14-
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
15-
};
162
var React = require('react');
17-
var react_redux_1 = require('react-redux');
18-
var actions_1 = require('../../../actions');
193
var path_1 = require('path');
20-
var FlatButton_1 = require('material-ui/FlatButton');
4+
var index_1 = require('../../index');
215
var imagePath = path_1.resolve(__dirname, '../../../../', 'styles', 'coderoad.jpg');
226
var welcomeStyle = {
237
backgroundImage: "url(https://github.com/""%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s1%3EimagePath%3C/span%3E%20%3Cspan%20class=pl-c1%3E+%3C/span%3E%20%3Cspan%20class=pl-s%3E"/")",
@@ -28,22 +12,4 @@ var welcomeButtonStyle = {
2812
fontSize: '1.4em',
2913
padding: '5px 2px'
3014
};
31-
var Welcome = (function (_super) {
32-
__extends(Welcome, _super);
33-
function Welcome() {
34-
_super.apply(this, arguments);
35-
}
36-
Welcome.prototype.render = function () {
37-
return (React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(FlatButton_1.default, {style: welcomeButtonStyle, label: 'Start', onTouchTap: this.props.routeToTutorials, secondary: true}))));
38-
};
39-
Welcome = __decorate([
40-
react_redux_1.connect(null, function (dispatch) {
41-
return {
42-
routeToTutorials: function () { return dispatch(actions_1.setRoute('tutorials')); }
43-
};
44-
}),
45-
__metadata('design:paramtypes', [])
46-
], Welcome);
47-
return Welcome;
48-
}(React.Component));
49-
exports.Welcome = Welcome;
15+
exports.Welcome = function () { return (React.createElement("div", {style: welcomeStyle}, React.createElement("div", {className: 'cr-welcome'}, React.createElement("div", {className: 'title'}, "CodeRoad"), React.createElement("div", {className: 'tagline'}, "Tutorials in your Editor"), React.createElement("br", null), React.createElement("br", null), React.createElement(index_1.RouteButton, {label: 'Start', route: 'tutorials', style: welcomeButtonStyle})))); };

0 commit comments

Comments
 (0)