Linted all, refactored VisualizeModal out

caravel/assets/javascripts/SqlLab/components/ResultSet.jsx

@@ -2,10 +2,31 @@ import React from 'react';
 import { Alert, Button } from 'react-bootstrap';
 import { Table } from 'reactable';
 
+import VisualizeModal from './VisualizeModal';
+
 
 class ResultSet extends React.Component {
-  shouldComponentUpdate() {
-    return false;
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchText: '',
+      showModal: false,
+    };
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    return (
+      this.state.searchText !== nextState.searchText ||
+      this.state.showModal !== nextState.showModal
+    );
+  }
+  changeSearch(event) {
+    this.setState({ searchText: event.target.value });
+  }
+  showModal() {
+    this.setState({ showModal: true });
+  }
+  hideModal() {
+    this.setState({ showModal: false });
   }
   render() {
     const results = this.props.query.results;
@@ -15,11 +36,18 @@ class ResultSet extends React.Component {
         <div className="ResultSetControls">
           <div className="clearfix">
             <div className="pull-left">
-              <Button className="m-r-5"><i className="fa fa-line-chart" />Visualize</Button>
-              <Button className="m-r-5"><i className="fa fa-file-text-o" />.CSV</Button>
+              <Button className="m-r-5" onClick={this.showModal.bind(this)}>
+                <i className="fa fa-line-chart m-l-1" /> Visualize
+              </Button>
+              <Button className="m-r-5"><i className="fa fa-file-text-o" /> .CSV</Button>
             </div>
             <div className="pull-right">
-              <input type="text" className="form-control" placeholder="Search Results" />
+              <input
+                type="text"
+                onChange={this.changeSearch.bind(this)}
+                className="form-control"
+                placeholder="Search Results"
+              />
             </div>
           </div>
         </div>
@@ -27,14 +55,24 @@ class ResultSet extends React.Component {
     }
     if (results.data.length > 0) {
       return (
-        <div className="ResultSet">
-          {controls}
-          <Table
-            data={results.data}
-            columns={results.columns}
-            sortable
-            className="table table-condensed table-bordered"
+        <div>
+          <VisualizeModal
+            show={this.state.showModal}
+            query={this.props.query}
+            onHide={this.hideModal.bind(this)}
           />
+          {controls}
+          <div className="ResultSet">
+            <Table
+              data={results.data}
+              columns={results.columns}
+              sortable
+              className="table table-condensed table-bordered"
+              filterBy={this.state.searchText}
+              filterable={results.columns}
+              hideFilterInput
+            />
+          </div>
         </div>
       );
     }
@@ -45,10 +83,12 @@ ResultSet.propTypes = {
   query: React.PropTypes.object,
   showControls: React.PropTypes.boolean,
   search: React.PropTypes.boolean,
+  searchText: React.PropTypes.string,
 };
 ResultSet.defaultProps = {
   showControls: true,
   search: true,
+  searchText: '',
 };
 
 export default ResultSet;