setup TutorialConfig with events

Author: ShMcK

lib/components/TutorialConfig/index.js

@@ -32,6 +32,7 @@ var runnerItems_1 = require('./runnerItems');
 var Top_1 = require('../TopPanel/Top');
 var redux_form_1 = require('redux-form');
 var coderoad_cli_1 = require('coderoad-cli');
+var TextField_1 = require('material-ui/TextField');
 var styles = {
     card: {
         margin: '10px',
@@ -73,24 +74,28 @@ var TutorialConfig = (function (_super) {
     TutorialConfig.prototype.componentDidMount = function () {
         Top_1.default.toggle(false);
     };
-    TutorialConfig.prototype.handleChange = function (field, e) {
-        console.log(e);
-        var nextState = {};
-        nextState[field] = e.target.value;
-        this.setState(Object.assign({}, this.state, nextState));
-    };
-    TutorialConfig.prototype.save = function () {
-        console.log(this.state);
+    TutorialConfig.prototype.handleText = function (prop, event, value) {
+        var next = {};
+        next[prop] = value;
+        this.setState(Object.assign({}, this.state, next));
     };
-    TutorialConfig.prototype.handleText = function (prop, e, v) {
-        console.log(e);
+    TutorialConfig.prototype.handleSelect = function (prop, event, index, value) {
         var next = {};
-        next[prop] = v;
+        next[prop] = value;
         this.setState(Object.assign({}, this.state, next));
     };
+    TutorialConfig.prototype.submit = function () {
+        var _a = this.state, name = _a.name, language = _a.language, runner = _a.runner;
+        this.props.save(Object.assign({}, this.props.packageJson, {
+            name: name,
+            config: {
+                language: language, runner: runner
+            }
+        }));
+    };
     TutorialConfig.prototype.render = function () {
         var _a = this.state, name = _a.name, language = _a.language, runner = _a.runner;
-        return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement("input", {type: 'text', value: name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(SelectField_1.default, __assign({floatingLabelText: 'Language', value: language}, language, {onChange: this.handleChange.bind(this, 'language')}), languageItems_1.default()), React.createElement("br", null), React.createElement(SelectField_1.default, __assign({floatingLabelText: 'Test Runner', value: runner}, runner, {onChange: this.handleChange.bind(this, 'runner')}), runnerItems_1.default(language)), React.createElement("br", null), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Save', primary: true, onTouchTap: this.save.bind(this)}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, onTouchTap: this.props.routeToPage.bind(this)})));
+        return (React.createElement(Card_1.Card, {style: styles.card}, React.createElement(Card_1.CardHeader, {title: 'Tutorial Configuration'}), React.createElement(TextField_1.default, {className: 'native-key-bindings', value: name, onChange: this.handleText.bind(this, 'name')}), React.createElement("br", null), React.createElement(SelectField_1.default, __assign({floatingLabelText: 'Language', value: language}, language, {onChange: this.handleSelect.bind(this, 'language')}), languageItems_1.default()), React.createElement("br", null), React.createElement(SelectField_1.default, __assign({floatingLabelText: 'Test Runner', value: runner}, runner, {onChange: this.handleSelect.bind(this, 'runner')}), runnerItems_1.default(language)), React.createElement("br", null), React.createElement(RaisedButton_1.default, {type: 'submit', style: styles.button, label: 'Save', primary: true, onTouchTap: this.submit.bind(this)}), React.createElement(RaisedButton_1.default, {style: styles.button, label: 'Continue', secondary: true, onTouchTap: this.props.routeToPage.bind(this)})));
     };
     TutorialConfig = __decorate([
         react_redux_1.connect(function (state) { return ({

src/components/TutorialConfig/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {connect} from 'react-redux';
 import {resolve} from 'path';
-import TextField from 'material-ui/TextField';
 import SelectField from 'material-ui/SelectField';
 import MenuItem from 'material-ui/MenuItem';
 import {Card, CardHeader} from 'material-ui/Card';
@@ -12,6 +11,7 @@ import runnerItems from './runnerItems';
 import Top from '../TopPanel/Top';
 import {reduxForm} from 'redux-form';
 import {validateName} from 'coderoad-cli';
+import TextField from 'material-ui/TextField';
 
 const styles = {
   card: {
@@ -76,22 +76,29 @@ class TutorialConfig extends React.Component <{
   componentDidMount() {
     Top.toggle(false);
   }
-  handleChange(field, e) {
-    console.log(e);
-    const nextState: ConfigForm = {};
-    nextState[field] = e.target.value;
-    this.setState(Object.assign({}, this.state, nextState));
-  }
-  save() {
-    // this.props.save(this.state);
-    console.log(this.state);
+  handleText(prop, event, value) {
+    const next = {};
+    next[prop] = value;
+    this.setState(Object.assign({}, this.state, next));
   }
-  handleText(prop, e, v) {
-    console.log(e);
+  handleSelect(prop, event, index, value) {
     const next = {};
-    next[prop] = v;
+    next[prop] = value;
     this.setState(Object.assign({}, this.state, next));
   }
+  submit() {
+    const {name, language, runner} = this.state;
+    this.props.save(Object.assign(
+      {},
+      this.props.packageJson,
+      {
+        name,
+        config: {
+          language, runner
+        }
+      })
+    );
+  }
   render() {
     const {name, language, runner} = this.state;
     return (
@@ -100,8 +107,8 @@ class TutorialConfig extends React.Component <{
           title='Tutorial Configuration'
         />
 
-        <input
-          type='text'
+        <TextField
+          className='native-key-bindings'
           value={name}
           onChange={this.handleText.bind(this, 'name')}
         />
@@ -112,7 +119,7 @@ class TutorialConfig extends React.Component <{
           floatingLabelText='Language'
           value={language}
           {...language}
-          onChange={this.handleChange.bind(this, 'language')}
+          onChange={this.handleSelect.bind(this, 'language')}
         >
           {languageItems()}
         </SelectField>
@@ -121,18 +128,19 @@ class TutorialConfig extends React.Component <{
           floatingLabelText='Test Runner'
           value={runner}
           {...runner}
-          onChange={this.handleChange.bind(this, 'runner')}
+          onChange={this.handleSelect.bind(this, 'runner')}
         >
           {runnerItems(language)}
         </SelectField>
 
         <br />
 
         <RaisedButton
+          type='submit'
           style={styles.button}
           label='Save'
           primary={true}
-          onTouchTap={this.save.bind(this)}
+          onTouchTap={this.submit.bind(this)}
         />
         <RaisedButton
           style={styles.button}