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…

1 Like
#4

Does anyone have any hints for the autocomplete part?

#5

Hi, I used the Google Maps API for the autocomplete functionality. It took a while to figure out and I’m not totally confident I went about it the right way, as I’m now updating the search location in the SearchBar component using document.getElementById() on the location element instead of the handleLocationChange() method. But that was the only way I could get it to work, as the “onChange” event handler doesn’t seem to recognize the selected autocompleted location as a “change” (it only registers the text typed manually.) It does work, though.

Can someone let me know if there is a better way to do this?

Apart from that, the other additional features seem to be working just fine.

https://github.com/JamesTheLessFC/ravenous

#6

Your solution didn’t work, I had to do:

handleClick(e) {

        if (e.keyCode === 13 && this.state.term && this.state.location) {

            this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

            e.preventDefault();

        }

    }

And then:

<input onKeyUp={this.handleClick.bind(this)} onChange={this.handleTermsChange} placeholder="Search Businesses" />

                    <input onKeyUp={this.handleClick.bind(this)} onChange={this.handleLocationChange} placeholder="Where?" />

No idea why yours won’t work though…

#7

I was able to get the enter key working by modifying the html using a form element so when you press enter, it auto submits the form:

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