Is ld 12 sort shopping list

[isaiahasanchez]

Description

Added comparePurchaseUrgency function that can be used to sort items by the urgency of which the user is expected to need to buy the item again. Used a sort function with comparePurchaseUrgency on all the data in useShoppingListData. This ensured all data would appear in the proper sorting order.

Added text indicators on the list items. Added styling as well based on the color preference of a dark background. Chose to add styling via listItem.css for code simplicity. Indicators that were added were "soon", "kind of soon", "not soon", "inactive" and we chose to also include "overdue" for items for which the dateNextPurchased had passed.

Related Issue

closes #12

Acceptance Criteria

• [x] 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”
  • [x] This urgency indicator does not rely on only color
• [x] api/firestore.js exports a new comparePurchaseUrgency function with the following behaviors
  • [x] sorts inactive items last, then
  • [x] sorts items in ascending order of days until purchase, and
  • [x] sorts items with the same days until purchase alphabetically
• [x] Extend the functionality of comparePurchaseUrgency to sort “overdue” items to the top of the list
• [x] Indicate in your UI when an item is overdue

Type of Changes

	Type
	:bug: Bug fix
✓	:sparkles: New feature
	:hammer: Refactoring
	:100: Add tests
	:link: Update dependencies
	:scroll: Docs

Updates

Before

After

Testing Steps / QA Criteria

inactive items: have a dateLastPurchased more than 60 days in the past overdue items: an item with dateNextPurchased in the past soon items: an item with dateNextPurchased within 7 days or less from now kind of soon items: an item with dateNextPurchased between 7 and 30 days from now not soon: an item with dateNextPurchased over 30 days from now

• open in GH preview
• navigate to desired list
• add one or more examples of each type of item as defined above (make changes in firebase console to the item's dates in order to set item to a certain indicator category)
• verify that the items are sorted based on the categories first, then by date and if the dates are the same then alphabetically
• verify that the indicator appears clearly and correctly

[github-actions[bot]]

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

https://tcl-65-smart-shopping-list--pr28-is-ld-12-sort-shoppi-dshop024.web.app

_{(expires Sat, 30 Sep 2023 18:43:10 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: a91b8fb0f37677e20d8afa3e8ea496251536f9b8}

[lydiadunning]

Updated with changes. Moved the text into a span in the label, and used css variables set in ListItem and in a media query to use different colors in light and dark mode. Also removed formatting styling from ListItem, where it didn't have an impact, and added grid styling to the label. This looks neater than flexbox, but may complicate adding the delete button to the ListItem.