text: 'use strict';
  
  import React                       from 'react';
  import {Link}                      from 'react-router';
  import DocumentTitle               from 'react-document-title';
  
  const propTypes = {
    currentUser: React.PropTypes.object
  };
  
  class SearchPage extends React.Component {
  
    constructor(props) {
      super(props);
  
      this.handleQueryChange = this.handleQueryChange.bind(this);
  
      this.state = {
        query: ''
      };
    }
  
    handleQueryChange(evt) {
      this.setState({
        query: evt.target.value
      });
    }
  
    render() {
      return (
        <DocumentTitle title="Search">
          <section className="search-page">
  
            <div>
              <div className="wrap">
                <h1>Search</h1>
  
                <h2>Your query: <span ref="queryDisplay">{this.state.query}</span></h2>
  
                <input type="text" onChange={this.handleQueryChange} ref="searchInput" />
              </div>
  
              <div>
                <Link to="/">Back to Home</Link>
              </div>
            </div>
          </section>
        </DocumentTitle>
      );
    }
  
  }
  
  SearchPage.propTypes = propTypes;
  
  export default SearchPage;
  