Skip to content

Commit f24a0bd

Browse files
ShMcKShMcK
committed
page refactoring into selectors
1 parent cf809cd commit f24a0bd

File tree

16 files changed

+191
-161
lines changed

16 files changed

+191
-161
lines changed

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

+2-5
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,14 @@ var Hints = (function (_super) {
3232
_super.apply(this, arguments);
3333
}
3434
Hints.prototype.render = function () {
35-
var _a = this.props, hint = _a.hint, hints = _a.hints;
35+
var hint = this.props.hint;
3636
if (!hint) {
3737
return null;
3838
}
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));
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)), 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'}), React.createElement(HintButton_1.default, {type: 'next', label: 'Next'}))));
4240
};
4341
Hints = __decorate([
4442
react_redux_1.connect(function (state) { return ({
45-
hints: selectors_1.hintsSelector(state),
4643
hint: selectors_1.hintSelector(state),
4744
}); }),
4845
__metadata('design:paramtypes', [])

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

+1-5
Original file line numberDiff line numberDiff line change
@@ -27,15 +27,11 @@ var ProgressBar = (function (_super) {
2727
_super.apply(this, arguments);
2828
}
2929
ProgressBar.prototype.render = function () {
30-
var _a = this.props, completed = _a.completed, taskProgress = _a.taskProgress;
31-
if (completed) {
32-
return null;
33-
}
30+
var taskProgress = this.props.taskProgress;
3431
return (React.createElement(LinearProgress_1.default, {mode: 'determinate', value: taskProgress, style: style}));
3532
};
3633
ProgressBar = __decorate([
3734
react_redux_1.connect(function (state) { return ({
38-
completed: state.progress.pages[state.pagePosition],
3935
taskProgress: (state.taskPosition / state.tutorial.pages[state.pagePosition].tasks.length) * 100
4036
}); }),
4137
__metadata('design:paramtypes', [])

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

+35-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,20 @@
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 index_1 = require('../../index');
419
var taskCheckbox_1 = require('./taskCheckbox');
520
var List_1 = require('material-ui/List');
@@ -23,14 +38,25 @@ var styles = {
2338
lineHeight: '1.6',
2439
},
2540
};
26-
function getStatus(index, taskPosition, testRun) {
27-
return index < taskPosition ? colors_1.lightGreen200 : 'inherit';
28-
}
29-
var Task = function (_a) {
30-
var task = _a.task, taskPosition = _a.taskPosition, index = _a.index, testRun = _a.testRun;
31-
var backgroundColor = getStatus(index, taskPosition, testRun);
32-
var isCurrentTask = taskPosition === index;
33-
return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles.task, { backgroundColor: backgroundColor })}, taskCheckbox_1.default(isCurrentTask, testRun), React.createElement("span", {style: styles.index}, index + 1, "."), React.createElement("div", {style: styles.description}, React.createElement(index_1.Markdown, null, task.description))));
34-
};
41+
var Task = (function (_super) {
42+
__extends(Task, _super);
43+
function Task() {
44+
_super.apply(this, arguments);
45+
}
46+
Task.prototype.render = function () {
47+
var _a = this.props, testRun = _a.testRun, task = _a.task, index = _a.index, isCurrentTask = _a.isCurrentTask, isCompletedTask = _a.isCompletedTask;
48+
var backgroundColor = isCompletedTask ? colors_1.lightGreen200 : 'inherit';
49+
return (React.createElement(List_1.ListItem, {key: index, style: Object.assign({}, styles.task, { backgroundColor: backgroundColor })}, taskCheckbox_1.default(isCurrentTask, testRun), React.createElement("span", {style: styles.index}, index + 1, "."), React.createElement("div", {style: styles.description}, React.createElement(index_1.Markdown, null, task.description))));
50+
};
51+
Task = __decorate([
52+
react_redux_1.connect(function (state, props) { return ({
53+
testRun: state.testRun,
54+
isCurrentTask: state.taskPosition === props.index,
55+
isCompletedTask: state.taskPosition > props.index,
56+
}); }),
57+
__metadata('design:paramtypes', [])
58+
], Task);
59+
return Task;
60+
}(React.Component));
3561
Object.defineProperty(exports, "__esModule", { value: true });
3662
exports.default = Task;

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

+20-3
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,24 @@ var __extends = (this && this.__extends) || function (d, b) {
44
function __() { this.constructor = d; }
55
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
66
};
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+
};
716
var React = require('react');
817
var ReactDOM = require('react-dom');
18+
var react_redux_1 = require('react-redux');
919
var List_1 = require('material-ui/List');
1020
var Card_1 = require('material-ui/Card');
1121
var Subheader_1 = require('material-ui/Subheader');
1222
var Task_1 = require('../Task');
1323
var colors_1 = require('material-ui/styles/colors');
14-
var TasksComplete_1 = require('../TasksComplete');
24+
var selectors_1 = require('../../../selectors');
1525
var margin = '10px 5px';
1626
var Tasks = (function (_super) {
1727
__extends(Tasks, _super);
@@ -22,10 +32,17 @@ var Tasks = (function (_super) {
2232
ReactDOM.findDOMNode(this.refs.listEnd).scrollIntoView();
2333
};
2434
Tasks.prototype.render = function () {
25-
var _a = this.props, tasks = _a.tasks, taskPosition = _a.taskPosition, testRun = _a.testRun, completed = _a.completed, page = _a.page;
35+
var _a = this.props, tasks = _a.tasks, completed = _a.completed;
2636
var backgroundColor = completed ? colors_1.lightGreen200 : 'white';
27-
return (React.createElement("div", null, React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), tasks.map(function (task, index) { return (React.createElement(Task_1.default, {key: index, index: index, task: task, taskPosition: taskPosition, testRun: testRun})); }))), React.createElement(TasksComplete_1.default, {page: page, completed: completed}), React.createElement("div", {ref: 'listEnd'})));
37+
return (React.createElement(Card_1.Card, {style: { backgroundColor: backgroundColor, margin: margin }}, React.createElement(List_1.List, null, React.createElement(Subheader_1.default, null, "Tasks"), tasks.map(function (task, index) { return (React.createElement(Task_1.default, {key: index, index: index, task: task})); })), React.createElement("div", {ref: 'listEnd'})));
2838
};
39+
Tasks = __decorate([
40+
react_redux_1.connect(function (state) { return ({
41+
tasks: selectors_1.visibleTasksSelector(state),
42+
completed: selectors_1.pageCompletedSelector(state),
43+
}); }),
44+
__metadata('design:paramtypes', [])
45+
], Tasks);
2946
return Tasks;
3047
}(React.Component));
3148
Object.defineProperty(exports, "__esModule", { value: true });

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

+32-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,24 @@
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 colors_1 = require('material-ui/styles/colors');
21+
var selectors_1 = require('../../../selectors');
622
var styles = {
723
card: {
824
backgroundColor: colors_1.cyan500,
@@ -13,12 +29,22 @@ var styles = {
1329
fontSize: '1.1em'
1430
},
1531
};
16-
var TasksComplete = function (_a) {
17-
var page = _a.page, completed = _a.completed;
18-
if (!completed || !page.onPageComplete) {
19-
return null;
32+
var TasksComplete = (function (_super) {
33+
__extends(TasksComplete, _super);
34+
function TasksComplete() {
35+
_super.apply(this, arguments);
2036
}
21-
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: styles.text}, page.onPageComplete))));
22-
};
37+
TasksComplete.prototype.render = function () {
38+
var onPageComplete = this.props.onPageComplete;
39+
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardText, null, React.createElement(index_1.Markdown, {style: styles.text}, onPageComplete))));
40+
};
41+
TasksComplete = __decorate([
42+
react_redux_1.connect(function (state) { return ({
43+
onPageComplete: selectors_1.pageSelector(state).onPageComplete,
44+
}); }),
45+
__metadata('design:paramtypes', [])
46+
], TasksComplete);
47+
return TasksComplete;
48+
}(React.Component));
2349
Object.defineProperty(exports, "__esModule", { value: true });
2450
exports.default = TasksComplete;

‎lib/components/Page/index.js

+8-12
Original file line numberDiff line numberDiff line change
@@ -20,31 +20,27 @@ var Tasks_1 = require('./Tasks');
2020
var Hints_1 = require('./Hints');
2121
var PageToolbar_1 = require('./PageToolbar');
2222
var ProgressBar_1 = require('./ProgressBar');
23+
var TasksComplete_1 = require('./TasksComplete');
2324
var selectors_1 = require('../../selectors');
2425
var styles = {
25-
width: '100%',
26-
overflowY: 'scroll',
26+
page: {
27+
width: '100%',
28+
overflowY: 'scroll',
29+
},
2730
};
2831
var Page = (function (_super) {
2932
__extends(Page, _super);
3033
function Page() {
3134
_super.apply(this, arguments);
3235
}
3336
Page.prototype.render = function () {
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))));
37+
var _a = this.props, page = _a.page, isCompleted = _a.isCompleted;
38+
return (React.createElement("section", {style: styles.page, className: 'cr-page'}, React.createElement(index_1.ContentCard, {title: page.title, content: page.description}), React.createElement(Tasks_1.default, null), React.createElement(PageToolbar_1.default, null, React.createElement(Hints_1.default, null), isCompleted ? React.createElement(TasksComplete_1.default, null) : React.createElement(ProgressBar_1.default, null))));
3639
};
3740
Page = __decorate([
3841
react_redux_1.connect(function (state) { return ({
3942
page: selectors_1.pageSelector(state),
40-
tasks: selectors_1.tasksSelector(state),
41-
testRun: state.testRun,
42-
progress: state.progress,
43-
taskPosition: state.taskPosition,
44-
pagePosition: state.pagePosition,
45-
completed: selectors_1.pageCompletedSelector(state),
46-
task: selectors_1.taskSelector(state),
47-
taskProgress: selectors_1.taskProgressSelector(state),
43+
tasksCompleted: selectors_1.taskProgressSelector(state) === 100,
4844
}); }),
4945
__metadata('design:paramtypes', [])
5046
], Page);

‎lib/selectors/hints.js

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

‎lib/selectors/tasks.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,5 +5,5 @@ exports.tasksSelector = reselect_1.createSelector(page_1.pageSelector, function
55
exports.taskPositionSelector = function (state) { return state.taskPosition; };
66
exports.taskSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return tasks.length && taskPosition <= tasks.length - 1 ?
77
tasks[taskPosition] : null; });
8-
exports.visibleTasksSelector = function (state) { return reselect_1.createSelector(exports.tasksSelector, function (tasks) { return tasks.slice(0, state.taskPosition + 1); }); };
8+
exports.visibleTasksSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return tasks.slice(0, taskPosition + 1); });
99
exports.taskProgressSelector = reselect_1.createSelector(exports.tasksSelector, function (state) { return state.taskPosition; }, function (tasks, taskPosition) { return (taskPosition / tasks.length) * 100; });

‎src/components/Page/Hints/index.tsx

+17-23
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
44
import {Markdown} from '../../index';
55
import HintButton from './HintButton';
66
import Help from 'material-ui/svg-icons/action/help';
7-
import {hintsSelector, hintSelector} from '../../../selectors';
7+
import {hintSelector} from '../../../selectors';
88

99
const styles = {
1010
position: 'relative',
@@ -14,14 +14,13 @@ const styles = {
1414
};
1515

1616
@connect(state => ({
17-
hints: hintsSelector(state),
1817
hint: hintSelector(state),
1918
}))
2019
export default class Hints extends React.Component<{
21-
hints?: string[], hint?: string
20+
hintsLength?: number, hint?: string
2221
}, {}> {
2322
render() {
24-
const {hint, hints} = this.props;
23+
const {hint} = this.props;
2524
if (!hint) {
2625
return null;
2726
}
@@ -39,25 +38,20 @@ export default class Hints extends React.Component<{
3938
>
4039
<Markdown>{hint}</Markdown>
4140
</CardText>
42-
{hints.length > 1
43-
? <CardActions
44-
style={{paddingBottom: '30px !important'}}
45-
expandable={true}
46-
className='cr-task-hints-actions'
47-
>
48-
<HintButton
49-
type='prev'
50-
label='Previous'
51-
hintsLength={hints.length}
52-
/>
53-
<HintButton
54-
type='next'
55-
label='Next'
56-
hintsLength={hints.length}
57-
/>
58-
</CardActions>
59-
: null
60-
}
41+
<CardActions
42+
style={{paddingBottom: '30px !important'}}
43+
expandable={true}
44+
className='cr-task-hints-actions'
45+
>
46+
<HintButton
47+
type='prev'
48+
label='Previous'
49+
/>
50+
<HintButton
51+
type='next'
52+
label='Next'
53+
/>
54+
</CardActions>
6155
</Card>
6256
);
6357
}

‎src/components/Page/ProgressBar/index.tsx

+3-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import {connect} from 'react-redux';
33
import LinearProgress from 'material-ui/LinearProgress';
4-
import {taskProgressSelector, pageCompletedSelector} from '../../../selectors';
4+
import {taskProgressSelector} from '../../../selectors';
55

66
const style = {
77
height: '10px',
@@ -10,18 +10,13 @@ const style = {
1010
};
1111

1212
@connect(state => ({
13-
// pageCompletedSelector(state),
14-
completed: state.progress.pages[state.pagePosition],
1513
taskProgress: (state.taskPosition / state.tutorial.pages[state.pagePosition].tasks.length) * 100
1614
}))
1715
export default class ProgressBar extends React.Component<{
18-
taskProgress?: number, completed?: boolean
16+
taskProgress?: number
1917
}, {}> {
2018
render() {
21-
const {completed, taskProgress} = this.props;
22-
if (completed) {
23-
return null;
24-
}
19+
const {taskProgress} = this.props;
2520
return (
2621
<LinearProgress
2722
mode='determinate'

0 commit comments

Comments
 (0)