Deleting Items from a Shopping List

[zeeatwork]

Description

This pull request updates our UI and Firestore database functionality. List.js now includes additional event handling that allows a user to delete a shopping list item. The newly created deleteItem function takes a list item's id as its only parameter, asks the user to confirm their decision to delete an item, then uses the id to delete the item from it's Firestore collection (using Firestore's delete() method.

Read more about implementing the delete method in Firestore here.

Note that, in Firestore, a collection cannot exist without at least one child document. If the user deletes all items from their list, the token disappears from Firestore, but remains in localstorage. The list view also reverts to the UI prompt directing the user to add their first item. When the user adds a new item to the list, the user's token reappears in Firestore without issue or error.

In order to contemplate accessibility features, we switched our app to the updated version of Sweet Alert and updated the alerts in all our pages.

Acceptance Criteria

• [x] User is able to delete an item from the shopping list
• [x] Before deleting, prompt the user to confirm that they really want to delete the item to prevent accidental deletions
• [x] Deletion should cause the associated record(s) in the database to be deleted

Related Issue

This PR closes #12

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
✓	:hammer: Refactoring
	:100: Add tests
✓	:link: Update dependencies
	:scroll: Docs

Updates

Before

After

Testing Steps / QA Criteria

1. Use GitHub to checkout branch za-ar-delete-items
2. npm install in order to install the new dependency
3. npm start the branch using CLI
4. Create a list of grocery items or test functionality using an existing list
5. Click the delete button. A prompt confirming your choice will appear
6. If you confirm your desire to delete your item will be removed from the list
7. Confirm the deletion in the database by checking firestore.

TODOS

• [x] Decide on a consistent popup window look and source. We can continue using SweetAlerts or upgrade to SweetAlert2 to improve accessibility. Update: we've made the switch! :)

[github-actions[bot]]

Visit the preview URL for this PR (updated for commit d1372e4):

https://tcl-23-shopping-list--pr27-za-ar-delete-items-8g2p0cgw.web.app

_{(expires Wed, 19 May 2021 21:51:10 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}