For this assignment, I used React.js to create a snack list interface with live filtering and sorting functionality.
The app is made of the following components:
- App.js - contains the product list and passes it to FilteredList component
- FilteredList.jsx - contains filtering/sorting/aggregator methods
- DisplayList.jsx - maps each snack item from the FilteredList to a ListItem Component for render
- DisplayCart.jsx - maps each item in the cart from the FilteredList into an HTML list item element for render a list of items in the cart (cart)
- ListItem.jsx - renders the product information and Add To Cart button for one item
App.js contains the list of snacks as an array of objects of {key:value} pairs. Each key: value pair is a property of the snack, such as taste or price. I manually input the list of snacks. Inside the return function in the App() function, I created an instance of the FilteredList component that takes in the productList. After passing the productList to the FilteredList component as a prop, I could refer to the productList as this.props.list in FilteredList. FilteredList contains methods to filter by taste, filter by size, sort by price, add an item to the cart, and remove an item from the cart. I used state to keep track of the price sorting style, unique id of the next cart item, size selected, and taste selected. Inside the render function of FilteredList, I create three navbars that allow the user to filter by two categories and sort by one. I create a DisplayList component and pass in the filtered and sorted productList, as well as the addToCart function as props. I then create a DisplayCart component and pass in the cart and removeFromCart function as props. In the render method of DisplayList, I mapp each product in the product list to a ListItem component with the item and addToCart function passed in as props.
The user triggers changes in the state of components by clicking any buttons on the navbars, clicking any add to cart button, or clicking a remove from cart button. The navbar buttons change the taste, size, or priceStart state in FilteredList. When the user selects a navbar option, onSelectFilterSize(), onSelectFilterTaste(), or onSelectSortPrice will be called and the value of the option will be passed as an eventKey to the function. These functions trigger state changes, and the eventKey from the NavBar buttons correlates to the event the size, taste, or priceSort state is set to. When the user clicks the add to cart button or the remove from cart button, an onClick function is triggered. In ListItem, the onClick function for a snack card is addToCart from FilteredList (passed into the component as cartFun) with the item passed into the component as the function argument. This addToCart function changes the state in FilteredList by adding a copy of the item with a unique id to the cart state and incrementing the id state. In DisplayCart, the onClick function for the button listed under each cart item is removeFromCart from FilteredList (passed into the component as removeFun) with the cart item being mapped to a list item as the function argument. This removeFromCart function changes the state in FilteredList by removing the clicked cart item (based on its unique id) from the cart list in the state of FilteredList.