Ravenous - Part 4 : Solution additional features

Get Help React.js
#1

Hello,

Would that be possible to get the answers or some hints for the additional features to implement as part of step #28 of part 4 of the Ravenous project?

I am struggling to apply several of these features!

Thanks a lot.

*** Edit ***

Here are my answers:

  • Make addresses clickable and have them open the address in Google Maps in a new tab
<div className="Business-information">
                    <div className="Business-address">
                        <a href={urlToSearch} target='_blank'>{business.address}</a>
                        <p>{business.city}</p>
                        <p>{business.state} {business.zipCode}</p>
  • Make images clickable and have them open the business’ website in a new tab
<div className="Business">
                <div className="image-container">
                    <a href={business.url} target='_blank'><img src={business.imageSrc} alt='' /></a>
                </div>
  • Clicking on a different sorting option automatically requeries the Yelp API, rather than having to manually click “Let’s Go” again
  handleSortByChange(sortByOption) {
    this.setState({
      sortBy: sortByOption
      }, () => {
      this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
    });
  }
  • Implement your own type of sort (for example, by entering a distance or radius from a central location)
    this.sortByOptions = {
      'Best Match': 'best_match',
      'Highest Rated': 'rating',
      'Most Reviewed': 'review_count',
      'Distance From': 'distance',
    };
  • Allow you to search by pressing “Enter” (or “Return”) on your keyboard, as opposed to manually clicking

Not found yet

  • Add autocompletion of addresses to the “Location” input

Not found yet

2 Likes
#2

Here is how I solved the enter key, but I still haven’t figured out the autocomplete.

In SearchBar.js I created a new method:

    handleKeyPress(event) {
      if (event.key === 'Enter') {
        this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
      }
    }

In SearchBar.js I called that method on the input fields. If you press enter in any of the input fields it will run that code.

<input placeholder="Search Businesses" onChange={this.handleTermChange} onKeyPress={this.handleKeyPress} />
<input placeholder="Where?" onChange={this.handleLocationChange} onKeyPress={this.handleKeyPress} />
#3

Your solution for re-querying Yelp when the sortBy option changes worked almost perfect for me, but I added some conditional logic – otherwise, if you remove text from the fields and click on a different sort-by option, the app crashes.

So it looks like this:

handleSortByChange(sortByOption) { this.setState({ sortBy: sortByOption }, () => { if (this.state.term && this.state.location) { this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy); }}); }

I know this topic is old but the React forum seems pretty dead compared to JavaScript and some of the other ones…

#4

Does anyone have any hints for the autocomplete part?