Issue #9 - Marking item as purchased

[andiedoescode]

Description

This PR enables a user to mark a list item as purchased and initiates a timer to uncheck a purchased item after 24 hours so they may buy it again.

• Created the updateItem function in the firebase.js API
• Checkbox type input next to each list item
• setTimeout used to uncheck a purchased item after 24 hours
• Change handler and useState to determine if an item has been checked and call updateItem function

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

New feature

Updates

Before

After

Testing Steps / QA Criteria

1. Sign in and select the dinner shopping list
2. Navigate to List view
3. Verify that clicking the item name or pressing tab on the keyboard highlights the checkbox for an item
4. In Firebase, open the dinner list, and open an item to view the item's totalPurchases and dateLastPurchased.
5. In the app, click on an item's checkbox. Verify in Firebase that the item's totalPurchases has increased by one and that the dateLastPurchased has been updated to the current date and time.
6. Verify that unchecking the item decreases the totalPurchases by one, and updates dateLastPurchased to null.
7. In Firebase, change the date for dateLastPurchased to more than a day previous. Confirm that upon List page refresh, the item is unchecked if dateLastPurchased is more than a day prior.

[github-actions]

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

https://tcl-68-smart-shopping-list--pr28-dg-ap-purchase-item-bslrsggv.web.app

_{(expires Sun, 10 Mar 2024 19:19:13 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 8cb5d089a99ba9972009993f4dd31796b0cbda84}

[etiry]

Great job working through what was (imo) definitely the trickier of the two issues for the week!

[sdmisra]

Fantastic work, this absolute seemed like a tricky issue to solve and I like the way you two went about doing just that. Added a question about the timer, but things look good to me overall!

[raaynaldo]

Thanks for the update. Good job!