app.jsx

   1 import React from 'react';
   2 import BS from 'react-bootstrap';
   3 const {Row, Col} = BS;
   4
   5 import Intro from './widgets/intro.jsx';
   6 import Header from './widgets/header.jsx';
   7 import Connect from './widgets/connect.jsx';
   8 import Response from './widgets/response.jsx';
   9
  10 export default React.createClass({
  11   getInitialState() {
  12     this.props.manager.onChange((state) => {
  13       console.log('will set state from manager', state);
  14       this.setState(state)
  15       if(this.refs.response) {
  16         setTimeout(() => this.refs.response.forceUpdate());
  17       }
  18     });
  19     return this.props.manager.state;
  20   },
  21
  22   render() {
  23     return (
  24       <div className="container">
  25         <Row>
  26           <Col xs={8}>
  27             <Intro {...this.state.request} onChange={this.requestValueChanged} />
  28             <Header fields={[{}]} />
  29           </Col>
  30           <Col xs={4}>
  31             <Connect {...this.state.connection}
  32                      onConnect={this.connect}
  33                      onDisconnect={this.disconnect} />
  34           </Col>
  35         </Row>
  36         <Row>
  37           {this.state.response ? <Response {...this.state.response} ref="response" /> : <div/>}
  38         </Row>
  39       </div>
  40     );
  41   },
  42
  43   connect() {
  44     this.props.manager.connect();
  45   },
  46
  47   disconnect() {
  48     this.props.manager.disconnect();
  49   },
  50
  51   requestValueChanged(key, value) {
  52     let update = {};
  53     update[key] = value;
  54     this.props.manager.update({ request: update });
  55   }
  56 });