SG: Rating Filters Home Page

[CharityBunyon]

Story

• As a user, I want to be able to filter through my makeup looks.

AC

WHEN the page loads AND the user clicks a makeup rating THEN only the looks for that rating will be shown

Dev Notes

• [ ] Make a ratings collection and update firebase
• [ ] create ratingData in helpers and create an axios call that will get all of the ratings from firebase.

In Ratings Collection (shared)

• [ ] Import react, ratingData, and sass

• [ ]

In Render

• [ ] Button with onclick of filterRatings

In Home Component(pages)

• [ ] Import Filter Component to Home Component
• [ ] add ratings array to state
• [ ] Add this.getRatings to ComponentDidMount
• [ ] Write getRatings function that will grab the ratings by id and if so then set the state to the ratings array in state
• [ ] In Render: map over the ratings to display them
• [ ] {this.state.ratings.map((board) => )} - to render out the buttons above the look cards.

Resources:

• https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/basic-filter.html
• https://mdbootstrap.com/plugins/jquery/filter/