Sorts list by urgency

[jeremiahfallin]

Description

This code adds a new function comparePurchaseUrgency which takes in a list of items and uses getDaysBetweenDates created in #10 to calculate daysUntilNextPurchase and daysSinceLastPurchase for each item in a list utilizing the item's dateNextPurchased and dateLastPurchased properties, respectively. The comparePurchaseUrgency function also uses various arrays of "urgency" (overdue, soon, kindOfSoon, notSoon, and inactive) that these items are put into based on the criteria outlined in #12. After this initial sorting of "urgency" is done, we sort the items in each array by their daysUntilPurchase property ascending, which we added from the first step, and then alphabetically by name. Lastly, we return an object from the function that holds all the sorted "urgency" arrays in the order they will be displayed as listed above.

In List.jsx, we imported comparePurchaseUrgency and set our data to the object returned from the function after we passed in our list of items. Finally, we added corresponding headers above each array before mapping it and changed the color of the checkboxes in ListItem.css so users can differentiate among their items.

We also removed a duplicate useNavigate variable declaration in List.jsx.

Related Issue

Closes #12

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

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

	Type
✓	✨ New feature
✓	🐛 Bug fix

Updates

Before

After

Testing Steps / QA Criteria

In your terminal, use git checkout -b yj-jf-sort-list-by-urgency to create a new branch and switch over.
Use git pull origin yj-jf-sort-list-by-urgency to bring the changes from remote to local.
npm start to start a local instance of our app.

Please join an existing list with items already populated. I recommend using curry rowdy seth as the list token as that collection has items in every single urgency category.

• Navigate to the List view and you should see different headers each followed by a list of item(s) with the same checkbox color. The sections that you might see and their associated colors are as follows (in this order): Overdue: purple, Soon: red, Kind of soon: orange, Not soon: yellow, and Inactive: gray).
  • Note that the headers will not appear if there are no items in that urgency category (use my test list for an example)
  • Note that the headers should not appear if the filtered item list does not return items in that urgency group
• Navigate to our firebase backend to spot check that items have been categorized correctly by looking at their properties:
  • Overdue: dateNextPurchased has passed, but today is not more than 59 days from dateLastPurchased
  • Soon: dateNextPurchased is not more than 7 days from today
  • Kind of soon: dateNextPurchased is between 7- 30 days from today
  • Not soon: dateNextPurchased is 30 or more days from today
  • Inactive: Today is more than 59 days from dateLastPurchased
• Within each urgency section, check that the items are ordered by ascending order of days between today and dateNextPurchased and if its the same number of days, then alphabetically by name. Note that for days in the past those are considered negative days and should be displayed first compared to positive days in the future.
• Once an item is checked, it should display a check in the appropriate color.

[github-actions]

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

https://tcl-55-smart-shopping-list--pr30-yj-jf-sort-list-by-u-jh7vny1a.web.app

_{(expires Sun, 21 May 2023 18:05:00 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 607d14028385ebfcc7c9ec69a7bb14d95ed54078}

[ticiadev]

Nice work! Love the use of reduce in the firebase.js functions and the code was easy to follow. Everything worked as expected in testing.

[lyleschemmerling]

This is technically a "compare" function as no sorting happens, just comparing two values and is passed as the compare function to a sort

[lyleschemmerling]

Should we normalize the item name like we do on the add item page? What happens when we sort ['bAby', 'aBBy', 'Baby', 'Abby'] all with the same date?

[Yaosaur]

Hey Lyle, I don't think we need to worry about the scenario you bought up. Remember how for issue #9 me and Katherine would prevent duplicate items like that ending up in our list in the first place.

[mentalcaries]

@Yaosaur @jeremiahfallin there seems to be an issue with the alphabetical sorting based on case:

[jeremiahfallin]

@mentalcaries good catch, should be fixed now.

[katherineyuneman]

Everything is functioning as it should - from the user end, I like the categorization headers and coloring for the check boxes.

From the code side, complicated but great use of .reduce() in firebase.js. Also liked use of <Fragment> so you could utilize key as a prop in mapping.