Skip to content

Commit d5f56b5

Browse files
ShMcKShMcK
committed
improved config form
1 parent 9663351 commit d5f56b5

File tree

18 files changed

+156
-101
lines changed

18 files changed

+156
-101
lines changed

‎lib/components/AppMenu/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ var AppMenu = (function (_super) {
2828
}
2929
AppMenu.prototype.render = function () {
3030
var route = this.props.route;
31-
return (React.createElement(AppBar_1.default, {title: 'CodeRoad', className: 'cr-menu-bar', style: { styles: styles }, iconElementLeft: React.createElement(CloseWindow_1.default, null), iconElementRight: menuRight_1.default(route)}));
31+
return (React.createElement(AppBar_1.default, {title: 'CodeRoad Builder', className: 'cr-menu-bar', style: { styles: styles }, iconElementLeft: React.createElement(CloseWindow_1.default, null), iconElementRight: menuRight_1.default(route)}));
3232
};
3333
AppMenu = __decorate([
3434
react_redux_1.connect(function (state) { return ({

‎lib/components/Config/index.js‎

Lines changed: 12 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ var redux_form_1 = require('redux-form');
1919
var Card_1 = require('material-ui/Card');
2020
var RaisedButton_1 = require('material-ui/RaisedButton');
2121
var actions_1 = require('../../actions');
22-
var languageItems_1 = require('./languageItems');
2322
var runnerItems_1 = require('./runnerItems');
2423
var TopPanel_1 = require('../TopPanel');
2524
var textField_1 = require('../Form/textField');
@@ -59,26 +58,26 @@ var TutorialConfig = (function (_super) {
5958
name: name,
6059
language: config.language,
6160
runner: config.runner,
61+
repo: '',
6262
});
6363
});
6464
document.getElementsByTagName('input')[0].focus();
6565
};
6666
TutorialConfig.prototype.shouldComponentUpdate = function () {
67-
if (document.activeElement &&
68-
typeof document.activeElement.value === 'string') {
69-
return false;
70-
}
67+
return !(document.activeElement &&
68+
typeof document.activeElement.value === 'string');
7169
};
7270
TutorialConfig.prototype.onSubmit = function (values) {
73-
var name = values.name, language = values.language, runner = values.runner, repo = values.repo;
71+
var name = values.name, runnerItem = values.runnerItem, repo = values.repo;
72+
var _a = runnerItem.split(': '), language = _a[0], runner = _a[1];
7473
this.props.pjSave(Object.assign({}, this.props.packageJson, {
7574
name: name,
7675
repositiory: repo || '',
7776
bugs: {
7877
url: repo || '',
7978
},
8079
config: {
81-
language: language, runner: runner
80+
language: language, runner: runner,
8281
}
8382
}));
8483
};
@@ -87,7 +86,7 @@ var TutorialConfig = (function (_super) {
8786
this.props.routeSet('page');
8887
};
8988
TutorialConfig.prototype.render = function () {
90-
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
89+
var _a = this.props, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid, packageJson = _a.packageJson;
9190
return (React.createElement("section", {className: 'cr-page'},
9291
React.createElement(Card_1.Card, {style: styles.card},
9392
React.createElement(Card_1.CardTitle, {style: styles.title, title: 'Tutorial Configuration'}),
@@ -97,20 +96,15 @@ var TutorialConfig = (function (_super) {
9796
floatingLabelText: 'Tutorial Name',
9897
hintText: 'coderoad-tutorial-name',
9998
}), tabIndex: '1'}),
100-
React.createElement(redux_form_1.Field, {name: 'language', component: selectField_1.default.bind(null, {
101-
children: languageItems_1.default(),
102-
floatingLabelText: 'language',
103-
id: 'language',
104-
}), tabIndex: '2'}),
105-
React.createElement(redux_form_1.Field, {name: 'runner', component: selectField_1.default.bind(null, {
106-
children: runnerItems_1.default('JS'),
107-
floatingLabelText: 'Test Runner',
99+
React.createElement(redux_form_1.Field, {name: 'runnerItem', component: selectField_1.default.bind(null, {
100+
children: runnerItems_1.default(),
101+
floatingLabelText: 'runner',
108102
id: 'runner',
109-
}), tabIndex: '3'}),
103+
}), tabIndex: '2'}),
110104
React.createElement(redux_form_1.Field, {id: 'repo', name: 'repo', component: textField_1.default.bind(null, {
111105
floatingLabelText: 'Path to Repo (optional)',
112106
hintText: 'http://github.com/path/to/repo',
113-
}), tabIndex: '4'}),
107+
}), tabIndex: '3'}),
114108
React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: submitting}),
115109
React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.routeToPage.bind(this)}))
116110
))

‎lib/components/Config/languageItems.js‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎lib/components/Config/runnerItems.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,12 @@
22
var React = require('react');
33
var MenuItem_1 = require('material-ui/MenuItem');
44
var core_coderoad_1 = require('core-coderoad');
5-
function runnerItems(language) {
6-
return core_coderoad_1.tutorialConfigOptions[language].runners.map(function (runner, index) {
7-
return (React.createElement(MenuItem_1.default, {key: index, value: runner, primaryText: runner}));
5+
function runnerItems() {
6+
return Object.keys(core_coderoad_1.tutorialConfigOptions).map(function (lang, lIndex) {
7+
return core_coderoad_1.tutorialConfigOptions[lang].runners.map(function (runner, rIndex) {
8+
var val = lang + ": " + runner;
9+
return (React.createElement(MenuItem_1.default, {key: lIndex + "." + rIndex, value: val, primaryText: val}));
10+
});
811
});
912
}
1013
Object.defineProperty(exports, "__esModule", { value: true });

‎lib/components/Config/validate.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
"use strict";
2-
var core_coderoad_1 = require('core-coderoad');
32
var validate = function (values) {
43
var errors = {};
5-
var requiredFields = ['name', 'language', 'runner'];
4+
var requiredFields = ['name', 'language', 'runnerItem'];
65
requiredFields.forEach(function (field) {
76
if (!values[field]) {
87
errors[field] = 'Required';
@@ -11,10 +10,6 @@ var validate = function (values) {
1110
if (values.name && !values.name.match(/^coderoad-[A-Za-z0-9\-]+$/)) {
1211
errors.name = 'Invalid "coderoad-*" name';
1312
}
14-
if (values.language &&
15-
!values.runner && !core_coderoad_1.tutorialConfigOptions[values.language].runners.includes(values.runner)) {
16-
errors.runner = values.runner + " runner does not match language " + values.language;
17-
}
1813
if (values.repo) {
1914
if (!values.repo.match(/^https?:\/\/[a-zA-Z\.\/]+$/)) {
2015
errors.repo = 'Invalid http(s)://github.com/user/repo';

‎lib/components/SidePanel/SidePanel.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@ var SidePanel = (function (_super) {
3737
React.createElement("div", {className: 'cr-bg'},
3838
React.createElement(index_1.AppMenu, null),
3939
React.createElement(Routes_1.default, null))
40-
),
41-
React.createElement(index_1.Alert, null)));
40+
)
41+
));
4242
};
4343
SidePanel = __decorate([
4444
react_redux_1.connect(function (state) { return ({

‎lib/components/Test/Solution.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ var styles = {
2424
card: {
2525
margin: '5px',
2626
},
27+
title: {
28+
textAlign: 'center',
29+
},
2730
buttons: {
2831
textAlign: 'center',
2932
},
@@ -39,9 +42,9 @@ var Solution = (function (_super) {
3942
};
4043
Solution.prototype.render = function () {
4144
return (React.createElement(Card_1.Card, {style: styles.card, initiallyExpanded: true},
42-
React.createElement(Card_1.CardTitle, {title: 'Solution'}),
45+
React.createElement(Card_1.CardTitle, {title: 'Solution', style: styles.title}),
4346
React.createElement(Card_1.CardText, {expandable: true},
44-
React.createElement("p", null, "Test a solution against your tests"),
47+
React.createElement("p", null, "Try out a solution against your tests"),
4548
React.createElement(index_1.TextEditor, {name: 'solution', ref: 'solution', placeholder: 'var a = "example code";', lang: this.props.language}),
4649
React.createElement("br", null),
4750
React.createElement("div", {style: styles.buttons},

‎lib/components/Test/TestMenu.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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 Card_1 = require('material-ui/Card');
19+
var styles = {
20+
card: {
21+
margin: '5px',
22+
},
23+
title: {
24+
textAlign: 'center',
25+
},
26+
buttons: {
27+
textAlign: 'center',
28+
},
29+
};
30+
var TestMenu = (function (_super) {
31+
__extends(TestMenu, _super);
32+
function TestMenu() {
33+
_super.apply(this, arguments);
34+
}
35+
TestMenu.prototype.render = function () {
36+
return (React.createElement(Card_1.Card, {style: styles.card, initiallyExpanded: true},
37+
React.createElement(Card_1.CardTitle, {title: 'Test Menu', style: styles.title}),
38+
React.createElement(Card_1.CardText, {expandable: true},
39+
React.createElement("p", null, "Try out a solution against your tests")
40+
)));
41+
};
42+
TestMenu = __decorate([
43+
react_redux_1.connect(null, null),
44+
__metadata('design:paramtypes', [])
45+
], TestMenu);
46+
return TestMenu;
47+
}(React.Component));
48+
Object.defineProperty(exports, "__esModule", { value: true });
49+
exports.default = TestMenu;

‎lib/components/Test/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ var __extends = (this && this.__extends) || function (d, b) {
77
var React = require('react');
88
var TopPanel_1 = require('../TopPanel');
99
var Solution_1 = require('./Solution');
10+
var TestMenu_1 = require('./TestMenu');
1011
var styles = {
1112
page: {
1213
height: '100%',
@@ -24,8 +25,8 @@ var Test = (function (_super) {
2425
};
2526
Test.prototype.render = function () {
2627
return (React.createElement("section", {style: styles.page, className: 'cr-page'},
27-
React.createElement(Solution_1.default, null)
28-
));
28+
React.createElement(TestMenu_1.default, null),
29+
React.createElement(Solution_1.default, null)));
2930
};
3031
return Test;
3132
}(React.Component));

‎src/components/Config/index.tsx‎

Lines changed: 13 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -59,20 +59,20 @@ class TutorialConfig extends React.Component <{
5959
name,
6060
language: config.language,
6161
runner: config.runner,
62+
repo: '',
6263
});
6364
});
6465
// focus first element
6566
document.getElementsByTagName('input')[0].focus();
6667
}
6768
shouldComponentUpdate() {
6869
// hack to prevent lost focus on component update
69-
if (document.activeElement &&
70-
typeof document.activeElement.value === 'string') {
71-
return false;
72-
}
70+
return !(document.activeElement &&
71+
typeof document.activeElement.value === 'string');
7372
}
7473
onSubmit(values) {
75-
const {name, language, runner, repo} = values;
74+
const {name, runnerItem, repo} = values;
75+
const [language, runner] = runnerItem.split(': ');
7676
this.props.pjSave(Object.assign(
7777
{},
7878
this.props.packageJson,
@@ -83,7 +83,7 @@ class TutorialConfig extends React.Component <{
8383
url: repo || '',
8484
},
8585
config: {
86-
language, runner
86+
language, runner,
8787
}
8888
})
8989
);
@@ -93,7 +93,8 @@ class TutorialConfig extends React.Component <{
9393
this.props.routeSet('page');
9494
}
9595
render() {
96-
const {pristine, submitting, handleSubmit, invalid} = this.props;
96+
const {submitting, handleSubmit, invalid, packageJson} = this.props;
97+
// select runner items
9798
return (
9899
<section className='cr-page'>
99100
<Card style={styles.card}>
@@ -118,23 +119,13 @@ class TutorialConfig extends React.Component <{
118119
/>
119120

120121
<Field
121-
name='language'
122+
name='runnerItem'
122123
component={selectField.bind(null, {
123-
children: languageItems(),
124-
floatingLabelText: 'language',
125-
id: 'language',
126-
})}
127-
tabIndex='2'
128-
/>
129-
130-
<Field
131-
name='runner'
132-
component={selectField.bind(null, {
133-
children: runnerItems('JS'),
134-
floatingLabelText: 'Test Runner',
124+
children: runnerItems(),
125+
floatingLabelText: 'runner',
135126
id: 'runner',
136127
})}
137-
tabIndex='3'
128+
tabIndex='2'
138129
/>
139130

140131
<Field
@@ -144,7 +135,7 @@ class TutorialConfig extends React.Component <{
144135
floatingLabelText: 'Path to Repo (optional)',
145136
hintText: 'http://github.com/path/to/repo',
146137
})}
147-
tabIndex='4'
138+
tabIndex='3'
148139
/>
149140

150141
<RaisedButton

0 commit comments

Comments
 (0)