dunno.jsx

import React, { Component } from 'react';
import { connect } from "react-redux";
import Window from "components/Window";
import Toolbar from "components/Toolbar";
import { query } from "reducers/connections";
var AceEditor  = require('react-ace');
var brace = require('brace');

require('brace/mode/sql');
require('brace/theme/xcode');

class Explorer extends Component {
  constructor(args) {
    super(args);

    this.handleChangeQuery = this.handleChangeQuery.bind(this);
  }

  state = {
    aaa: ''
  }

  handleChangeQuery(value) {
    console.log(this);
    this.state.aaa = value;
  }

  componentWillMount () {
    if (this.props.newQueryRequested) {
      this.props.dispatch(query(this.state.query));
    }
  }

  render() {
    return (
      <Window>
        <Toolbar title="ReDB" type="header"></Toolbar>

        <div className="tab-group">
          <div className="tab-item active">
            <span className="icon icon-cancel icon-close-tab"></span>
            ReDB
          </div>
          <div className="tab-item tab-item-fixed">
            <span className="icon icon-plus"></span>
          </div>
        </div>
        <div className="window-content">
         <div className="pane-group">
           <div className="pane-sm sidebar">
          <nav className="nav-group">
           <h5 className="nav-group-title"></h5>
          <span className="nav-group-item">
            <span className="icon icon-flash"></span>
            Quick Connection
          </span>
          </nav>

           <nav className="nav-group">

           </nav>

           </div>
           <div className="pane">
           <AceEditor
               mode="sql"
               theme="xcode"
               name="sql-editor"
               width="100%"
               highlightActiveLine={true}
               onChange={this.handleChangeQuery}
               editorProps={{$blockScrolling: true}}
             />
            </div>
            <div className="pane">
            <table className="table-striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Kind</th>
                <th>File Size</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>photon.css</td>
                <td>CSS</td>
                <td>28K</td>
              </tr>
              <tr>
                <td>photon.css</td>
                <td>CSS</td>
                <td>28K</td>
              </tr>
              <tr>
                <td>photon.css</td>
                <td>CSS</td>
                <td>28K</td>
              </tr>
              <tr>
                <td>photon.css</td>
                <td>CSS</td>
                <td>28K</td>
              </tr>
            </tbody>
            </table>
            </div>

          </div>

        </div>
        <Toolbar title="status bar" type="footer"></Toolbar>
      </Window>
    );
  }

}

const mapStateToProps = function (state) {
  return {
    newQueryRequested: state.connections.newQueryRequested
  }
}

export default connect(mapStateToProps)(Explorer);