Skip to content
This repository was archived by the owner on Apr 8, 2020. It is now read-only.

Commit cf809cd

Browse files
ShMcKShMcK
committed
refactor view data into selectors
1 parent 6cd7f72 commit cf809cd

File tree

27 files changed

+381
-229
lines changed

27 files changed

+381
-229
lines changed

‎lib/components/Page/Hints/HintButton.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ var React = require('react');
1717
var react_redux_1 = require('react-redux');
1818
var FlatButton_1 = require('material-ui/FlatButton');
1919
var actions_1 = require('../../../actions');
20+
var selectors_1 = require('../../../selectors');
2021
var HintButton = (function (_super) {
2122
__extends(HintButton, _super);
2223
function HintButton() {
@@ -32,7 +33,10 @@ var HintButton = (function (_super) {
3233
}
3334
};
3435
HintButton = __decorate([
35-
react_redux_1.connect(null, function (dispatch) { return ({
36+
react_redux_1.connect(function (state) { return ({
37+
hintPosition: state.hintPosition,
38+
hintsLength: selectors_1.hintsSelector(state).length,
39+
}); }, function (dispatch) { return ({
3640
hintSet: function (position) { return dispatch(actions_1.hintPositionSet(position)); },
3741
}); }),
3842
__metadata('design:paramtypes', [])

‎lib/components/Page/Hints/index.js

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,53 @@
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+
};
216
var React = require('react');
17+
var react_redux_1 = require('react-redux');
318
var Card_1 = require('material-ui/Card');
419
var index_1 = require('../../index');
520
var HintButton_1 = require('./HintButton');
621
var help_1 = require('material-ui/svg-icons/action/help');
22+
var selectors_1 = require('../../../selectors');
723
var styles = {
824
position: 'relative',
925
margin: '5px auto 10px',
1026
width: '360px',
1127
textAlign: 'center',
1228
};
13-
var Hints = function (_a) {
14-
var task = _a.task, hintPosition = _a.hintPosition;
15-
var hints = task && task.hints ? task.hints : null;
16-
if (hintPosition < 0 || !hints || !hints.length) {
17-
return null;
29+
var Hints = (function (_super) {
30+
__extends(Hints, _super);
31+
function Hints() {
32+
_super.apply(this, arguments);
1833
}
19-
var hint = hints[hintPosition];
20-
return (React.createElement(Card_1.Card, {style: styles}, 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)), hints.length > 1
21-
? React.createElement(Card_1.CardActions, {style: { paddingBottom: '30px !important' }, expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.default, {type: 'prev', label: 'Previous', hintPosition: hintPosition, hintsLength: hints.length}), React.createElement(HintButton_1.default, {type: 'next', label: 'Next', hintPosition: hintPosition, hintsLength: hints.length}))
22-
: null));
23-
};
34+
Hints.prototype.render = function () {
35+
var _a = this.props, hint = _a.hint, hints = _a.hints;
36+
if (!hint) {
37+
return null;
38+
}
39+
return (React.createElement(Card_1.Card, {style: styles}, 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)), hints.length > 1
40+
? React.createElement(Card_1.CardActions, {style: { paddingBottom: '30px !important' }, expandable: true, className: 'cr-task-hints-actions'}, React.createElement(HintButton_1.default, {type: 'prev', label: 'Previous', hintsLength: hints.length}), React.createElement(HintButton_1.default, {type: 'next', label: 'Next', hintsLength: hints.length}))
41+
: null));
42+
};
43+
Hints = __decorate([
44+
react_redux_1.connect(function (state) { return ({
45+
hints: selectors_1.hintsSelector(state),
46+
hint: selectors_1.hintSelector(state),
47+
}); }),
48+
__metadata('design:paramtypes', [])
49+
], Hints);
50+
return Hints;
51+
}(React.Component));
2452
Object.defineProperty(exports, "__esModule", { value: true });
2553
exports.default = Hints;

‎lib/components/Page/PageToolbar/index.js

Lines changed: 34 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
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+
};
216
var React = require('react');
17+
var react_redux_1 = require('react-redux');
318
var Toolbar_1 = require('material-ui/Toolbar');
419
var Save_1 = require('./Save');
520
var Continue_1 = require('./Continue');
621
var ToggleDevTools_1 = require('./ToggleDevTools');
22+
var selectors_1 = require('../../../selectors');
723
var styles = {
824
zIndex: '5',
925
position: 'relative',
@@ -13,10 +29,22 @@ var styles = {
1329
width: '400px',
1430
margin: '0px',
1531
};
16-
exports.PageToolbar = function (_a) {
17-
var tasks = _a.tasks, taskPosition = _a.taskPosition, children = _a.children;
18-
return (React.createElement("section", {styles: styles}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleDevTools_1.default, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, taskPosition >= tasks.length ?
19-
React.createElement(Continue_1.default, null) : React.createElement(Save_1.default, null)))));
20-
};
32+
var PageToolbar = (function (_super) {
33+
__extends(PageToolbar, _super);
34+
function PageToolbar() {
35+
_super.apply(this, arguments);
36+
}
37+
PageToolbar.prototype.render = function () {
38+
var _a = this.props, tasksComplete = _a.tasksComplete, children = _a.children;
39+
return (React.createElement("section", {styles: styles}, children, React.createElement(Toolbar_1.Toolbar, null, React.createElement(Toolbar_1.ToolbarGroup, {float: 'left'}, React.createElement(ToggleDevTools_1.default, null)), React.createElement(Toolbar_1.ToolbarGroup, {float: 'right'}, tasksComplete ? React.createElement(Continue_1.default, null) : React.createElement(Save_1.default, null)))));
40+
};
41+
PageToolbar = __decorate([
42+
react_redux_1.connect(function (state) { return ({
43+
tasksComplete: selectors_1.taskProgressSelector(state) === 100
44+
}); }),
45+
__metadata('design:paramtypes', [])
46+
], PageToolbar);
47+
return PageToolbar;
48+
}(React.Component));
2149
Object.defineProperty(exports, "__esModule", { value: true });
22-
exports.default = exports.PageToolbar;
50+
exports.default = PageToolbar;

‎lib/components/Page/ProgressBar/index.js

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,46 @@
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+
};
216
var React = require('react');
17+
var react_redux_1 = require('react-redux');
318
var LinearProgress_1 = require('material-ui/LinearProgress');
419
var style = {
520
height: '10px',
621
position: 'relative',
722
margin: '0px',
823
};
9-
var ProgressBar = function (_a) {
10-
var taskProgress = _a.taskProgress, completed = _a.completed;
11-
if (completed) {
12-
return null;
24+
var ProgressBar = (function (_super) {
25+
__extends(ProgressBar, _super);
26+
function ProgressBar() {
27+
_super.apply(this, arguments);
1328
}
14-
return (React.createElement(LinearProgress_1.default, {mode: 'determinate', value: taskProgress, style: style}));
15-
};
29+
ProgressBar.prototype.render = function () {
30+
var _a = this.props, completed = _a.completed, taskProgress = _a.taskProgress;
31+
if (completed) {
32+
return null;
33+
}
34+
return (React.createElement(LinearProgress_1.default, {mode: 'determinate', value: taskProgress, style: style}));
35+
};
36+
ProgressBar = __decorate([
37+
react_redux_1.connect(function (state) { return ({
38+
completed: state.progress.pages[state.pagePosition],
39+
taskProgress: (state.taskPosition / state.tutorial.pages[state.pagePosition].tasks.length) * 100
40+
}); }),
41+
__metadata('design:paramtypes', [])
42+
], ProgressBar);
43+
return ProgressBar;
44+
}(React.Component));
1645
Object.defineProperty(exports, "__esModule", { value: true });
1746
exports.default = ProgressBar;

‎lib/components/Page/index.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ var Page = (function (_super) {
3131
_super.apply(this, arguments);
3232
}
3333
Page.prototype.render = function () {
34-
var _a = this.props, page = _a.page, tasks = _a.tasks, taskPosition = _a.taskPosition, hintPosition = _a.hintPosition, testRun = _a.testRun, progress = _a.progress, pagePosition = _a.pagePosition, completed = _a.completed, task = _a.task, visibleTasks = _a.visibleTasks, taskProgress = _a.taskProgress;
35-
return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, {tasks: tasks.slice(0, taskPosition + 1), taskPosition: taskPosition, testRun: testRun, completed: completed, page: page}), React.createElement(PageToolbar_1.default, {tasks: tasks, taskPosition: taskPosition}, React.createElement(Hints_1.default, {task: task, hintPosition: hintPosition}), React.createElement(ProgressBar_1.default, {taskProgress: taskProgress, completed: completed}))));
34+
var _a = this.props, page = _a.page, tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, progress = _a.progress, pagePosition = _a.pagePosition, completed = _a.completed, task = _a.task, taskProgress = _a.taskProgress;
35+
return (React.createElement("section", {style: styles, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, {tasks: tasks.slice(0, taskPosition + 1), taskPosition: taskPosition, testRun: testRun, completed: completed, page: page}), React.createElement(PageToolbar_1.default, {tasks: tasks, taskPosition: taskPosition}, React.createElement(Hints_1.default, null), React.createElement(ProgressBar_1.default, null))));
3636
};
3737
Page = __decorate([
3838
react_redux_1.connect(function (state) { return ({
@@ -41,7 +41,6 @@ var Page = (function (_super) {
4141
testRun: state.testRun,
4242
progress: state.progress,
4343
taskPosition: state.taskPosition,
44-
hintPosition: state.hintPosition,
4544
pagePosition: state.pagePosition,
4645
completed: selectors_1.pageCompletedSelector(state),
4746
task: selectors_1.taskSelector(state),

‎lib/components/Tutorials/UpdateTutorial/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ var UpdateTutorial = (function (_super) {
2929
}
3030
UpdateTutorial.prototype.render = function () {
3131
var _a = this.props, tutorial = _a.tutorial, tutorialUpdate = _a.tutorialUpdate;
32-
return (React.createElement("span", null, React.createElement(update_1.default, {style: styles, color: colors_1.pink500, onTouchTap: tutorialUpdate.bind(this, tutorial.title)}), React.createElement("span", {style: { marginLeft: '10px' }}, tutorial.latest)));
32+
return (React.createElement("span", null, React.createElement(update_1.default, {style: styles, color: colors_1.pink500, onTouchTap: tutorialUpdate.bind(this, tutorial.name)}), "``", React.createElement("span", {style: { marginLeft: '10px' }}, tutorial.latest)));
3333
};
3434
UpdateTutorial = __decorate([
3535
react_redux_1.connect(null, function (dispatch) { return ({

‎lib/components/index.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,6 @@ var Routes_1 = require('./Routes');
1313
exports.Routes = Routes_1.default;
1414
var Start_1 = require('./Start');
1515
exports.Start = Start_1.default;
16-
var Checks_1 = require('./Start/Checks');
17-
exports.Checks = Checks_1.default;
1816
var Tutorials_1 = require('./Tutorials');
1917
exports.Tutorials = Tutorials_1.default;
2018
var Markdown_1 = require('./common/Markdown');

‎lib/modules/tutorial/reducer.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var _tutorial = {
1010
packageJson: null,
1111
config: null,
1212
};
13+
var configured = [];
1314
function tutorialReducer(t, action) {
1415
if (t === void 0) { t = _tutorial; }
1516
switch (action.type) {
@@ -20,7 +21,10 @@ function tutorialReducer(t, action) {
2021
var config = config_1.tutorialConfig(packageJson, dir);
2122
var coderoadJsonPath = path_1.join(packagePath, packageJson.main);
2223
var _b = require(coderoadJsonPath), info = _b.info, pages = _b.pages;
23-
pages = config_paths_1.default(dir, name_1, config, pages || []);
24+
if (configured.indexOf(name_1) === -1) {
25+
pages = config_paths_1.default(dir, name_1, config, pages || []);
26+
}
27+
configured.push(name_1);
2428
return {
2529
name: packageJson.name,
2630
info: info,

‎lib/selectors.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
"use strict";
2-
var reselect_1 = require('reselect');
3-
exports.pageSelector = function (state) { return state.tutorial.pages[state.pagePosition]; };
4-
exports.tasksSelector = reselect_1.createSelector(exports.pageSelector, function (page) { return page.tasks; });
5-
exports.taskPositionSelector = function (state) { return state.taskPosition; };
6-
exports.pageCompletedSelector = function (state) { return state.progress.pages[state.pagePosition]; };
7-
exports.taskSelector = function (state) { return reselect_1.createSelector(exports.tasksSelector, function (tasks) {
8-
return (tasks.length <= tasks.length ? exports.tasksSelector(state)[state.taskPosition] : null);
9-
}); };
10-
exports.visibleTasksSelector = function (state) { return reselect_1.createSelector(exports.tasksSelector, function (tasks) {
11-
console.log(tasks);
12-
return tasks.slice(0, state.taskPosition + 1);
13-
}); };
14-
exports.taskProgressSelector = function (state) { return reselect_1.createSelector(exports.tasksSelector, function (tasks) { return (state.taskPosition / tasks.length) * 100; }); };
15-
exports.configSelector = function (state) { return state.packageJson.config; };
2+
var hints_1 = require('./selectors/hints');
3+
exports.hintsSelector = hints_1.hintsSelector;
4+
exports.hintSelector = hints_1.hintSelector;
5+
var page_1 = require('./selectors/page');
6+
exports.pageSelector = page_1.pageSelector;
7+
exports.pageCompletedSelector = page_1.pageCompletedSelector;
8+
var tasks_1 = require('./selectors/tasks');
9+
exports.tasksSelector = tasks_1.tasksSelector;
10+
exports.taskPositionSelector = tasks_1.taskPositionSelector;
11+
exports.taskSelector = tasks_1.taskSelector;
12+
exports.visibleTasksSelector = tasks_1.visibleTasksSelector;
13+
exports.taskProgressSelector = tasks_1.taskProgressSelector;
14+
var packageJson_1 = require('./selectors/packageJson');
15+
exports.configSelector = packageJson_1.configSelector;

‎lib/selectors/hints.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
"use strict";
2+
var reselect_1 = require('reselect');
3+
var tasks_1 = require('./tasks');
4+
exports.hintsSelector = reselect_1.createSelector(tasks_1.taskSelector, function (task) { return task && task.hints ? task.hints : null; });
5+
exports.hintSelector = reselect_1.createSelector(exports.hintsSelector, function (state) { return state.hintPosition; }, function (hints, hintPosition) { return (hintPosition >= 0 && hints && hints.length) ?
6+
hints[hintPosition] : null; });

0 commit comments

Comments
 (0)