Marking shopping list items as purchased

[Wyna-7]

Description

User can now check items as purchased on their lists, updating the firestore information on the item and unchecking automatically after 24h of purchase.

Related Issue

Closes #9

Acceptance Criteria

• The ListItem component renders a checkbox with a semantic <label>.
• Checking off the item in the UI also updates the dateLastPurchased and totalPurchases properties on the corresponding Firestore document.
• The item is shown as checked for 24 hours after the purchase is made (i.e. we assume the user does not need to buy the item again for at least 1 day). After 24 hours, the item unchecks itself so the user can buy it again.
• The updateItem function in firebase.js has been filled out, and sends updates to the firestore database when an item is checked.

Type of Changes

feature

Updates

Before

After

Testing Steps / QA Criteria

• Do a git checkout hm-qg-updateItemPurchasedState and git pull.
• Open the homepage by running npm start.
• Navigate to List, each item should have a checkbox before it.
• Checking one of the checkboxes should update the checked and dateLastPurchased fields for the item on firestore.
• To confirm the unchecking after 24h works as expected, manually modify the dateLastPurchased to one day prior and one minute forward. Wait until the time condition is met and reload the page: the checkbox should now be unchecked.

[github-actions]

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

https://tcl-79-smart-shopping-list--pr25-hm-qg-updateitempurc-veexd9kn.web.app

_{(expires Thu, 12 Sep 2024 09:53:34 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: d91d9ddbda780208241c52942f544acf8e81407a}

[Tomiogunsan]

Great work guys!

[joriordan332]

Looks great guys! Well done on what looked like such a tricky issue this week