Skip to content

Commit 6add81c

Browse files
ShMcKShMcK
committed
debounce form validation
1 parent e2c66e6 commit 6add81c

File tree

5 files changed

+28
-12
lines changed

5 files changed

+28
-12
lines changed

‎lib/components/TutorialConfig/index.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ var languageItems_1 = require('./languageItems');
3232
var runnerItems_1 = require('./runnerItems');
3333
var Top_1 = require('../TopPanel/Top');
3434
var TextField_1 = require('material-ui/TextField');
35+
var debounce = require('lodash.debounce');
3536
var formSelector = redux_form_1.formValueSelector('tutorialConfig');
3637
var styles = {
3738
card: {
@@ -63,11 +64,11 @@ var TutorialConfig = (function (_super) {
6364
TutorialConfig.prototype.render = function () {
6465
var _this = this;
6566
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
66-
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, React.createElement(redux_form_1.Field, {name: 'name', component: function (name) { return (React.createElement(TextField_1.default, __assign({className: 'native-key-bindings', hintText: 'coderoad-tutorial-name', errorText: name.touched && name.error}, name))); }}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'language', component: function (props) {
67+
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'name', component: function (name) { return (React.createElement(TextField_1.default, __assign({className: 'native-key-bindings', hintText: 'coderoad-tutorial-name', errorText: name.touched && name.error}, name))); }})), React.createElement("br", null), React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'language', component: function (props) {
6768
return React.createElement("div", null, React.createElement(SelectField_1.default, __assign({value: props.value, floatingLabelText: 'Language', errorText: props.touched && props.error}, props, {onChange: function (event, index, value) { return props.onChange(value); }}), languageItems_1.default()));
68-
}}), React.createElement(redux_form_1.Field, {name: 'runner', component: function (props) {
69+
}})), React.createElement("br", null), React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'runner', component: function (props) {
6970
return React.createElement("div", null, React.createElement(SelectField_1.default, __assign({value: props.value, floatingLabelText: 'Test Runner', errorText: props.touched && props.error}, props, {onChange: function (event, index, value) { return props.onChange(value); }}), runnerItems_1.default(_this.props.language || 'JS')));
70-
}}), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.props.routeToPage.bind(this)}))));
71+
}})), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, disabled: invalid, onTouchTap: this.props.routeToPage.bind(this)}))));
7172
};
7273
TutorialConfig = __decorate([
7374
react_redux_1.connect(function (state) { return ({
@@ -84,7 +85,7 @@ var TutorialConfig = (function (_super) {
8485
], TutorialConfig);
8586
return TutorialConfig;
8687
}(React.Component));
87-
var validate = function (values) {
88+
var validate = debounce(function (values) {
8889
var errors = {};
8990
var requiredFields = ['name', 'language', 'runner'];
9091
requiredFields.forEach(function (field) {
@@ -96,7 +97,7 @@ var validate = function (values) {
9697
errors.name = 'Invalid "coderoad-*" name';
9798
}
9899
return errors;
99-
};
100+
}, 200);
100101
Object.defineProperty(exports, "__esModule", { value: true });
101102
exports.default = redux_form_1.reduxForm({
102103
form: 'tutorialConfig',

‎lib/components/TutorialInfo/index.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ var Card_1 = require('material-ui/Card');
2929
var RaisedButton_1 = require('material-ui/RaisedButton');
3030
var actions_1 = require('../../actions');
3131
var Top_1 = require('../TopPanel/Top');
32+
var debounce = require('lodash.debounce');
3233
var styles = {
3334
card: {
3435
margin: '10px',
@@ -53,7 +54,7 @@ var TutorialInfo = (function (_super) {
5354
};
5455
TutorialInfo.prototype.render = function () {
5556
var _a = this.props, pristine = _a.pristine, submitting = _a.submitting, handleSubmit = _a.handleSubmit, invalid = _a.invalid;
56-
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, React.createElement(redux_form_1.Field, {name: 'description', component: function (description) { return (React.createElement(TextField_1.default, __assign({name: 'description', className: 'native-key-bindings', hintText: 'Tutorial Description', floatingLabelText: 'Description', errorText: description.touched && description.error}, description))); }}), React.createElement("br", null), React.createElement(redux_form_1.Field, {name: 'version', component: function (version) { return (React.createElement(TextField_1.default, __assign({name: 'version', className: 'native-key-bindings', hintText: '0.1.0', disabled: true, floatingLabelText: 'Version', errorText: version.touched && version.error}, version))); }}), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}))));
57+
return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Info'}), React.createElement("form", {onSubmit: handleSubmit(this.onSubmit.bind(this))}, React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'description', component: function (description) { return (React.createElement(TextField_1.default, __assign({name: 'description', className: 'native-key-bindings', hintText: 'Tutorial Description', floatingLabelText: 'Description', errorText: description.touched && description.error}, description))); }})), React.createElement("br", null), React.createElement("div", null, React.createElement(redux_form_1.Field, {name: 'version', component: function (version) { return (React.createElement(TextField_1.default, __assign({name: 'version', className: 'native-key-bindings', hintText: '0.1.0', disabled: true, floatingLabelText: 'Version', errorText: version.touched && version.error}, version))); }})), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, disabled: pristine || submitting || invalid}))));
5758
};
5859
TutorialInfo = __decorate([
5960
react_redux_1.connect(function (state) { return ({
@@ -66,7 +67,7 @@ var TutorialInfo = (function (_super) {
6667
], TutorialInfo);
6768
return TutorialInfo;
6869
}(React.Component));
69-
var validate = function (values) {
70+
var validate = debounce(function (values) {
7071
var errors = {};
7172
var requiredFields = ['description', 'version'];
7273
requiredFields.forEach(function (field) {
@@ -81,7 +82,7 @@ var validate = function (values) {
8182
errors.version = 'Invalid version number';
8283
}
8384
return errors;
84-
};
85+
}, 200);
8586
Object.defineProperty(exports, "__esModule", { value: true });
8687
exports.default = redux_form_1.reduxForm({
8788
form: 'tutorialInfo',

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"coderoad-cli": "0.6.0",
2828
"core-coderoad": "0.2.0",
2929
"highlights": "1.3.1",
30+
"lodash.debounce": "^4.0.6",
3031
"marked": "0.3.5",
3132
"material-ui": "0.15.0",
3233
"node-file-exists": "1.1.0",

‎src/components/TutorialConfig/index.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import runnerItems from './runnerItems';
1212
import Top from '../TopPanel/Top';
1313
import {validateName} from 'coderoad-cli';
1414
import TextField from 'material-ui/TextField';
15+
import * as debounce from 'lodash.debounce';
1516

1617
const formSelector = formValueSelector('tutorialConfig');
1718

@@ -73,6 +74,7 @@ class TutorialConfig extends React.Component <{
7374
title='Tutorial Configuration'
7475
/>
7576
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
77+
<div>
7678
<Field
7779
name='name'
7880
component={name => (
@@ -86,7 +88,9 @@ class TutorialConfig extends React.Component <{
8688
/>)
8789
}
8890
/>
91+
</div>
8992
<br />
93+
<div>
9094
<Field name='language' component={props =>
9195
<div>
9296
<SelectField
@@ -100,6 +104,9 @@ class TutorialConfig extends React.Component <{
100104
</SelectField>
101105
</div>
102106
}/>
107+
</div>
108+
<br />
109+
<div>
103110
<Field name='runner' component={props =>
104111
<div>
105112
<SelectField
@@ -113,6 +120,7 @@ class TutorialConfig extends React.Component <{
113120
</SelectField>
114121
</div>
115122
}/>
123+
</div>
116124
<br />
117125
<RaisedButton
118126
type='submit'
@@ -134,7 +142,7 @@ class TutorialConfig extends React.Component <{
134142
}
135143
}
136144

137-
const validate = values => {
145+
const validate = debounce(values => {
138146
const errors: ConfigForm = {};
139147
const requiredFields = ['name', 'language', 'runner'];
140148
requiredFields.forEach(field => {
@@ -146,7 +154,7 @@ const validate = values => {
146154
errors.name = 'Invalid "coderoad-*" name';
147155
}
148156
return errors;
149-
};
157+
}, 200);
150158

151159
export default reduxForm({
152160
form: 'tutorialConfig',

‎src/components/TutorialInfo/index.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {Card, CardHeader} from 'material-ui/Card';
88
import RaisedButton from 'material-ui/RaisedButton';
99
import {pjSave, routeSet} from '../../actions';
1010
import Top from '../TopPanel/Top';
11+
import * as debounce from 'lodash.debounce';
1112

1213
const styles = {
1314
card: {
@@ -51,6 +52,7 @@ class TutorialInfo extends React.Component<{
5152
title='Tutorial Info'
5253
/>
5354
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
55+
<div>
5456
<Field
5557
name='description'
5658
component={description => (
@@ -66,7 +68,9 @@ class TutorialInfo extends React.Component<{
6668
/>)
6769
}
6870
/>
71+
</div>
6972
<br />
73+
<div>
7074
<Field
7175
name='version'
7276
component={version => (
@@ -83,6 +87,7 @@ class TutorialInfo extends React.Component<{
8387
/>)
8488
}
8589
/>
90+
</div>
8691
<br />
8792
{/* <Field
8893
name='keywords'
@@ -114,7 +119,7 @@ class TutorialInfo extends React.Component<{
114119
}
115120
}
116121

117-
const validate = values => {
122+
const validate = debounce(values => {
118123
const errors: { description?: string, version?: string} = {};
119124
const requiredFields = ['description', 'version'];
120125
requiredFields.forEach(field => {
@@ -129,7 +134,7 @@ const validate = values => {
129134
errors.version = 'Invalid version number';
130135
}
131136
return errors;
132-
};
137+
}, 200);
133138

134139
export default reduxForm({
135140
form: 'tutorialInfo',

0 commit comments

Comments
 (0)