{"size": 2341, "ext": "js", "max_stars_repo_path": "src/components/common/Search.js", "max_stars_repo_name": "norbe1994/ReactCoin", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/common/Search.js", "max_issues_repo_name": "norbe1994/ReactCoin", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/common/Search.js", "max_forks_repo_name": "norbe1994/ReactCoin", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.1782178218, "max_line_length": 67, "alphanum_fraction": 0.5578812473}
import React from 'react'
import { withRouter } from 'react-router-dom'
import Loading from './Loading'
import { API_URL } from '../../config'
import { handleResponse } from '../../helpers'
import './Search.css'

class Search extends React.Component {
  constructor() {
    super()
    this.state = {
      searchResults: [],
      searchQuery: '',
      loading: false,
    }

    this.handleChange = this.handleChange.bind(this)
    this.handleRedirect = this.handleRedirect.bind(this)
  }

  handleChange(event) {
    const searchQuery = event.target.value

    this.setState({ searchQuery })

    if (!searchQuery) {
      return ''
    }

    this.setState({ loading: true })

    fetch(`${API_URL}/autocomplete?searchQuery=${searchQuery}`)
      .then(handleResponse)
      .then(result => {
        this.setState({ loading: false, searchResults: result })
      })
  }

  handleRedirect(currencyId) {
    this.setState({ searchQuery: '', searchResults: [] })
    this.props.history.push(`/currency/${currencyId}`)
  }

  renderSearchResults() {
    const { searchResults, searchQuery, loading } = this.state

    if (!searchQuery) {
      return ''
    }

    if (searchResults.length > 0) {
      return (
        <div className="Search-result-container">
          {searchResults.map(result => (
            <div
              key={result.id}
              className="Search-result"
              onClick={() => this.handleRedirect(result.id)}
            >
              {result.name} ({result.symbol})
            </div>
          ))}
        </div>
      )
    }

    if (!loading) {
      return (
        <div className="Search-result-container">
          <div className="Search-no-result">No results found.</div>
        </div>
      )
    }
  }

  render() {
    const { loading, searchQuery } = this.state

    return (
      <div className="Search">
        <span className="Search-icon" />
        <input
          className="Search-input"
          type="text"
          placeholder="Currency name"
          onChange={this.handleChange}
          value={searchQuery}
        />
        {loading && (
          <div className="Search-loading">
            <Loading width="12px" height="12px" />
          </div>
        )}
        {this.renderSearchResults()}
      </div>
    )
  }
}

export default withRouter(Search)
