Hulya and Isa sorting items

[isaabutaa]

Description

• Sorted items list by estimated daysUntilPurchase 👉 If an item's daysUntilPurchase are in the soon category (<= 7 days) it will be near the top, and colored in green 👉 If an item's daysUntilPurchase are in the kind of soon category ( between 7 - 30 days) it will be in the middle, and colored in orange 👉 If an item's daysUntilPurchase are in the not soon category (between 30 - 40 days) it will be near the bottom, and colored in red 👉 If an item's daysUntilPurchase are in the inactive category, it will be last in the list and have a background color of grey
• Also, sorted items list alphabetically by name, so items will first be sorted by daysUntilPurchase, and if that value is the same, they will be sorted alphabetically
• Added aria-label in the label tag in the SingleItem component, to allow the screen reader to make a distinction on how soon to buy the item.
• We also added an aria-checked attribute in the label tag to say if the checkbox is checked or not. If you hover over the element, it won't say if the checkbox is checked or not, but if you click on the element while inspecting the code, it will.
• In AddItem component, initialized daysUntilPurchase with frequency value so that it is not saved as null when first added to the database (see line 55 in AddItem component)
• NOTE: We tried various methods for properly calculating if an item is inactive or not. We tried calculating the number of days passed since the lastPurchasedDate, and saved that in a separate variable, but we were unable to properly integrate with our logic when comparing daysUntilPurchase, so we ended up just using an else statement instead

  const daysPassedSincePurchase = Math.round((Date.now() - lastPurchasedDate) / mlsPerDay);

• NOTE: If an item is clicked/purchased, at least two times, it will move further up the list of items according to daysUntilPurchase. We had hoped/expected that it would still be alphabetical, but it is primarily sorted by daysUntilPurchase, and name second, so it won't always be alphabetically ordered

Related Issue

closes #12

Acceptance Criteria

• Items in the list are shown as visually distinct (e.g., with a different background color on the list item) according to how soon the item is expected to be bought again: Soon, Kind of soon, Not soon, Inactive
• Items should be sorted by the estimated number of days until next purchase
• Items with the same number of estimated days until next purchase should be sorted alphabetically
• Items in the different states should be described distinctly when read by a screen reader

Type of Changes

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

Updates

Before

After

Hover over elements to see accessibility attributes:

Sorted Items with color:

Enable voiceover on Mac:

Testing Steps / QA Criteria

• git checkout hk-ia-sort-shopping-list
• git pull
• npm start
• Add new items with varying frequencies
• Buy some of them to see how they are sorted NOTE: the numbers next to the items' names represent daysUntilPurchase for that item

[github-actions[bot]]

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

https://tcl-28-shopping-list--pr38-hk-ia-sort-shopping-e3l98g3z.web.app

_{(expires Fri, 27 Aug 2021 00:46:59 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[hulyak]

Great job with this @hulyak @isaabutaa! I pulled down the branch and everything worked as expected when I added new items to my list.

I encountered a bug when I first opened my list, some items for my token weren't displaying at all, but they were all old items added a while ago that didn't contain all of the fields we now include (I think the one causing the issue is daysUntilPurchase, which wasn't included in older items). I deleted them from Firestore and added new items instead and all worked as expected. If it's ok with everyone, I'm happy to go back and filter through old items in Firestore on my own time and remove them so we don't run into this issue going forward.

Yes, I think we should clean up Firestore 😃 I tried to delete some of them, but couldn't check all.

[scooberu]

My personal recommendation for getting the sorting correct would be to create a Map/Dict object to store the firestore query results, with that Map containing an array for each of our groups (soon, not soon, kind of soon, and inactive) (itself sorted alphabetically). But my JS practicum is wanting; not sure the best way to handle this idiomatically. @luisaugusto / @meganesu I would be interested to hear your feedback on the best JSish way to handle the interior sorting among these groups.

[scooberu]

Just noting here that we realized the AC had already been met with the way the sorting worked already; disregard my last.