types

[bobbybaxter]

User Story

As a user, when the page loads, when I click on a category button, I see all of the types within that category, 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 Then they should see all types from db/types.json printed on the page as cards And when they click on the Back button Then they should return to the Categories page

Dev Notes

• in index.html, in the types-page div, add a button with the id toCategoriesBtn with the text "Back"
• in javascripts/helpers/data, create typesData.js
  • typesData.js will create the functions
  • loadTypesFromCategory, which:
    • takes the parameter categoryId
    • creates a new Promise() with resolve, reject parameters
    • calls axios.get() to
    • get the data from types.json with a
    • .then() method that
      • takes the parameter resp
      • creates a new variable called allTypes which equals resp.data.types
      • creates a new variable called matchingTypes that calls .filter() on allTypes, takes the parameter type, and returns true if type.categoryId === categoryId
      • and finally calls resolve(matchingTypes), and a
    • .catch() method that takes the parameter err and that calls reject(err) in the body
  • getTypesForEachCategory, which:
    • takes the parameter categories
    • creates a new Promise() with resolve, reject parameters
    • calls axios.get() to
    • get the data from types.json with a
    • .then() method that
      • takes the parameter resp
      • creates a new variable called types which equals resp.data.types
      • creates a new variable called categoriesWithTypes that calls .map() on categories, takes the parameter category, creates a new variable const newCategory = category to bypass the linter, creates a variable called matchingTypes that calls .filter() on types, takes the parameter type, and returns true if type.categoryId === category.id, assigns a new key value pair to newCategory with newCategory.types = matchingTypes, and returns newCategory
      • and finally calls resolve(categoriesWithTypes)
    • .catch() method that takes the parameter err and that calls reject(err) in the body
  • export loadTypesFromCategory and getTypesFromEachCategory
• in javascripts/components, create a new directory called types, which contains the files types.js and types.scss

- types.js should:

• import $ from jquery, import typesData from typesData.js, import util from util.js
• include the following functions:
  • initTypes which:
  • takes the parameter categoryId
  • calls typesData.loadTypesFromCategory which:
    • passes the parameter categoryId
    • calls .then() on success, which passes the parameter types and calls writeTypes(types) in the body
    • calls .catch(err => console.error(err) on failure
  • writeTypes which:
  • takes the parameter types
  • filters through types parameter and creates a card for each type that will print the type cards to the page using `util.printToDom('types', domString)
  • `bindEvents()~ which:
  • adds a click eventListener to the id toCategoriesBtn which adds the .hide class to the types-page and products page and removes the.hideclass from thecategories-page`
• export initTypes

- categories.js should:

• import types from types.js, and typesData from typesData.json
• contain the following functions:
  • bindEvents() will search the DOM for all buttons with the className see-types, assign them to the variable allButtons and will loop through allButtons adding a click eventListener to each button, which calls seeTypeDiv
  • seeTypeDiv() will
  • pass a parameter e, find the closest e.target.id of the category .card class, and assign it to the new variable categoryId
  • add the hide class to the divs with the ids categories-page and products-page
  • remove the hide class from the divs with the id types-page, and
  • call types.initTypes(categoryId)
  • writeCategories:
  • add a button with the class see-types
  • call bindEvents()
  • initCategories:
  • replace the .then() statement to include the following two .then() statements:
    • the first .then() will take the parameter resp and will call typesData.getTypesForEachCategory(resp.data.categories) which returns the specific types for each category
    • the second .then() will take the parameter categoriesWithTypes and will call writeCategories, passing in categoriesWithTypes