text: /**
   * Created by chan on 7/15/18.
   */
  import React, {Component} from 'react';
  import LocItem from './LocItem';
  
  class LocList extends Component {
      /**
       * Constructor
       */
      constructor(props) {
          super(props);
          this.state = {
              'locations': '',
              'query': '',
              'suggestions': true,
          };
  
          this.filterLocations = this.filterLocations.bind(this);
          this.toggleSuggestions = this.toggleSuggestions.bind(this);
      }
  
      /**
       * Filter Locations based on user query
       */
      filterLocations(event) {
          this.props.closeInfoWindow();
          const {value} = event.target;
          var locations = [];
          this.props.alllocations.forEach(function (location) {
              if (location.longname.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
                  location.marker.setVisible(true);
                  locations.push(location);
              } else {
                  location.marker.setVisible(false);
              }
          });
  
          this.setState({
              'locations': locations,
              'query': value
          });
      }
  
      componentWillMount() {
          this.setState({
              'locations': this.props.alllocations
          });
      }
  
      /**
       * Show and hide suggestions
       */
      toggleSuggestions() {
          this.setState({
              'suggestions': !this.state.suggestions
          });
      }
  
      /**
       * Render function of LocationList
       */
      render() {
          var locationlist = this.state.locations.map(function (listItem, index) {
              return (
                  <LocItem key={index} openInfoWindow={this.props.openInfoWindow.bind(this)} data={listItem}/>
              );
          }, this);
  
          return (
              <div className="search">
                  <input role="search" aria-labelledby="filter" id="search-field" className="search-field" type="text" placeholder="Filter"
                         value={this.state.query} onChange={this.filterLocations}/>
                  <ul>
                      {this.state.suggestions && locationlist}
                  </ul>
                  <button className="button" onClick={this.toggleSuggestions}>Show/Hide Suggestions</button>
              </div>
          );
      }
  }
  
  export default LocList;