Sm ar items in order issue 13

[arandel1]

Description

• User's lists are now sorted based on how soon it's recommended they purchase an item (how soon each item's dateNextPurchased value is).
• Lists are sorted based on Soon(!!!), Kind of Soon(!!), Not Soon(!), Overdue(!!!!), and Inactive statuses. Different exclamation points illustrate urgency and are placeholder icons until we collaborate on more specific design choices.
• From there, lists are sorted alphabetically.

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

A stretch goal
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

Updates

Before

• User's list is one single list sorted alphabetically.

After

• User's list is sorted by how soon they can expect to purchase an item.
• List is then sorted alphabetically.
• When a user checks an item, the list updates automatically.

Testing Steps / QA Criteria

1. Pull from branch: sm-ar-items-in-order-issue-13
2. Select a list
3. Add 2-3 items per frequency (ex. apples, "soon"; bananas, "soon"; carrots, "soon"; chips, "kind of soon"; ice cream, "kind of soon", etc.) to ensure items are varied in urgency
4. View list and see how items are filtered by urgency
5. Check an item off to watch it move (items will move to "Soon", because assuming you create an item, "purchase" that item the same day, and "purchased" the item once, calculateEstimate thinks you will buy that item every single day)
6. If you want to check Overdue, you can manipulate dateLastPurchased and dateNextPurchased inputs in Firebase to reflect items being purchased over 60 days ago. (Set an item's dateLastPurchased to January 1, dateNextPurchased to January 10, and totalPurchases to 4.)
7. If you want to check Inactive, you can manipulate dateLastPurchased and dateNextPurchased inputs in Firebase to reflect items being purchased over 60 days ago. (Set an item's dateLastPurchased to January 1, dateNextPurchased to December 10, and totalPurchases to 4.)

[github-actions]

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

https://tcl-76-smart-shopping-list--pr30-sm-ar-items-in-order-y2d5p2a0.web.app

_{(expires Fri, 27 Sep 2024 14:35:06 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 512b1a88be8ae05fd3e727b99332819df760271d}

[mentalcaries]

I like how getDaysBetwenDates gets used again here!

[EmmaBin]

I like the implementation of using Object.entries here. I definitely learned a bit about data type conversion by looking at this.

[MarcosPerez16]

I was able to test everything out and did not come across any issues. Well done!

[MarcosPerez16]

I like the approach you guys took here. It's interesting to me how you created empty array's for each Urgency and then in the if else statement are just pushing values dependent on what is selected by the user.

[mentalcaries]

Nice work with this one!