Planetary System: Delete

[ConnorSullivan10]

User Story

As a user, I should be able to delete a Planetary System.

AC

GIVEN the user is logged in and visits the Planetary Systems page WHEN a user clicks the "X" button in the top right of a planetary system card THEN that planetary system's info should be removed from the Firebase database, and the planetary systems should be reprinted on the page

Dev Notes

• in planetSystemData.js create a function that deletes the Planetary System Id passed through it, from the Firebase data using an axios.delete call:

const deleteFood = (id) => axios.delete(`${baseUrl}/foods/${id}.json`);

• then create a function in planetSystem.js that passes through the deletePin function mentioned above, that targets the id of the card where the Close button was clicked. The function should target the planetary system ID declared in the "X" button div on the Planetary System Card, call the firebase function to delete the selected info from your database, and call the function that reprints your planetary system cards after updating the database. It should look similar to:

const deleteSystem = (e) => {
  e.preventDefault();
  systemData.deleteSystem(e.target.id)
    .then(() => {
    // eslint-disable-next-line no-use-before-define
      createSystemCards();
    })
    .catch((error) => console.error(error));
};

• Finally, create an event listener at the bottom of the createSystemCards function that will call the function above on click of the x button (identified by class): $(document.body).on('click', '.delete-system', deleteSystem);