import React from "react";
import ResultsTable from "./ResultsTable";
import { search } from "./dummyApi.js";
export default class SearchExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      query: "",
      results: []
    };

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

  handleQueryChange(query) {
    this.setState({ query });
    search(query).then(results => this.setState({ results }));
  }


  render() {
    return (
      <div>
        <h3>Class Based Search</h3>
        <form>
          <label>Search:</label>
          <input
            onChange={({ target: { value } }) => this.handleQueryChange(value)}
          />
        </form>

        <ResultsTable results={this.state.results} />
      </div>
    );
  }
}