READ: View single location, with points of interest

[ancasimon]

User Story - SAME as in #19 but for the Location page

Given a user has already has points of interests When the user opens the application to a specific location Then all points of interests should be displayed with their name, description, cost, review if it's not blank and the place it is located

AC

WHEN I click on a location on the Locations page, THEN I should be taken to the Single Location view page AND I can see the points of interest for that location.

Dev Notes

• In the LocationCard.js file - add a View button that takes the user to the single location view page: -1-import the Link component from react-router-dom package; -2- in the render, declare a singleLink variable for the URL path to the single view; -3- add a Link component with button classes and the to attribute being equal to the singleLink variable you just defined for the single view path.
• In the locationData.js file, write the getSingleLocation function.
• In the interestsData.js file, write the getInterestsByLocationId function. Be sure to add the .indexOn rule to index interests by location id.
• In src > components > shared > InterestCard.js file > define the html for each interest card that gets displayed for each point of interest on a location's single view page.
• In components > pages > create a SingleLocationView folder with corresponding js and scss files. In the js file:
  1. Declare the state object with a location as an empty object and interests as an empty array.
  2. Write a buildSingleView function that: -1- declares the locationId object and grabs the id from props; -2-calls the getSingleLocation function from the locationData.js file and passes in the locationId; -3-in the then(), takes the response from Firebase and sets the state for the location object to the response.data coming back from Firebase; and -4- calls the getInterestsByLocationId function from the interestsData.js file; and -5- in the then for this second Promise, sets the state for the interests array.
  3. Add componentDidMount() method, which calls the buildSingleView function.
  4. In the render here: set the location object and the interests array to what is in state. Also write a function that builds the points of interests cards, by taking the array of interests, mapping over them, and for eachInterest calling the InterestCard component and passing in a key attribute equal to the interest.id and an interest object equal to eachInterest form the array.
  5. In the return, write out the html for how the single location view page should look and the location data and points of interests that should get displayed here.
  6. Add a Close button that is actually a link that takes the user to the Locations page.

[ancasimon]

Try the Dr. Mario pill cards from this site for displaying the points of interest: https://uicookies.com/bootstrap-cards/