searchBox.jsx

import React from 'react';
import 'whatwg-fetch';
import { Button, Icon, Input } from 'semantic-ui-react';

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.searchQuery = this.searchQuery.bind(this);
    this.createCity = this.createCity.bind(this);
    this.state = { search: '' };
  }

  createCity(e) {
    e.preventDefault();
    this.props.isLoading(true);
    fetch(`url`)
      .then((resp) => {
        console.log(resp);
        if (resp.ok) {
          return resp.json();
        }
        this.props.isLoading(false);
        throw new Error('API was down', resp);
      })
      .then((data) => {
        if (this.state.search) {
          this.props.addCity(data);
        } else {
          this.props.showCities(data);
        }
        this.props.isLoading(false);
        localStorage.setItem('cities', JSON.stringify(data));
        this.refs.cityForm.reset();
      })
      .catch((data) => console.log(data));
  }
  searchQuery(e) {
    this.state.search = e.target.value || '';
  }

  render() {
    return (
      <div>
        <form ref="cityForm">
          <Input icon="search" placeholder="Search..."
            onChange={this.searchQuery}
          />
          <Button basic onClick={this.createCity}>
            <Icon name="send" />
          </Button>
        </form>
      </div>
    );
  }
}
SearchBox.propTypes = {
  addCity: React.PropTypes.func,
  showCities: React.PropTypes.func,
  isLoading: React.PropTypes.func
};

export default SearchBox;