Sectors: Delete

[mariabrock]

User Story

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

AC

WHEN a user is logged in THEN they should have the option to click a button to delete an entry *AND* a modal will pop up prompting them to verify that they want to delete an entry AND*** the user will have to click the Confirm button to completely delete the entry

Dev Notes

• this satisfies the DELETE component of the C.R.U.D.

1. Wireframes

   • see the wireframe below for the basic structure of the modal

2. Modal *use a bootstrap modal and button as confirmation that a user wants to delete selected entry

• the modal should contain a button named Confirm

*for styling please reference the Imperial style guide below

• the event listener for the Confirm button should look something like this: $('#sectors').on('click', '.delete-sector', deleteSector);

4. Deleting Data
   • when the Delete button is clicked, a function named deleteSector should run in sectors.js

• this function should prompt a modal to appear asking the user if they really want to delete this information

• when the user clicks of the Confirm button then deleteSector function will remove the entry in the JSON in firebase

[mariabrock]

Button: https://getbootstrap.com/docs/4.3/components/buttons/#examples Modal: https://getbootstrap.com/docs/4.3/components/modal/#modal-components

[mariabrock]

[mariabrock]

[ConnorSullivan10]

1. create function in sectorData.js to delete a sector based on the id selected, and export it:

const deleteSector= (sectorID) => axios.delete(`${baseUrl}/sectors/${sectorID}.json`);

export default { deleteSector };

2. import deleteSector into sectors.js file in Sectors component and write a function that will be attached to an event listener which will target the Sector by id attached to it's "Close" button, and pass deleteSector and then reprint the cards after the info has been deleted from firebase. Should look something along the lines of:

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

3. write event listener at the end of displayAllSectors that calls deleteSector on click of the id attached to the "Close" button on each sector card. Should look similar to: $(document.body).on('click', '.delete-sector', deleteSector);