READ: View all points of interest

[ancasimon]

User Story

Given a user has saved a point of interest When the user visits their application Then all points of interest should be displayed And each point of interest should have an affordance to delete it

AC

WHEN I log into the application, THEN I have access to a navbar item labeled Points of Interest AND when I go to that page, I can see all thee points of interests I have recorded in the app, AND I see a Delete button on each.

Dev Notes

• helpers > data > authData file: if not yet, write the getUid function now.
• helpers > data > interestsData.js file: write the getInterestsByUid function, which is a new Promise and does and axios get call to get all the points of interests from Firebase, adds the interest object name itself as a new id property inside the interest object, and turns the objects of locations received from Firebase into an array. Be sure to add the .indexOn method in the Firebase database rules to index interests by uid.
• In helpers > propz folder > interestShape.js file > define the interestShape as a PropTypes.shape and then define the props for each property of the interest object.
• In src > components > shared > InterestCard.js file > -1-import PropTypes; -2-import interestShape; -3- add the static propTypes object and define the interest object in it based on the shape file; -4- inside the render, above the return, declare a JSX interest object based on the data in props; -5-define the layout for the interest card - you might have already done this for viewing them on the location single view page if you did that first!! Add a DELETE button to each card!
• In the Interests.js file:
  1. Declare a state object and in it, declare an empty array of interests.
  2. Write the getInterests function that declares a variable for the uid (using the authData file) and then calls the getInterestsByUid function from the data file to get the array of interests -- - this is a Promise, so it takes a then (where we set the state for the interests array) and a catch (where we console the error).
  3. Import authData, interestsData files.
  4. Add the componentDIdMount() method, which calls the getInterests function upon load.
  5. In the render here, declare the interests object that takes the value from state; write a buildInterests function that takes the interests array and maps over it and for each interest, calls the InterestCard component, using a key attribute equal to intrest.id and also an interest attribute equal to the interest object from the array.
  6. In the return here, add a div that will be the container for all the interest cards - with d-flex and flex-wrap classes - and inside it, call the buildInterests function.

[ancasimon]

Update July 2020: currently working on displaying interests and in this branch: ars-READInterests