Skip to content

Commit b78b4a1

Browse files
ShMcKShMcK
committed
refactor tutorial components
1 parent 9b055fe commit b78b4a1

File tree

6 files changed

+170
-115
lines changed

6 files changed

+170
-115
lines changed

‎lib/components/tutorials/buttons.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
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 FlatButton_1 = require('material-ui/FlatButton');
19+
var actions_1 = require('../../actions/actions');
20+
var file_upload_1 = require('material-ui/svg-icons/file/file-upload');
21+
var LoadTutorials = (function (_super) {
22+
__extends(LoadTutorials, _super);
23+
function LoadTutorials() {
24+
_super.apply(this, arguments);
25+
}
26+
LoadTutorials.prototype.render = function () {
27+
return React.createElement(FlatButton_1.default, {style: { margin: '0 90px' }, label: 'Check for Tutorials', secondary: true, onTouchTap: this.props.loadTutorials});
28+
};
29+
LoadTutorials = __decorate([
30+
react_redux_1.connect(null, function (dispatch) {
31+
return {
32+
loadTutorials: function () {
33+
dispatch(actions_1.loadTutorials());
34+
}
35+
};
36+
}),
37+
__metadata('design:paramtypes', [])
38+
], LoadTutorials);
39+
return LoadTutorials;
40+
}(React.Component));
41+
exports.LoadTutorials = LoadTutorials;
42+
var UpdateTutorial = (function (_super) {
43+
__extends(UpdateTutorial, _super);
44+
function UpdateTutorial() {
45+
_super.apply(this, arguments);
46+
}
47+
UpdateTutorial.prototype.render = function () {
48+
var _a = this.props, name = _a.name, updateTutorial = _a.updateTutorial;
49+
return React.createElement(file_upload_1.default, {onClick: updateTutorial(name)});
50+
};
51+
UpdateTutorial = __decorate([
52+
react_redux_1.connect(null, function (dispatch) {
53+
return {
54+
updateTutorial: function (name) {
55+
dispatch(actions_1.updateTutorial(name));
56+
}
57+
};
58+
}),
59+
__metadata('design:paramtypes', [])
60+
], UpdateTutorial);
61+
return UpdateTutorial;
62+
}(React.Component));
63+
exports.UpdateTutorial = UpdateTutorial;
64+
var SelectTutorial = (function (_super) {
65+
__extends(SelectTutorial, _super);
66+
function SelectTutorial() {
67+
_super.apply(this, arguments);
68+
}
69+
SelectTutorial.prototype.render = function () {
70+
var _a = this.props, tutorial = _a.tutorial, selectTutorial = _a.selectTutorial;
71+
var name = tutorial.name;
72+
if (name.match(/^coderoad-tutorial-/)) {
73+
name = name.slice(18);
74+
}
75+
if (name.match(/^coderoad-/)) {
76+
name = name.slice(9);
77+
}
78+
return React.createElement(FlatButton_1.default, {label: name, primary: true, onTouchTap: selectTutorial.bind(this, tutorial)});
79+
};
80+
SelectTutorial = __decorate([
81+
react_redux_1.connect(null, function (dispatch) {
82+
return {
83+
selectTutorial: function (tutorial) {
84+
actions_1.loadTutorial(tutorial);
85+
dispatch(actions_1.setRoute('progress'));
86+
},
87+
};
88+
}),
89+
__metadata('design:paramtypes', [])
90+
], SelectTutorial);
91+
return SelectTutorial;
92+
}(React.Component));
93+
exports.SelectTutorial = SelectTutorial;

‎lib/components/tutorials/tutorials.js

+6-64
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,12 @@
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 FlatButton_1 = require('material-ui/FlatButton');
183
var Table_1 = require('material-ui/Table');
19-
var react_redux_1 = require('react-redux');
20-
var actions_1 = require('../../actions/actions');
21-
var file_upload_1 = require('material-ui/svg-icons/file/file-upload');
22-
var TutorialList = (function (_super) {
23-
__extends(TutorialList, _super);
24-
function TutorialList() {
25-
_super.apply(this, arguments);
26-
}
27-
TutorialList.prototype.trim = function (name) {
28-
if (name.match(/^coderoad-tutorial-/)) {
29-
return name.slice(18);
30-
}
31-
if (name.match(/^coderoad-/)) {
32-
return name.slice(9);
33-
}
34-
return name;
35-
};
36-
TutorialList.prototype.render = function () {
37-
var _this = this;
38-
var _a = this.props, tutorials = _a.tutorials, loadTutorials = _a.loadTutorials, selectTutorial = _a.selectTutorial, toggleAlert = _a.toggleAlert, updateTutorial = _a.updateTutorial;
39-
return (React.createElement("div", {className: 'cr-tutorials'}, 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 (tutorial, index) {
40-
return (React.createElement(Table_1.TableRow, {key: index}, React.createElement(Table_1.TableRowColumn, null, React.createElement(FlatButton_1.default, {label: _this.trim(tutorial.name), primary: true, onTouchTap: selectTutorial.bind(_this, tutorial)})), !!tutorial.latest
41-
? React.createElement(Table_1.TableRowColumn, null, tutorial.version, " ", React.createElement(file_upload_1.default, {onClick: updateTutorial(tutorial.name)}))
42-
: React.createElement(Table_1.TableRowColumn, null, tutorial.version)));
43-
}))), React.createElement("br", null), React.createElement(FlatButton_1.default, {style: { margin: '0 90px' }, label: 'Check for Tutorials', secondary: true, onTouchTap: loadTutorials})));
44-
};
45-
TutorialList = __decorate([
46-
react_redux_1.connect(null, function (dispatch) {
47-
return {
48-
selectTutorial: function (tutorial) {
49-
actions_1.loadTutorial(tutorial);
50-
dispatch(actions_1.setRoute('progress'));
51-
},
52-
toggleAlert: function (item) {
53-
dispatch(actions_1.toggleAlert(item));
54-
},
55-
loadTutorials: function () {
56-
dispatch(actions_1.loadTutorials());
57-
},
58-
updateTutorial: function (name) {
59-
dispatch(actions_1.updateTutorial(name));
60-
}
61-
};
62-
}),
63-
__metadata('design:paramtypes', [])
64-
], TutorialList);
65-
return TutorialList;
66-
}(React.Component));
4+
var buttons_1 = require('./buttons');
675
exports.Tutorials = function (_a) {
686
var tutorials = _a.tutorials;
69-
return (React.createElement(TutorialList, {tutorials: tutorials}));
7+
return (React.createElement("div", {className: 'cr-tutorials'}, 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 (tutorial, index) {
8+
return (React.createElement(Table_1.TableRow, {key: index}, React.createElement(Table_1.TableRowColumn, null, React.createElement(buttons_1.SelectTutorial, {tutorial: tutorial})), !!tutorial.latest
9+
? React.createElement(Table_1.TableRowColumn, null, tutorial.version, " ", React.createElement(buttons_1.UpdateTutorial, {name: tutorial.name}))
10+
: React.createElement(Table_1.TableRowColumn, null, tutorial.version)));
11+
}))), React.createElement("br", null), React.createElement(buttons_1.LoadTutorials, null)));
7012
};

‎src/components/progress/progress.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,5 @@ export const Progress: React.StatelessComponent<{
9797
</ListItem>;
9898
})}
9999
</List>
100-
101100
</Paper>
102101
);

‎src/components/tutorials/buttons.tsx

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import * as React from 'react';
2+
import {connect} from 'react-redux';
3+
import FlatButton from 'material-ui/FlatButton';
4+
import {
5+
loadTutorial, loadTutorials, updateTutorial, setRoute, toggleAlert
6+
} from '../../actions/actions';
7+
import FileUpload from 'material-ui/svg-icons/file/file-upload';
8+
9+
@connect(null, (dispatch) => {
10+
return {
11+
loadTutorials: () => {
12+
dispatch(loadTutorials());
13+
}
14+
};
15+
})
16+
export class LoadTutorials extends React.Component<{
17+
loadTutorials?: any
18+
}, {}> {
19+
render() {
20+
return <FlatButton style={{margin: '0 90px'}} label='Check for Tutorials' secondary={true} onTouchTap={this.props.loadTutorials} />;
21+
}
22+
}
23+
24+
@connect(null, (dispatch) => {
25+
return {
26+
updateTutorial: (name: string) => {
27+
dispatch(updateTutorial(name));
28+
}
29+
};
30+
})
31+
export class UpdateTutorial extends React.Component<{
32+
name: string, updateTutorial?: any
33+
}, {}> {
34+
render() {
35+
const {name, updateTutorial} = this.props;
36+
return <FileUpload onClick={updateTutorial(name)} />;
37+
}
38+
}
39+
40+
@connect(null, (dispatch) => {
41+
return {
42+
selectTutorial: (tutorial: CR.Tutorial) => {
43+
loadTutorial(tutorial);
44+
dispatch(setRoute('progress'));
45+
},
46+
};
47+
})
48+
export class SelectTutorial extends React.Component<{
49+
tutorial: CR.Tutorial, selectTutorial?: any
50+
}, {}> {
51+
render() {
52+
const {tutorial, selectTutorial} = this.props;
53+
let name = tutorial.name;
54+
if (name.match(/^coderoad-tutorial-/)) {
55+
name = name.slice(18);
56+
}
57+
if (name.match(/^coderoad-/)) {
58+
name = name.slice(9);
59+
}
60+
return <FlatButton label={name} primary={true} onTouchTap={selectTutorial.bind(this, tutorial)} />;
61+
}
62+
}

‎src/components/tutorials/tutorials.tsx

+8-50
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,14 @@
11
import * as React from 'react';
2-
import FlatButton from 'material-ui/FlatButton';
32
import {
43
Table, TableHeaderColumn, TableRow, TableHeader, TableRowColumn, TableBody
54
} from 'material-ui/Table';
6-
import {connect} from 'react-redux';
75
import {
8-
loadTutorial, loadTutorials, updateTutorial, setRoute, toggleAlert
9-
} from '../../actions/actions';
6+
LoadTutorials, SelectTutorial, UpdateTutorial
7+
} from './buttons';
108

11-
import {pink500} from 'material-ui/styles/colors';
12-
import FileUpload from 'material-ui/svg-icons/file/file-upload';
13-
14-
@connect(null, (dispatch) => {
15-
return {
16-
selectTutorial: (tutorial: CR.Tutorial) => {
17-
loadTutorial(tutorial);
18-
dispatch(setRoute('progress'));
19-
},
20-
toggleAlert: (item: CR.Alert): void => {
21-
dispatch(toggleAlert(item));
22-
},
23-
loadTutorials: () => {
24-
dispatch(loadTutorials());
25-
},
26-
updateTutorial: (name: string) => {
27-
dispatch(updateTutorial(name));
28-
}
29-
};
30-
})
31-
class TutorialList extends React.Component<{
32-
tutorials: CR.Tutorial[], loadTutorials?: () => void,
33-
selectTutorial?: (tutorial: CR.Tutorial) => void,
34-
toggleAlert?: (item: CR.Alert) => void, updateTutorial?: any
35-
}, {}> {
36-
trim(name: string): string {
37-
if (name.match(/^coderoad-tutorial-/)) {
38-
return name.slice(18);
39-
}
40-
if (name.match(/^coderoad-/)) {
41-
return name.slice(9);
42-
}
43-
return name;
44-
}
45-
render() {
46-
const {tutorials, loadTutorials, selectTutorial, toggleAlert, updateTutorial} = this.props;
47-
return (
9+
export const Tutorials : React.StatelessComponent<{
10+
tutorials: CR.Tutorial[]
11+
}> = ({tutorials}) => (
4812
<div className='cr-tutorials'>
4913
<Table>
5014
<TableHeader
@@ -61,11 +25,11 @@ class TutorialList extends React.Component<{
6125
return (
6226
<TableRow key={index}>
6327
<TableRowColumn>
64-
<FlatButton label={this.trim(tutorial.name)} primary={true} onTouchTap={selectTutorial.bind(this, tutorial)} />
28+
<SelectTutorial tutorial={tutorial} />
6529
</TableRowColumn>
6630
{!!tutorial.latest
6731
? <TableRowColumn>
68-
{tutorial.version} <FileUpload onClick={updateTutorial(tutorial.name)} />
32+
{tutorial.version} <UpdateTutorial name={tutorial.name} />
6933
</TableRowColumn>
7034
: <TableRowColumn>{tutorial.version}</TableRowColumn>}
7135
</TableRow>
@@ -76,12 +40,6 @@ class TutorialList extends React.Component<{
7640
</Table>
7741

7842
<br />
79-
<FlatButton style={{margin: '0 90px'}} label='Check for Tutorials' secondary={true} onTouchTap={loadTutorials} />
43+
<LoadTutorials />
8044
</div>
81-
);
82-
}
83-
}
84-
85-
export const Tutorials = ({tutorials}) => (
86-
<TutorialList tutorials={tutorials} />
8745
);

‎tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@
122122
"src/components/start/checks/steps.tsx",
123123
"src/components/start/checks/verify.tsx",
124124
"src/components/start/start.tsx",
125+
"src/components/tutorials/buttons.tsx",
125126
"src/components/tutorials/tutorials.tsx"
126127
],
127128
"exclude": [

0 commit comments

Comments
 (0)