Ravenous project

App.js

import './App.css';
import BusinessList from './components/businessList/businessList';
import SearchBar from './components/searchBar/searchBar';
import React, { Component } from 'react';
import Yelp from './util/Yelp';
import './App.css';


class App extends React.Component {
    constructor(state){
        super(state);
    this.state = {
        businesses : []
    };
    this.searchYelp.bind(this);
    }
    searchYelp(term,location,sortBy){
        Yelp.search(term, location, sortBy).then(businesses =>{
            setState:(
                businesses: businesses )
        });
    }  
  render() {
    return (
      <div className="App">
  <h1>ravenous</h1>
<SearchBar searchYelp={this.searchYelp} />
 
 <BusinessList businesses={businesses}/> 
</div>
    );
  }
}

export default App;

business.js

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




class Business extends React.Component{
    render(){
        return(
<div className="Business">
  <div className="image-container">
    <img src={this.props.business.imageSrc} alt={this.props.business.name}/>
  </div>
  <h2>{this.props.business.name}</h2>
  <div className="Business-information">
    <div className="Business-address">
      <p>{this.props.business.address}</p>
      <p>{this.props.business.city}</p>
      <p>{this.props.business.state}, {this.props.business.zipCode}</p>
    </div>
    <div className="Business-reviews">
      <h3>{this.props.business.category.toUpperCase()}</h3>
      <h3 className="rating">{this.props.business.rating} starts</h3>
      <p>{this.props.business.reviewCount} reviews</p>
    </div>
  </div>
</div>
        );
    }
}


  
  export default Business;

businessList.js

import React from 'react';
import './businessList.css';
import Business from '../business/business';

class BusinessList extends React.Component {
    render(){
    
    return (
    
    <div className="BusinessList">
  
        {this.props.businesses.map(business =>{
        return <Business  business = {business} />
        }
    )}
</div>
    
    )
    
}
    
};

export default BusinessList;

searchBar.js

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

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);
        
        }

    sortByOptions = {
    
    'Best Match': 'best_match',
    'Highest Rated': 'rating',
    'Most Reviewed': 'review_count'
    }
         
    
     getSortByClass(sortByOption){
        if (this.state.sortBy === sortByOption){
            return 'active';
        } 
         return '';
                
    }

    handleSortByChange(sortByOption){
        
        this.setState({
            sortBy: sortByOption
        });
        
    }
    
    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();
        
    }
        
    
    renderSortByOptions(){
        
        return Object.keys(this.sortByOptions).map(sortByOption =>{
        let sortByOptionValue = this.sortByOptions[sortByOption];
        return (
            <li 
             className={this.getSortByClass(sortByOptionValue)} 
              key={sortByOptionValue}
              onClick={this.handleSortByChange.bind(this, sortByOptionValue)}>
            {sortByOption}
            </li>
    );
});
        
    }

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

}

export default SearchBar;

Yelp.js

const clientId = 'T6fLamDIKEIJ_vqsK3DgAg';
const secret = 'lAdoOEdrtIL2BoKgKquZiE8btvvBLqSPzE8v41clKmoAsR2qW0w1F6p5mDtpD1bN';
let accessToken = "";


const Yelp = {
  getAccessToken() {
    if (accessToken) {
      return new Promise(resolve => {
        resolve(accessToken);
      });
    }
    return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/oauth2/token?grant_type=client_credentials&client_id=${clientId}&client_secret=${secret}`, {
       method: 'POST'
 
   }).then(response => {
      return response.json();
    }).then(jsonResponse => {
      accessToken = jsonResponse.access_token;
    });
  },

  search(term, location, sortBy) {
    return Yelp.getAccessToken().then(() => {
       return fetch(`https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=${term}&location=${location}&sort_by=${sortBy}`, {
        headers: { Authorization: `Bearer ${accessToken}` 
      }
      });
      
      }).then(response => {
      return response.json();
      }).then(jsonResponse => {
        if (jsonResponse.businesses) {
          return jsonResponse.businesses.map(business => ({
           
              id: business.id,
              imageSrc: business.image_url,
              name: business.name,
              address: business.location.address1,
              city: business.location.city,
              state: business.location.state,
              zipCode: business.location.zipcode,
              category: business.categories.title,
              rating: business.rating,
              reviewCount: business.review_count
            }));
      }
    });
  }
};


export default Yelp;