Issue #9 : mark an item on shopping list as purchased and implement 24HR expiration for repurchasing.

[dterceroparker]

Description

This pull request introduces a new feature that allows users to mark items as purchased on their shopping list. The feature is designed to help users track purchased items with a 24-hour interval, enhancing the user experience in managing their shopping history.

Database Changes

Incremental Logic: Added logic to increment totalPurchases when an item is marked as purchased. This keeps track of how many times an item has been bought.

24-Hour Purchase Frequency: Implemented dateLastPurchased to enforce a 24-hour purchase window, preventing users from needing to repurchase the same item within a day. The 24-hour purchase frequency prevents accidental duplicate purchases by automatically unchecking items after the time period elapses.

UI Enhancements

Toggleable Purchase Status: Introduced a semantic label that toggles between "Purchased" and "Not Purchased," visually indicating the item's current status.

Purchase History Tracking: Displayed the date and time of the last purchase, allowing users to track when an item was last bought.

Auto-refresh on Mount: Added a refresh function within useEffect to ensure the UI is updated every second when the component mounts, reflecting the latest data.

Related Issue

Closes #9

Acceptance Criteria

• The ListItem component renders a checkbox with a semantic .
• 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

Enhancement

Updates

Before

After

Testing Steps / QA Criteria

• Log in using Google credentials
• Navigate to Home page and click on respective list
• Navigate to List page and click on items to be purchased
• Upon confirming purchase, date and time will be reflected
• Item cannot be repurchased within 24 hours

[github-actions]

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

https://tcl-74-smart-shopping-list--pr25-dtp-st-9-junqk0w9.web.app

_{(expires Sat, 14 Sep 2024 15:27:09 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}

[NickRoccodev11]

Very nice job- an impressive amount of changes made, and it all works! (cannot confirm that the box is unchecked after 24 hours, but I will let you know if it isn't)
just a few things to consider:

• After you purchase an item, you can still click on it, and you get the prompt "do you want to purchase this item?" It might not actually change the purchase time in the DB, but it might be nice to disable the ability to click on an item after purchasing.
• While the useEffect should work just fine for checking item updates, It might be more efficient to rely on the Event Listeners built into firebase, like the one we are using to update the lists every time you add an item. You spent far more time considering this, so maybe there's a reason that doesn't work- but just putting it out there. Again, great work!

[stacy-tech]

Great job Ladies! ... Would have to agree, that disabling the ability to click on an item marked purchased sounds like a great idea. I retested and found that the database was updated twice with the same item after it was marked as purchased. Overall, awesome work!!

[dterceroparker]

Thank you so much, @stacy-tech and @NickRoccodev11! We implemented a disable toggle logic in Toggle.jsx and ListItem.jsx. Thank you for catching this :)

[meganesu]

Tested in the deploy preview, and everything's looking good! This was a tough one, y'all did great!

Left some minor suggestions, but since it's so late in the week (apologies!), feel free to open a new issue with anything you'd rather save until later to address.