Mark item as purchased & update DB

[bbland1]

Description

This change adds the ability for a user to mark an item on their list as purchased. When marking the item as purchased the database will be updated with the current date as the new dateLastPurchased and increment the totalPurchases of the item. The list item checks if it has been more than 24 hours since an item was marked as purchased the item will uncheck and be able to be marked as purchased again. If a user tries to mark an item as purchased again in 24 hours it will prevent them from triggering it again.

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

	Type
✓	💯 Enhancement
✓	✨ New Feature

Updates

Before

After

My.Movie.mp4

Testing Steps / QA Criteria

• From your terminal, pull down this branch with git pull origin bb-ma/mark-item-purchased and check that branch out with git checkout bb-ma/mark-item-purchased`
• Then npm ci to install the newly added dependencies locally and npm start to launch the app.
• Click one of your lists that has items in it.
• Click the list navigate link in the nav bar.
• All items in the list should now have a checkbox to the left of them.
• Click either the label or the checkbox to mark an item as purchased.
• Click again and you will get a notification that will say it can't be marked again in a 24 hour period.
• Open a new tab with the firebase console and navigate to your lists (the unique id associated with you outside of the users collection).
• Open the list you just marked items purchased on.
• See that the dateLastPurchased and totalPurchases has been updated.
• Change the dateLastPurchased to be at least 24 hours and 1 minute in the past from the current dateLastPurchased.
• Return to the app and notice the checkbox should be unchecked and able to be updated again.

[github-actions]

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

https://tcl-77-smart-shopping-list--pr31-bb-ma-mark-item-purc-f4pe1tc0.web.app

_{(expires Sun, 15 Sep 2024 18:20:00 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: b77df24030dca7d8b6561cb24957d2273c5e9d72}

[eternalmaha]

I was looking into the setTimout() built in Javascript method that could be useful for UI purposes of unchecking the checkbox. If we needed to update anything in the backend as well, i'm sure it could be useful to for coordinating with the firebase document.

[RossaMania]

I like this! Everything is divided up into functions or functional components, and even different files/folders.

[alex-andria]

Great work Brianna and Maha! 🙌 🙌 this definitely was a hefty card that really required you to map out how to connect your local storage with the db in firebase. Really impressed with how you two communicated on Slack and tried different solutions for the acceptance criteria.

Not much I would change on my end besides tightening up the setChecked state and exploring the utility of the TS feature of tagged union types - which you'll definitely see in the workplace that uses TS. Also appreciate y'all updating the README, nice touch!