enemies READ

[christopherjohnson1]

User Story

• [x] as a user I should be able to see all the enemies

AC

WHEN the page loads and I am not logged in THEN I should see all the available enemies AND I should not be able add, edit, or delete them

Dev Notes

• [x] create a enemiesData.js file in src/javascripts/helpers/data
• [x] import axios
• [x] import APIKeys file
• [x] declare a baseUrl variable and give it a value of the database url in the APIKeys file
• [x] create a function called getEnemies that makes a new Promise (takes two parameter of resolve and reject) and calls axios.get()
• [x] use .then() and .catch()
• [x] .catch() takes a single parameter of err and then does this: reject(err)
• [x] .then() takes a parameter of response
• [x] declare a variable called allEnemies and give it a value of response.data
• [x] declare an empty array called enemies
• [x] write an if statement that has the logic (allEnemies)
• [x] inside the if statement, use Object.keys and pass in allEnemies as an argument
• [x] then use a .forEach() to loop through allEnemies
• [x] pass in enemyId as the argument for the .forEach
• [x] then call allEnemies[enemyId].id = enemyId
• [x] .push() into the enemies array
• [x] outside of the loop, resolve(enemies)
• [x] export the function
• [x] create a new component folder and file called enemies.js
• [x] call getEnemies
• [x] use .then() and .catch()
• [x] .catch() should console.error a comment and the error
• [x] .then() should take the parameter enemies
• [x] declares a domString variable with an <h2> element that says Enemies and an <h3> or <h4> with a subtitle
• [x] then use a .forEach() loop to go through the enemies array, and pass in enemies as an argument
• [x] outside of the .forEach() close any elements and then use utils.printToDom()
• [x] export the function
• [x] create a new folder/file called enemyCards
• [x] create a new function called buildEnemyCards
• [x] takes a single parameter of enemies
• [x] create a domString variable and build a card using template literals to populate the name, description and image
• [x] export the function
• [x] import enemyCards to enemies.js
• [x] call the function inside the .forEach() loop
• [x] import enemies.js to authData
• [x] call buildAllEnemies in checkLoginStatus in the else of the if...else