Mission Weapons: Update

[John-Ryan-Johnson]

User Story

As a user, I should be able to edit a mission weapon.

AC

GIVEN the user is logged in and visits the Missions page WHEN the user clicks the edit button on the Mission Weapons card THEN a modal will pop up with prepopulated fields for the mission weapon

WHEN the save button on the modal is clicked THEN the updated object is sent to firebase AND the dom is updated

Dev Notes

• Create an axios call in the missionWeaponsData.js updateMissionWeapon(missionWeaponId,updatedMissionWeapon) file that allows user to edit the object by id in firebase (axios.put) ${databaseURL}/missionWeapon/$missionWeaponId}.json to prepopulate the form, get the mission weapon by ID.

• I need a getMissionWeaponById(missionWeaponId) function that takes a missionWeaponId as a parameter and resolves one single mission weapon object

• import updateMissionWeapon into missionWeapons.js, and then pass it through a function updateMissionWeaponFromModal that takes the value of the form inputs on the modal, and creates a new object that will be passed through updateMissionWeapon(updatedMissionWeapon).

• After the object is edited and the edits are pushed up to firebase via the function above, call the createMissionWeaponCard function in the .then of updateMissionWeaponFromModal to reprint the cards on the page

The function should look like something along the lines of the following:

import missionWeaponsData from '../helpers/data/missionWeaponsData.js'

const updateMissionWeaponFromModal = (e) => { const missionWeaponId = e.target.whereverYouPlantToAttachTheID; const newMissionWeapon = { name: $('#weapon-name').val(), isActive: isCurrentWeaponActive, teamSize: $('#team-size').val() * 1, type: $('#weapon-use').val(), img: $('#weapon-image-url').val(), }; missionWeaponsData.updateMissionWeapon(missionWeaponId, updatedMissionWeapon) .then(() => { $('#modalID').modal('hide'); // eslint-disable-next-line no-use-before-define createMissionWeaponCard(); }) .catch((error) => console.error(error)); };

create an event listener that targets the id of the "Save" button from the modal, and calls updateMissionWeaponFromModal on click of the "Save" button

[gregkorte]

In dev notes: Bullet 1: URL: ${databaseURL}/crew/$missionWeaponId}.json should read URL: ${databaseURL}/missionWeapon/$missionWeaponId}.json