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} />
1 Like
#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>
    );
  }
#8

I had problems implementing the suggested code for having the forms submit upon pressing ā€˜Enterā€™ and realized it was because I did not bind the new method in the constructor