products

[bobbybaxter]

User Story

As a user, when the page loads, when I click on a category button, then on a type button, I see all of the products within that type, and I can return to the previous page when I click on the Back button.

AC

Given a user navigates to the page And clicks on a category card's button And clicks on a type card's button Then they should see all products from db/products.json that correspond to that type and category printed on the page as cards And when they click on the Back button Then they should return to the Types page

Dev Notes

• in index.html, in the the products-page div, add a button with the id toTypesBtn with the text "Back"
• in javascripts/helpers/data, create productsData.js
  • productsData.js will create the functions:
  • loadProductsFromType, which:
    • takes the parameter typeId
    • creates a newPromise() with resolve, reject parameters
    • calls axios.get() to
    • get the data from products.json with a
    • .then() method that
      • takes the parameter resp
      • creates a new variable called allProducts which equals resp.data.products
      • creates a new variable called matchingProducts that calls .filter() on allProducts, takes the parameter product, and returns true if product.typeId === typeId
      • and finally calls resolve(matchingProducts), and a
    • .catch() method that takes the parameter err and that calls reject(err) in the body
  • getProductsForEachType, which:
    • takes the parameter types
    • creates a new Promise() with resolve, reject parameters
    • calls axios.get() to
    • get the data from products.json with a
    • .then() method that
      • takes the parameter resp
      • creates a new variable called products which equals resp.data.products
      • creates a new variable called typesWithProducts that calls .map() on types, takes the parameter type, creates a new variable const newType = type to bypass the linter, creates a variable called matchingProducts that calls .filter() on products, takes the parameter product, and returns true if product.typeId === type.id, assigns a new key value pair to newType with newType.products = matchingProducts, and returns newType
      • and finally calls resolve(typesWithProducts)
    • .catch() method that takes the parameter err and that calls reject(err) in the body
  • export loadProductsFromType and getProductsFromEachType
• in javascripts/components, create a new directory called products, which contains the files products.js and products.scss

- products.js should:

• import $ from jquery, import productsData from productsData.js, import util from util.js
• include the following functions:
  • initProducts which:
  • takes the parameter typeId
  • calls productsData.loadProductsFromType which:
    • passes the parameter typeId
    • calls .then() on success, which passes the parameter types and calls writeProducts(products) in the body
    • calls .catch(err => console.error(err) on failure
  • writeProducts which:
  • takes the parameter products
  • calls bindEvents()
  • filters through products parameter and creates a card for each product, and will print the product card to the page using util.printToDom('products', domString)
  • bindEvents()which:
  • adds a click eventListener to the id toTypesBtn which adds the .hide class to the #products-page and #categories-page
• export initProducts

-types.js should:

• contain the following functions:
  • bindEvents() which:
  • searches the DOM for all buttons with the className see-products, assign them to the variable productButtons and loops through productButtons, adding a click eventListener to each button, which calls seeProductDiv
  • seeProductDiv that will:
  • pass the parameter e, find the closest e.target.id of the type .card class, and assign it to the new variable typeId
  • add the .hide class to the divs with the ids categories-page and types-page
  • remove the .hide class from the div with the id products-page, and
  • call `products.initProducts(typeId)
  • writeTypes:
  • add a button with the class see-products
  • initTypes:
  • replace the .then() statement to include the following two .then() statements:
    • the first .then() will take the parameter resp and will call productsData.getProductsForEachType(resp.data.types) which returns the specific types for each category
    • the second .then() will take the parameter typesWithProducts and will call writeTypes, passing in typesWithProducts