bind tutorialConfig form to data

Author: ShMcK

lib/components/TutorialConfig/index.js

@@ -38,21 +38,28 @@ var TutorialConfig = (function (_super) {
             runnerOptions: {}
         };
     }
-    TutorialConfig.prototype.handleChange = function (value, event) {
+    TutorialConfig.prototype.handleText = function (prop, event) {
+        this.handleChange(prop, event.target.value);
+    };
+    TutorialConfig.prototype.handleSelect = function (prop, event, index, value) {
+        this.handleChange(prop, value);
+    };
+    TutorialConfig.prototype.handleChange = function (prop, val) {
         var obj = {};
-        obj[value] = event.target.value;
+        obj[prop] = val;
         this.setState(Object.assign({}, this.state, obj));
     };
     TutorialConfig.prototype.save = function () {
         this.props.save(this.state);
     };
     TutorialConfig.prototype.render = function () {
-        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.handleChange.bind(this, 'name', event)}), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Language', value: this.state.language, onChange: this.handleChange.bind(this, 'language', event)}, React.createElement(MenuItem_1.default, {value: 'JS', primaryText: 'JS'}), React.createElement(MenuItem_1.default, {value: 'Python', primaryText: 'Python'})), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Test Runner', value: this.state.runner, onChange: this.handleChange.bind(this, 'runner', event)}, React.createElement(MenuItem_1.default, {value: 'mocha-coderoad', primaryText: 'Mocha-CodeRoad'})), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {label: 'Save', primary: true, onTouchTap: this.save.bind(this)})));
+        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')}, React.createElement(MenuItem_1.default, {key: 1, value: 'JS', primaryText: 'JS'}), React.createElement(MenuItem_1.default, {key: 2, value: 'Python', primaryText: 'Python'})), React.createElement("br", null), React.createElement(SelectField_1.default, {floatingLabelText: 'Test Runner', value: this.state.runner, onChange: this.handleSelect.bind(this, 'runner')}, React.createElement(MenuItem_1.default, {key: 1, value: 'mocha-coderoad', primaryText: 'Mocha-CodeRoad'})), React.createElement("br", null), React.createElement("br", null), React.createElement(RaisedButton_1.default, {label: 'Save', primary: true, onTouchTap: this.save.bind(this)}), React.createElement(RaisedButton_1.default, {label: 'Continue', secondary: true, onTouchTap: this.props.routeToInfo.bind(this)})));
     };
     TutorialConfig = __decorate([
         react_redux_1.connect(null, function (dispatch) {
             return {
-                save: function (config) { return dispatch(actions_1.tutorialConfigSave(config)); }
+                save: function (config) { return dispatch(actions_1.tutorialConfigSave(config)); },
+                routeToInfo: function () { return dispatch(actions_1.routeSet('tutorialInfo')); }
             };
         }), 
         __metadata('design:paramtypes', [Object])

src/components/TutorialConfig/index.tsx

@@ -5,12 +5,7 @@ import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import {Card, CardHeader} from 'material-ui/Card'
 import RaisedButton from 'material-ui/RaisedButton';
-import {tutorialConfigSave} from '../../actions';
-  // name: '',
-  // repo: '',
-  // language: '',
-  // runner: '',
-  // runnerOptions: {}
+import {tutorialConfigSave, routeSet} from '../../actions';
 
 const styles = {
   margin: '10px',
@@ -20,12 +15,14 @@ const styles = {
 
 @connect(null, dispatch => {
   return {
-    save: (config: Tutorial.ConfigSet) => dispatch(tutorialConfigSave(config))
+    save: (config: Tutorial.ConfigSet) => dispatch(tutorialConfigSave(config)),
+    routeToInfo: () => dispatch(routeSet('tutorialInfo'))
   };
 })
 export default class TutorialConfig extends React.Component <{
   tutorialConfig: Tutorial.ConfigSet,
-  save?: (config: Tutorial.ConfigSet) => any;
+  save?: (config: Tutorial.ConfigSet) => any,
+  routeToInfo?: () => any
 }, {
   name: string, repo: string, language: string,
   runner: string, runnerOptions?: Object
@@ -40,12 +37,16 @@ export default class TutorialConfig extends React.Component <{
       runnerOptions: {}
     };
   }
-  handleChange(value, event) {
+  handleText(prop, event) {
+    this.handleChange(prop, event.target.value);
+  }
+  handleSelect(prop, event, index, value) {
+    this.handleChange(prop, value);
+  }
+  handleChange(prop, val) {
     const obj = {};
-    obj[value] = event.target.value;
-    this.setState(
-      Object.assign({}, this.state, obj)
-    );
+    obj[prop] = val;
+    this.setState(Object.assign({}, this.state, obj));
   }
   save() {
     this.props.save(this.state);
@@ -59,28 +60,49 @@ export default class TutorialConfig extends React.Component <{
         <TextField
           floatingLabelText='Tutorial Package Name'
           value={this.state.name}
-          onChange={this.handleChange.bind(this, 'name', event)}
+          onChange={this.handleText.bind(this, 'name')}
         />
         <br />
         <SelectField
           floatingLabelText='Language'
           value={this.state.language}
-          onChange={this.handleChange.bind(this, 'language', event)}
+          onChange={this.handleSelect.bind(this, 'language')}
         >
-          <MenuItem value={'JS'} primaryText='JS' />
-          <MenuItem value={'Python'} primaryText='Python' />
+          <MenuItem
+            key={1}
+            value={'JS'}
+            primaryText='JS'
+          />
+          <MenuItem
+            key={2}
+            value={'Python'}
+            primaryText='Python'
+          />
         </SelectField>
         <br />
         <SelectField
           floatingLabelText='Test Runner'
           value={this.state.runner}
-          onChange={this.handleChange.bind(this, 'runner', event)}
+          onChange={this.handleSelect.bind(this, 'runner')}
         >
-          <MenuItem value={'mocha-coderoad'} primaryText='Mocha-CodeRoad' />
+          <MenuItem
+            key={1}
+            value={'mocha-coderoad'}
+            primaryText='Mocha-CodeRoad'
+          />
         </SelectField>
         <br />
         <br />
-        <RaisedButton label='Save' primary={true} onTouchTap={this.save.bind(this)}/>
+        <RaisedButton
+          label='Save'
+          primary={true}
+          onTouchTap={this.save.bind(this)}
+        />
+        <RaisedButton
+          label='Continue'
+          secondary={true}
+          onTouchTap={this.props.routeToInfo.bind(this)}
+        />
       </Card>
     );
   }