Ability to Edit Staff

[jamalbrowning]

User Story

As a user, I should be able to edit my spellin' mistakes on Staff.

AC

WHEN the logged-in user visits the Staff section of the site via the homepage
THEN they should see all of the current staff on display
AND there should also be a visible option to edit the staff
AND once they edit the item, it should be changed in the firebase database
AND they should see it change on the display when they hit the update button
AND if the user is not logged in, they should not see an option to edit

Dev Notes

• use a const getStaff function and axios.get in staffData.js to obtain the staffId
• easier option: use dataset or modal to bring up the edit form on the same page
• challenge option: inline editing
• create an editStaff.js file
• use this function in the staffData.js file:

const updateStaff = (staffId, editedStaff) => axios.put(`${baseUrl}/staff/${staffId}.json`, editedStaff);

• use bootstrap form to edit staff

<form>
  <div class="form-group">
    <label for="editStaff-name">Name</label>
    <input type="text" class="form-control" id="editStaff-name">
  </div>
  <div class="form-group">
    <label for="editStaff-jobTitle">Job Title</label>
    <input type="text" class="form-control" id="editStaff-jobTitle">
  </div>
<div class="form-group">
    <label for="editStaff-imageUrl">Image Url</label>
    <input type="text" class="form-control" id="editStaff-imageUrl">
  </div>
  <button type="submit" class="btn btn-primary" id="staff-editor">Update!</button>
</form>

• use a click event to show the edit form that takes the staffId
• use a click event to update the information from the edit form