13. As a user, I want to view a list of my shopping list items in order of how soon I am likely to need to buy each of them again so that it’s clear what I need to buy soon.

[stacietaylorcima]

Summary

Sorting items by how soon the user might need to buy them will make it easier for the user to identify what they need to buy, which will in turn help them better plan their shopping trips. To that end, we will be sorting items into 4 possible groups, according to how urgently the user should buy the item:

1. Need to buy soon (7 days or fewer until the next purchase)
2. Need to buy kind of soon (between 7 & 30 days until the next purchase)
3. Need to buy not soon (30 days or more until the next purchase)
4. Inactive (60 days have passed since the last purchase)

To implement this feature, your team will need to create some new UI elements so the user knows how their items are sorted and write some logic behind-the-scenes to perform the sorting itself. Read the acceptance criteria and our notes carefully to be sure you understand the tasks at hand, and don’t be afraid to reach out to the rest of your team, and your mentors if you need help. You’ve got this!

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

Notes

There's a lot to do for this issue! Read this section for some ideas about how to approach the tasks ahead. The getDaysBetweenDates function in src/utils/dates.js will be useful!

Remember: The dates in the Firestore database are special Timestamp objects. You’ll need to call their toDate() method to get a JavaScript Date that we can work with.

Indicating purchase urgency in the UI

It’s tempting to use colors or icons to indicate how soon the user should buy an item. Keep in mind:

• If you use only color, a colorblind user won’t be able to tell the difference between urgency indicators
• If you use icons, you have to teach users what those icons mean

With these constraints, it’s probably best to render plain text, like “soon”, “kind of soon”, etc. in order to show urgency. You can still use color alongside that text, and the design of where that text goes is up to you!

Sorting the list

We’re sorting by multiple criteria:

1. Whether the item is active or inactive, then
2. By the number of days until its dateNextPurchased, and
3. Alphabetically by name, if they have the same number of days until purchase

Sorting by multiple criteria can be tricky! Refer to the MDN docs for Array.prototype.sort and refresh yourself on how to write compare functions so you can write the comparePurchaseUrgency function.