react-hacking.js

import '../app/public/styles.css';
import $ from 'jquery';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import RaisedButton from 'material-ui/RaisedButton';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import AppBar from 'material-ui/AppBar';
import Paper from 'material-ui/Paper';
import Divider from 'material-ui/Divider';
import TextField from 'material-ui/TextField';
import { Card, CardHeader, CardTitle, CardText, CardAction } from 'material-ui/Card';

injectTapEventPlugin();
const styles = {
  container: {
    textAlign: 'center',
    paddingTop: 200,
  },
};


class RubySkillDebug extends Component {
  constructor() {
    super();
    this.state = {
      schema: [],
      utterances: [],
      intentSelection: 0
    };
    this.handleChange = this.handleChange.bind(this);
  }
  componentDidMount() {
    this.serverRequest = $.get('http://localhost:9292/schema', (result) => {
      this.setState({
        schema: result.schema,
        utterances: result.utterances
      });
    });
  }

  handleChange(event, index, value) {
    console.log('intentSelection!');
    this.setState({
      intentSelection: value
    });
  }

  render() {
    return (
      <MuiThemeProvider >
        <div className='main' >
        <AppBar title='Skills Debugger' />
        <div className='subcontent'>
        <SelectField floatingLabelText="Select Intent" onChange={this.handleChange} value={this.state.intentSelection}>
        <MenuItem value={0} primaryText='select an intent'/>
        {
      this.state.schema.map((x) => {
        return (
          <MenuItem value={x} key={x.intent} primaryText={x.intent}/>
          );
      })
      }
        </SelectField>
        <IntentSelection data={this.state.intentSelection}/>
        </div>
        </div>
      </MuiThemeProvider>
      );
  }
}
class IntentSelection extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }

  render() {
    var intentInfo = this.props.data;
    if (intentInfo == 0) {
      return ( <Paper /> );
    } else {
      return (
        <Card>
          <CardHeader title='Request Builder' />
            <TextField floatingLabelText='Slot Value' hintText='Slot Value'/>
        </Card>
        );
    }
  }

}

ReactDOM.render(<RubySkillDebug />, document.getElementById('root'));