Issue #13: Sort Items by Purchase Urgency

[dterceroparker]

Description

This feature sorts shopping list items by urgency to help users plan their purchases. Items are grouped into:

• Due soon (7 days or fewer)
• Due kind of soon (7–30 days)
• Not due soon (30+ days)
• Overdue (0-60 days since predicted next purchase date)
• Inactive (60+ days since last purchase)

Changes

• Added urgency indicators to each item without relying solely on color.
• Implemented comparePurchaseUrgency in dates.js to:

Sort inactive items last.
Sort items by days until purchase.
Sort items alphabetically if urgency is the same.
Overdue items (past their purchase date but not inactive) are sorted to the top.
Overdue items are indicated in the UI.

Related Issue

Closes #13

Acceptance Criteria

• Items in the list are shown with an indicator that tells the user they should buy the item “soon”, “kind of soon”, or “not soon”; or that the item is “inactive”
• This urgency indicator does not rely on only color
• api/firestore.js exports a new comparePurchaseUrgency function with the following behaviors
• sorts inactive items last, then
• sorts items in ascending order of days until purchase, and
• sorts items with the same days until purchase alphabetically
• If you complete all of the previous acceptance criteria, consider what happens when an item’s dateNextPurchased has passed, but it isn’t yet inactive. Let’s call that item “overdue”.
• Extend the functionality of comparePurchaseUrgency to sort “overdue” items to the top of the list
• Indicate in your UI when an item is overdue

Type of Changes

Enhancement
Feature
Accessibility

Updates

After

Testing Steps / QA Criteria

• Please log in using your Gmail credentials
• We have shared the SortTest list which should appear on the Home page

SortTest list reflects all urgency categories. Please examine that they are ordered from (bottom to top) inactive, not soon, kind of soon, due soon, and overdue.

• Please feel free to experiment with your own lists to verify that purchasing an item changes its urgency.

[github-actions]

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

https://tcl-74-smart-shopping-list--pr30-dtp-nr-sorting-d0os35i8.web.app

_{(expires Wed, 25 Sep 2024 17:54:10 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}

[stacy-tech]

I tested it, and everything is functioning as expected. The urgency indicator works well, and updates the items purchase urgency time smoothly- great job guy! 🎉

[shuveksha-tuladhar]

@NickRoccodev11 @dterceroparker Great work! The functionality is excellent. For the UI, perhaps we could revisit the color choices that may work for both dark and light modes to improve visibility, especially in the lighter mode. We could consider creating an issue to address this in the future.