React

by karlovac

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

import React from 'react';

class SearchBar extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       term:"",
       location:"",
       sortBy: "best_match"
     }
     this.handleTermChange = this.handleTermChange.bind(this);
     this.handleLocationChange = this.handleLocationChange.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.handleSearchByEnter = this.handleSearchByEnter.bind(this);

     //These are the options by which you can sort the returned Yelp object
       this.sortByOptions = {
       'Best Match': "best_match",
       'Highest Rated': "rating",
       'Most Reviewed': "review_count"
     }
   }

     //Gets the CSS class for the sorting option
     getSortByClass(sortByOption) {
       if(this.state.sortBy === sortByOption) {
         return 'active';
       } else {
         return '';
       }
     }
     //This function automatically rerenders the business list when a new sort by option is chosen to reflect it.
     handleSortByChange(sortByOption) {
       //Recall setState is asynchronous, so include a callback function called with updated sortByOption,
        this.setState({
          sortBy: sortByOption,
        }, ()=> {
          this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
        })
     }

     handleTermChange(event) {
       this.setState({
         term: event.target.value
       })
     }

     handleLocationChange(event) {
       this.setState({
         location: event.target.value
       })
     }

     handleSearch(event) {
       this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
       event.preventDefault();
     }

     handleSearchByEnter(event) {
       if(event.which === 13) {
         document.getElementById('submit').click();
       }
     }
   renderSortByOptions() {
    //Object.keys() returns array of property names
    //Array.map() takes that array and returns another array of...