Planetary System: Update

[ConnorSullivan10]

User Story

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

AC

GIVEN the user is logged in and visits the Planetary System page THEN they should see an "Edit" button on the bottom left corner of each planetary system card AND when they click the "Edit" button THEN a pre-populated modal will appear where they can enter the new planetary system details AND the key value pairs for your food item will be printed to the modal as labels for an input form where the user will enter the new food details THEN when the user clicks the "submit" button, the details for the selected item (via the values of the input form) will be updated in the Firebase data and on the module itself AND your planetary systems will be reprinted

Dev Notes

1. in planetSystemData.js, write a function to get the planet systems by id so we can use it in our function that will prepopulate the modal upon clicking the "Edit" button in each card, with all the key value pairs of the selected sector:

const getSystemByID = (id) => new Promise((resolve, reject) => {
  axios.get(`${baseUrl}/planetSystems/${id}.json`)
    .then((response) => {
      resolve(response.data);
    })
    .catch((error) => reject(error));
});

2. Then write an update function that will take a planetary system Id and the value of an updated planetary system, and pass both through an axios.put function to recognize the selected planet system's id, and pass in the new values entered into the modal that will pop up on clicking the "Edit" button for each card, and update those new values in Firebase: const editSystem = (id, updatedSystem) => axios.put(${baseUrl}/planetSystems/${id}.json, updatedSystem);

3. Create a function in planetSystem.js to pass through the value of the new edited sector, based on the value of the text in the input form of the modal referenced in ticket #77. Code should look something along the lines of:

const editedSystem = (e) => {
  e.stopImmediatePropagation();
  const editedSystemId = e.target.parentNode.id;
  const updatedSystem = {
    name: $('#name').val(),
    size: $('#size').val(),
    sectorImg: $('#planetaryImg').val(),
    isAlly: $('#isAlly').val(),
    info: $('#info').val(),
  };
  systemData.editSystem(editedSystemId, updatedSystem)
    .then(() => {
      $('#exampleModal').modal('hide');
      // eslint-disable-next-line no-use-before-define
      createSystemCards();
    })
    .catch((error) => console.error(error));
};

4. Then, create a function that will take the id of the selected Sector, retrieve it's data from firebase based on id, and populate the modal inputs with prepopulated values pulled from firebase. Then the function will create an event listener for the "Submit" button on the modal and call the editedSector function created above:

const updateSystemValues = (e) => {
  systemData.getSystemByID(e.target.id)
    .then((response) => {
      $('#exampleModal').modal('show');
      response.id = e.target.id;
      newSystemDetails(response);
      // eslint-disable-next-line no-use-before-define
      $('#update').click(editedSystem);
    });
};

5. Finally create an event listener at the end of displayAllSectors that will pull all the functions above together by calling updateSectorValues on click of the "Edit" button: $(document.body).on('click', '.edit-sector', updateSystemValues);