searchbar.js

import React from 'react';
import './SearchBar.css';


constructor(props){
  super(props);
  this.handleTermChange.handleLocationChange.handleSearch = this.handleTermChange.handleLocationChange.handleSearch.bind(this);
}
const sortByOptions = {
       "Best Match": "best_match",
       "Highest Rated": "rating",
       "Most Reviewed": "review_count"


}

       //.handleSortByChange(), update the state by calling .setState(). Pass 
        //in an object to setState(). The object should set sortBy to the value of the method's argument.
       

  //The purpose of renderSortByOptions() is to 
  //dynamically create the list items needed to display the sort options 
  //(Best Match, Highest Rated, Most Reviewed). This is to help future proof against
  // potential changes to the Yelp API.

class SearchBar extends React.Component {
           //getSortByClass() returns the current CSS class for a sorting option. 
       //This method will prove useful in providing visual feedback to users of Ravenous.
       getSortByClass(sortByOption) {
        if (this.state.sortBy == sortByOption) {
          return 'active'
        }
        else {
          return ''
        }
      }
      
      handleSortByChange(sortByOption){
        this.setState({sortBy:sortByOption})
        handleTermChange(e){
          this.setState({term: event.target.value});
        }
      handleLocationChange(e){
         this.setState({location: event.target.value});
      handleSearch(e){
           this.props.searchYelp(term, location, sortBy)
           event.preventDefault()
           //to prevent the default action of clicking a link from triggering at the end of the method.

         }
        }
      }
      }
    
     
     constructor(props) {
     super(props);
     this.state = {
       "term" : "", 
       "location" : "", 
       "sortBy" : "best_match"
      }
     }
     
     renderSortByOptions(){
    
      return Object.keys(sortByOptions).map(sortByOption => {
        let sortByOptionValue = sortByOptions[sortByOption];
      });
      // the sortByOptions values using the sortByOption
      // parameter of the callback function. Store values in variable called sortByOptionValue.
      return <li onClick=this.handleSortByChange.bind(this, sortByOptionValue) className=getSortByClass(sortByOptionValue) key="sortByOptionValue"> {this.sortByOption()} </li>
      //his will conditionally style each sort by option, displaying to the user which sorting option is currently selected.
      //This will allow us to both bind to the current value of this (as we usually do in the constructor()) 
      //but also bind the current sortByOptionValue as the first argument to the method call, ensuring the method is called with the appropriate value when clicked.
    }
    //The method should iterate through the keys and values
    // of the sortByOptions object and return a list item. The list item elements should use 
    //the keys as an attribute, and the values as content. 


    ///Call the keys() method on the JavaScript Object library. 
    //Pass in sortByOptions as the argument.
    //keys: var arr = ['a', 'b', 'c'];
    //console.log(Object.keys(arr)); // console: ['0', '1', '2']
    // basically just creating the list items needed to display the sort options
    //Now that you have access to the keys, you'll iterate through them using the map() method. 
    }

    render() {
        return (
            <div className="SearchBar">
            <div className="SearchBar-sort-options">
              <ul>
              {this.renderSortByOptions()}
              </ul>
            </div>
            <div className="SearchBar-fields">
              <input onChange="this.term" placeholder="Search Businesses" />
              <input onChange="this.location" placeholder="Where?" />
            </div>
            <div class="SearchBar-submit">
              <a>Let's Go</a>
            </div>
          </div>

        );
    }
}
export default SearchBar;