Issue #12: Delete Items from Shopping List

[stacy-tech]

Description

This PR allows users to delete items from their shopping list.

Related Issue

• closes 12. As a user, I want to be able to delete items from my shopping list so that my list isn’t cluttered with items I don’t want to buy in the future #12

Acceptance Criteria

• The ListItem component renders a button that allows the user to delete an item from their list when clicked.
• Clicking the delete button prompts the user to confirm that they really want to delete the item.
• The deleteItem function in api/firebase.js has been filled out, and deletes the item from the Firestore database.

Type of Changes

Updates

Before

After

Testing Steps / QA Criteria

• Sign In to app using email account.
• Click on a list and navigate to List page.
• Click on the Delete button for the item you would like to delete.
• A confirmation dialog box appears to confirm item to be deleted.
• Click on OK to confirm.
• A successful deletion message appears.

[github-actions]

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

https://tcl-74-smart-shopping-list--pr31-st-sd-12-jeqqigim.web.app

_{(expires Thu, 26 Sep 2024 23:25:24 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}

[NickRoccodev11]

Very Nice, Works great, and I like the dynamic aria label as well!

[dterceroparker]

Great work! I tested it and it works well on my end 🌻

[jtkabenni]

Hey team, looks good but it would be a good idea while testing to also test some of the other flows that happen on this page. So I marked an item as purchased, and also searched for items in the search bar and the success message remained, which was a little strange.

1. I deleted an item, then marked another as purchased, but the deleted message remained. If you are creating a success message for one action, I would consider making sure the behavior is the same for the other.

2. If I search for something, the delete message remains.

Something you can consider is having the message time out after a few seconds, but just making sure the message reflects the most recent action is a good place to start.

[shuveksha-tuladhar]

Thank you @jtkabenni, for the suggestions. The code has been refactored to remove the message after 5 seconds and the message also gets removed when anything is typed on search items. Thank you.