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

[3campos]

Description

• We moved the todaysDate variable into dates.js from ListItem.jsx and then exported it from dates.js because it was used in different files.
• We changed the subtractDates function in dates.js to be getDifferenceBetweenDates because it needed to be used in multiple places.
• We moved the logic from subtractDates into the isChecked function in ListItem.jsx to be the new value of checked on the input.
• We created a function in firebase.js comparePurchaseUrgency, to compare the purchase urgency of each shopping item. It sorts the item based on the acceptance criteria below.
• We created an if-else block in ListItem.jsx to display the urgency status of each shopping item depending on when it needs to be purchased next or when it was last purchased.
• We created a switch statement in ListItem.jsx to display color depending on the urgency status of each shopping item.
• We changed some variable names for consistency and clarity.

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
• Accessibility

Updates

Before

After

Testing Steps / QA Criteria

1. git pull
2. git checkout ec-hm-issue-13
3. npm start
4. navigate to an existing list
5. create several items for that list and indicate "not so soon", "kind of soon", and "soon"
6. view the urgency text (along with colors) next to each shopping item on the list page
7. to test for items that are overdue, use the firebase console to change dateNextPurchased to something less than today's date (less than 0 days between dates) and dateLastPurchased needs to be greater than dateNextPurchased
8. to test for items that are inactive, use the firebase console to change dateLastPurchased to a date that is older than 60 days
9. If you want to view the actual days between dates being calculated on the front end, you can paste the below code beside the name prop in the label element in ListItem.jsx.

{Math.floor(
  getDifferenceBetweenDates(
    dateNextPurchased.toDate(),
    todaysDate,
  ),
)}

[github-actions]

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

https://tcl-66-smart-shopping-list--pr37-ec-hm-issue-13-b4dnxh6w.web.app

_{(expires Thu, 21 Mar 2024 16:32:18 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 2dc16cb2a79cbd6723fdc511b73e0743df1d18d0}

[StefieCaff]

Great work team Devs! Nice algorithm! The updated variable names are well thought out as well. 💣💣
🙋🏽‍♀️ I had one comment added in the firebase.js file.
Also had a thought--- I have a lot to learn about this, but thinking about a sorting algorithm made me wonder if in the future we should consider an item limit on our lists. I think it would take more than a person would logically use to overwhelm this algorithm, but it might be a good look ahead to consider.

[eonflower]

Nice job y'all. Code looks clean. Added some comments about some naming stuff, but not imperative that we change things.

My only other thing, which is not part of the AC, but could be something to think about, is that maybe in the future we could add a key that has information on what each colour/timeframe mean. We could also have maybe a hover/click effect where the word descriptor would appear, but otherwise they could just be by colour. Obviously this is not part of your scope, but I am just thinking for a nice minimal look it could be cool.

[jeremiahfallin]

Everything seems to be working as expected. Nice work, looks good to me!