Product Page

[HeathJHMoore]

User Story

As a User, when I visit the products page, I should see a list of product cards, 4 to a row, that show me the name of the products, its price that day, and have two buttons: one to add to my watchlist, one to view product info

Development

• In the Components folder, create a ProductPage folder with a JS and CSS file
• In the src/data/ directory. create a ProductData.js file. Create the below function in this file
  • GetProductData() : Promise that passes a locationId in a GET request to the backend to resolve all 80 products for a location with the following fields for each product: Name, Todays Regular Price, Todays Clearance Price, Product Image
• In the ComponentDidMount() method, make a call to the GetProductDate() function you made in the last step. Store the returned values of this call in your state as AllProducts
• In the Render section of the ProductPage component, use a mapping function AllProductsCards() to iterate over AllProducts from state and return a ProductCard component for each product. Call this mapping function in the Return section of the ProductPage component like in the comment below

[HeathJHMoore]

<div class="row"> {AllProductsCards()} </div>