view missions - READ

[christopherjohnson1]

USER STORY

As a user, I should be able to see all my missions.

AC

WHEN I am logged in AND on the missions dashboard THEN I should see all missions

DEV NOTES

• [ ] create a missionsData.js file in src/javascripts/helpers/data
• [ ] import axios
  • [ ] import apiKeys file
  • [ ] declare a baseUrl variable and give it a value of the database url in the apiKeys file
  • [ ] create a function called getMissions that makes a new Promise (takes two parameter of resolve and reject) and calls axios.get()
  • [ ] use .then() and .catch()
• [ ] .catch() takes a single parameter of err and then does this: reject(err)
  • [ ] .then() takes a parameter of response
  • [ ] declare a variable called allMissions and give it a value of response.data
  • [ ] declare an empty array called missions
  • [ ] write an if statement that has the logic (allMissions)
• [ ] inside the if statement, use Object.keys and pass in allMissions as an argument
• [ ] then use a .forEach() to loop through allMissions
• [ ] pass inmissionsId as the argument for the .forEach()
• [ ] then call allMissions[missionsId].id = missionsId
• [ ] .push() into the missions array
  • [ ] outside of the loop, resolve(missions)
  • [ ] export the function
• [ ] create a new component folder and file called missions.js
• [ ] import missionsData.js
  • [ ] import utils
• [ ] create a function called buildAllMissions
• [ ] call getMissions
  • [ ] use .then() and .catch()
  • [ ] .catch() should console.error a comment and the error
  • [ ] .then() should take the parameter missions
• [ ] declares a domString variable with an <h2> element that says Missions
  • [ ] then use a .forEach() loop to go through the missions array, pass in missions as an argument
  • [ ] call a new function we will write shortly here
  • [ ] outside of the .forEach() close any elements and then use utils.printToDom()
  • [ ] export the function
  • [ ] create a new component folder/file called missionCards
• [ ] create a new function called buildAllMissionCards
  • [ ] takes a single parameter of mission
  • [ ] create a domString variable and build a card using template literals to populate the needed information
  • [ ] export the function
• [ ] import missionCards to missions.js
• [ ] call the function inside the .forEach() loop import missions.js to authData call buildAllMissions in checkLoginStatus in the else of the if.. else