I am afraid I was not fast enough to have this complete by Friday afternoon. However, I successfully added this claimRestaurant feature to my application.
Let me walk you through my PR:
BACK-END
GoogleTextSearch.js
I moved the function where I call all the restaurants with the google api to this file, so that I could easily imported to another function where this would be required
Routes/Adventure.js
I included this mergeAPIandAppData function, where basically if a restaurant has an existing place_id, it would use it to retrieve the location information (address, geometry [lat, lng]) and photos, as well as respect the values that the user has typed in the input (name, active preferences, etc)
If a place_id was used, I would add it to usedPlaceIDs array so that later when I call the GoogleTextSearch function, I can filter those restaurants that already appeared on my database search and would be repeated.
I also saw that sometimes I was naming my variables as experience and other as restaurants, so I decided to merge that into restaurant
Routes/Experience.js
I just created an endpoint that recollects the three closest restaurants to the location where the experience maker is registering their restaurant
FRONT-END
ClaimRestaurant.jsx
By default I have a state variable claimStatus starting with hasClaimed: true and a type: ''. hasClaimed changes to false every time the user selects a new location and the options appear. Type determines if is a unique experience or if it was registered by google, and it takes the value for a badge that is displayed when claiming or declining
My function onClaim is so that I can create a new object and React re-renders my component with the new values. If I didn't do it this way, it would internally update the address but it would not display the changes.
I render a card for every possible restaurant and it's corresponding buttons to claim, as well as a button to state none of them are their restaurant.
InputLocation.jsx
Every time a user selects a new address, it sets the claimStatus to hasClaimed: false and it displays the possible options
RegisterExperience.jsx
I included a function to call the endpoint that returns the 3 closest restaurants to the location.
I render the Claim Restaurant component
I will continue to update the PRs feedback to have the newest version on main. Afterwards, I will start including more info to the tooltip and the list view.
Hi everyone! Good morning
I am afraid I was not fast enough to have this complete by Friday afternoon. However, I successfully added this claimRestaurant feature to my application.
Let me walk you through my PR:
BACK-END
GoogleTextSearch.js
I moved the function where I call all the restaurants with the google api to this file, so that I could easily imported to another function where this would be required
Routes/Adventure.js
I included this mergeAPIandAppData function, where basically if a restaurant has an existing place_id, it would use it to retrieve the location information (address, geometry [lat, lng]) and photos, as well as respect the values that the user has typed in the input (name, active preferences, etc)
If a place_id was used, I would add it to usedPlaceIDs array so that later when I call the GoogleTextSearch function, I can filter those restaurants that already appeared on my database search and would be repeated.
I also saw that sometimes I was naming my variables as experience and other as restaurants, so I decided to merge that into restaurant
Routes/Experience.js
I just created an endpoint that recollects the three closest restaurants to the location where the experience maker is registering their restaurant
FRONT-END
ClaimRestaurant.jsx
By default I have a state variable claimStatus starting with hasClaimed: true and a type: ''. hasClaimed changes to false every time the user selects a new location and the options appear. Type determines if is a unique experience or if it was registered by google, and it takes the value for a badge that is displayed when claiming or declining
My function onClaim is so that I can create a new object and React re-renders my component with the new values. If I didn't do it this way, it would internally update the address but it would not display the changes.
I render a card for every possible restaurant and it's corresponding buttons to claim, as well as a button to state none of them are their restaurant.
InputLocation.jsx
Every time a user selects a new address, it sets the claimStatus to hasClaimed: false and it displays the possible options
RegisterExperience.jsx
I included a function to call the endpoint that returns the 3 closest restaurants to the location. I render the Claim Restaurant component
DEMO:
Claiming an existing restaurant
https://user-images.githubusercontent.com/60989884/183456299-51a0608f-3052-4376-8e1f-dd93ffdef366.mp4
Seeing that restaurant within the options
https://user-images.githubusercontent.com/60989884/183457543-8e260749-f68e-47ad-9069-2c23059f5145.mp4
NEXT STEPS
I will continue to update the PRs feedback to have the newest version on main. Afterwards, I will start including more info to the tooltip and the list view.