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

dterceroparker commented 1 month ago

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

[x] The ListItem component renders a checkbox with a semantic .
[x] Checking off the item in the UI also updates the dateLastPurchased and totalPurchases properties on the corresponding Firestore document
[x] 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.
[x] 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

Screen Shot 2024-09-04 at 2 53 22 PM

After

Screen Shot 2024-09-04 at 2 49 21 PM Screen Shot 2024-09-04 at 2 51 35 PM Screen Shot 2024-09-04 at 2 50 48 PM

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[bot] commented 1 month ago

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}

dterceroparker commented 1 month ago

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 :)

the-collab-lab / tcl-74-smart-shopping-list