ConnorSullivan10
commented
4 years ago Create "EDIT" button on each card, that only shows upon login. Then create functions to make sure firebase data is pulled by weaponID, pre-populated in the modal that is printed upon click of the "edit" button, and then once the "Save" button is clicked, the new values will be updated in firebase via an axios.put function, and then the cards will be reprinted on the page with the updated values.
User Story As a user, I should be able to edit a weapon.
AC GIVEN the user is logged in and visits the Weapons page WHEN the user clicks the edit button on the card THEN a modal will pop up with prepopulated fields for the weapon
WHEN the save button is clicked THEN the updated object is sent to firebase AND the dom is updated
Dev Notes
Create an axios call in the weaponsData.js updateWeapon(weaponId,updatedWeapon) file that allows user to edit the object by id in firebase (axios.put) URL: ${databaseURL}/crew/$weaponId}.json to prepopulate the form, get the weapon by ID.
I need a getWeaponById(weaponId) function that takes a weaponId as a parameter and resolves one single weapon object
import updateWeapon into weapon.js, and then pass it through a function updateWeaponFromModal that takes the value of the form inputs on the modal, and creates a new object that will be passed through updateWeapon(updatedWeapon).
After the object is edited and the edits are pushed up to firebase via the function above, call the createWeaponCard function in the .then of updateWeaponFromModal to reprint the cards on the page
The function should look like something along the lines of the following:
import weaponsData from '../helpers/data/weaponsData.js'
const updateWeaponFromModal = (e) => { const weaponId = e.target.whereverYouPlantToAttachTheID; const newWeapon = { name: $('#weapon-name').val(), isActive: isCurrentWeaponActive, teamSize: $('#team-size').val() * 1, type: $('#weapon-use').val(), img: $('#weapon-image-url').val(), }; weaponsData.updateWeapon(weaponId, updatedWeapon) .then(() => { $('#modalID').modal('hide'); // eslint-disable-next-line no-use-before-define createWeaponCard(); }) .catch((error) => console.error(error)); };