Skip to content

Commit fb126a1

Browse files
ShMcKShMcK
committed
setup TutorialInfo component
1 parent eddaf73 commit fb126a1

File tree

8 files changed

+171
-33
lines changed

8 files changed

+171
-33
lines changed

‎lib/components/TutorialConfig/index.js‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,7 @@ var TutorialConfig = (function (_super) {
3434
__extends(TutorialConfig, _super);
3535
function TutorialConfig(props) {
3636
_super.call(this, props);
37-
this.state = {
38-
name: 'coderoad-',
39-
repo: '',
40-
language: 'JS',
41-
runner: 'mocha-coderoad',
42-
runnerOptions: {}
43-
};
37+
this.state = this.props.tutorialConfig;
4438
}
4539
TutorialConfig.prototype.handleText = function (prop, event) {
4640
this.handleChange(prop, event.target.value);
@@ -57,7 +51,7 @@ var TutorialConfig = (function (_super) {
5751
this.props.save(this.state);
5852
};
5953
TutorialConfig.prototype.render = function () {
60-
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement(TextField_1.default, {floatingLabelText: 'Tutorial Package Name', value: this.state.name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Language', value: this.state.language, onChange: this.handleSelect.bind(this, 'language')}, languageItems_1.default()), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Test Runner', value: this.state.runner, onChange: this.handleSelect.bind(this, 'runner')}, runnerItems_1.default(this.state.language)), React.createElement("br", null), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Save', primary: true, onTouchTap: this.save.bind(this)}), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Continue', secondary: true, onTouchTap: this.props.routeToInfo.bind(this)})));
54+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement(TextField_1.default, {floatingLabelText: 'Tutorial Package Name', defaultValue: this.state.name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Language', value: this.state.language, onChange: this.handleSelect.bind(this, 'language')}, languageItems_1.default()), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Test Runner', value: this.state.runner, onChange: this.handleSelect.bind(this, 'runner')}, runnerItems_1.default(this.state.language)), React.createElement("br", null), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Save', primary: true, onTouchTap: this.save.bind(this)}), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Continue', secondary: true, onTouchTap: this.props.routeToInfo.bind(this)})));
6155
};
6256
TutorialConfig = __decorate([
6357
react_redux_1.connect(null, function (dispatch) {

‎lib/components/TutorialInfo/index.js‎

Lines changed: 60 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,65 @@
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');
3-
var TutorialInfo = function (_a) {
4-
var tutorialInfo = _a.tutorialInfo;
5-
return (React.createElement("div", null));
17+
var react_redux_1 = require('react-redux');
18+
var TextField_1 = require('material-ui/TextField');
19+
var Card_1 = require('material-ui/Card');
20+
var RaisedButton_1 = require('material-ui/RaisedButton');
21+
var actions_1 = require('../../actions');
22+
var styles = {
23+
margin: '10px',
24+
padding: '30px 20px',
25+
textAlign: 'center',
26+
};
27+
var buttonStyles = {
28+
margin: '30px 10px 20px 10px',
629
};
30+
var TutorialInfo = (function (_super) {
31+
__extends(TutorialInfo, _super);
32+
function TutorialInfo(props) {
33+
_super.call(this, props);
34+
this.state = this.props.tutorialInfo;
35+
}
36+
TutorialInfo.prototype.handleText = function (prop, event) {
37+
this.handleChange(prop, event.target.value);
38+
};
39+
TutorialInfo.prototype.handleSelect = function (prop, event, index, value) {
40+
this.handleChange(prop, value);
41+
};
42+
TutorialInfo.prototype.handleChange = function (prop, val) {
43+
var obj = {};
44+
obj[prop] = val;
45+
this.setState(Object.assign({}, this.state, obj));
46+
};
47+
TutorialInfo.prototype.save = function () {
48+
this.props.save(this.state);
49+
};
50+
TutorialInfo.prototype.render = function () {
51+
return (React.createElement(Card_1.Card, {style: styles}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement(TextField_1.default, {floatingLabelText: 'Title', defaultValue: this.state.name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(TextField_1.default, {floatingLabelText: 'Description', defaultValue: this.state.description, onChange: this.handleText.bind(this, 'description')}), React.createElement("br", null), React.createElement(TextField_1.default, {floatingLabelText: 'Version', defaultValue: this.state.version.join('.'), disabled: true, onChange: this.handleText.bind(this, 'version')}), React.createElement("br", null), React.createElement(TextField_1.default, {floatingLabelText: 'Keywords', defaultValue: this.state.keywords.join(','), multiLine: true, onChange: this.handleText.bind(this, 'keywords')}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Save', primary: true, onTouchTap: this.save.bind(this)}), React.createElement(RaisedButton_1.default, {style: buttonStyles, label: 'Continue', secondary: true, onTouchTap: this.props.routeToTutorial.bind(this)})));
52+
};
53+
TutorialInfo = __decorate([
54+
react_redux_1.connect(null, function (dispatch) {
55+
return {
56+
save: function (config) { return dispatch(tutorialConfigSave(config)); },
57+
routeToTutorial: function () { return dispatch(actions_1.routeSet('page')); }
58+
};
59+
}),
60+
__metadata('design:paramtypes', [Object])
61+
], TutorialInfo);
62+
return TutorialInfo;
63+
}(React.Component));
764
Object.defineProperty(exports, "__esModule", { value: true });
865
exports.default = TutorialInfo;

‎lib/modules/tutorial-config/reducer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
"use strict";
22
var types_1 = require('./types');
33
var _config = {
4-
name: '',
4+
name: 'coderoad-',
55
repo: '',
6-
language: '',
7-
runner: '',
6+
language: 'JS',
7+
runner: 'mocha-coderoad',
88
runnerOptions: {}
99
};
1010
function tutorialConfig(c, action) {

‎lib/modules/tutorial-info/reducer.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ var types_1 = require('./types');
33
var _info = {
44
name: '',
55
description: '',
6-
version: ''
6+
version: [0, 1, 0],
7+
keywords: ['coderoad', 'tutorial'],
78
};
89
function tutorialConfig(i, action) {
910
if (i === void 0) { i = _info; }

‎src/components/TutorialConfig/index.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,7 @@ export default class TutorialConfig extends React.Component <{
3535
}> {
3636
constructor(props) {
3737
super(props);
38-
this.state = {
39-
name: 'coderoad-',
40-
repo: '',
41-
language: 'JS',
42-
runner: 'mocha-coderoad',
43-
runnerOptions: {}
44-
};
38+
this.state = this.props.tutorialConfig;
4539
}
4640
handleText(prop, event) {
4741
this.handleChange(prop, event.target.value);
@@ -65,7 +59,7 @@ export default class TutorialConfig extends React.Component <{
6559
/>
6660
<TextField
6761
floatingLabelText='Tutorial Package Name'
68-
value={this.state.name}
62+
defaultValue={this.state.name}
6963
onChange={this.handleText.bind(this, 'name')}
7064
/>
7165
<br />

‎src/components/TutorialInfo/index.tsx‎

Lines changed: 97 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,100 @@
11
import * as React from 'react';
2+
import {connect} from 'react-redux';
3+
import TextField from 'material-ui/TextField';
4+
import SelectField from 'material-ui/SelectField';
5+
import MenuItem from 'material-ui/MenuItem';
6+
import {Card, CardHeader} from 'material-ui/Card'
7+
import RaisedButton from 'material-ui/RaisedButton';
8+
import {tutorialInfoSave, routeSet} from '../../actions';
29

3-
const TutorialInfo: React.StatelessComponent<{
4-
tutorialInfo: Tutorial.Info
5-
}> = ({tutorialInfo}) => (
6-
<div></div>
7-
);
10+
const styles = {
11+
margin: '10px',
12+
padding: '30px 20px',
13+
textAlign: 'center',
14+
};
815

9-
export default TutorialInfo;
16+
const buttonStyles = {
17+
margin: '30px 10px 20px 10px',
18+
};
19+
20+
// name: '',
21+
// description: '',
22+
// version: ''
23+
24+
@connect(null, dispatch => {
25+
return {
26+
save: (config: Tutorial.ConfigSet) => dispatch(tutorialConfigSave(config)),
27+
routeToTutorial: () => dispatch(routeSet('page'))
28+
};
29+
})
30+
export default class TutorialInfo extends React.Component<{
31+
tutorialInfo: Tutorial.Info, save?: any, routeToTutorial?: any
32+
}, {
33+
name: string, description: string, version: string
34+
}> {
35+
constructor(props) {
36+
super(props);
37+
this.state = this.props.tutorialInfo;
38+
}
39+
handleText(prop, event) {
40+
this.handleChange(prop, event.target.value);
41+
}
42+
handleSelect(prop, event, index, value) {
43+
this.handleChange(prop, value);
44+
}
45+
handleChange(prop, val) {
46+
const obj = {};
47+
obj[prop] = val;
48+
this.setState(Object.assign({}, this.state, obj));
49+
}
50+
save() {
51+
this.props.save(this.state);
52+
}
53+
render() {
54+
return (
55+
<Card style={styles}>
56+
<CardHeader
57+
title='Tutorial Info'
58+
/>
59+
<TextField
60+
floatingLabelText='Title'
61+
defaultValue={this.state.name}
62+
onChange={this.handleText.bind(this, 'name')}
63+
/>
64+
<br />
65+
<TextField
66+
floatingLabelText='Description'
67+
defaultValue={this.state.description}
68+
onChange={this.handleText.bind(this, 'description')}
69+
/>
70+
<br />
71+
<TextField
72+
floatingLabelText='Version'
73+
defaultValue={this.state.version.join('.')}
74+
disabled={true}
75+
onChange={this.handleText.bind(this, 'version')}
76+
/>
77+
<br />
78+
<TextField
79+
floatingLabelText='Keywords'
80+
defaultValue={this.state.keywords.join(', ')}
81+
multiLine={true}
82+
onChange={this.handleText.bind(this, 'keywords')}
83+
/>
84+
<br />
85+
<RaisedButton
86+
style={buttonStyles}
87+
label='Save'
88+
primary={true}
89+
onTouchTap={this.save.bind(this)}
90+
/>
91+
<RaisedButton
92+
style={buttonStyles}
93+
label='Continue'
94+
secondary={true}
95+
onTouchTap={this.props.routeToTutorial.bind(this)}
96+
/>
97+
</Card>
98+
);
99+
}
100+
}

‎src/modules/tutorial-config/reducer.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import {TUTORIAL_CONFIG_SAVE} from './types';
22

33
const _config: Tutorial.ConfigSet = {
4-
name: '',
4+
name: 'coderoad-',
55
repo: '',
6-
language: '',
7-
runner: '',
6+
language: 'JS',
7+
runner: 'mocha-coderoad',
88
runnerOptions: {}
99
};
1010

‎src/modules/tutorial-info/reducer.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import {TUTORIAL_INFO_SAVE} from './types';
33
const _info: Tutorial.Info = {
44
name: '',
55
description: '',
6-
version: ''
6+
version: [0, 1, 0],
7+
keywords: ['coderoad', 'tutorial'],
78
};
89

910
export default function tutorialConfig(

0 commit comments

Comments
 (0)