Sorting List by Purchase Estimate US 12

lindseyindev commented 2 years ago

Description

We added an isActive data point to each item on /AddItem and we are setting the isActive data point to true in /listItem if there are more than 2 purchases and the days since last transaction is not greater than 2 * the previous estimate.

We added sorting algorithms to the list sorting by previous estimate then sorting by inActive property, this sorts by dates and then places any inactive items at the bottom of the list. Note: Firebase sorts alphabetically by item Id so 2 items with the same previous estimate will be sorted alphabetically.

We set a "Need to buy" temporary text for each item to convey the estimate in a written rather than visual way, would love ideas on restructuring this! Shelley had a great idea to group the items together based on frequency and isActive but we weren't sure on how to do that without breaking up the list and doing separate renders.

We made a function to return tailwind classes based on how soon a user is expected to purchase an item and set temporary colors for each item:

if an item's estimated purchase days are < 7 the background color is set to green for that item
if an item's estimated purchase days are < 30 the background color is set to yellow for that item
if an item's estimated purchase days are >=30 the background color is set to rose for that item
if an item's isActive property is false the background color is set to gray.

Related Issue

closes #12

Acceptance Criteria

Need to buy soon (fewer than 7 days)
Need to buy kind of soon (between 7 & 30 days)
Need to buy not soon (more than 30 days)
Inactive (when there’s only 1 purchase in the database or the purchase is really out of date [the time that has elapsed since the last purchase is 2x what was estimated]) AC:
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 the 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

screencapture-tcl-36-smart-shopping-list-web-app-listView-2022-02-16-10_42_23

After

screencapture-localhost-3000-listView-2022-02-16-10_39_44

Testing Steps / QA Criteria

After pulling down this branch to your local environment, run npm start
You can join the list we have been working on by running this in your browser console: localStorage.setItem('list-token', 'trust eclat shot'), and then navigating to /listView. You can also try creating a new list with your own items but to see active items you would need to change multiple data points in firebase so that the isActive property can evaluate to true.

github-actions[bot] commented 2 years ago

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

https://tcl-36-smart-shopping-list--pr31-ld-sm-sort-shopping-xqul8gx8.web.app

_{(expires Sat, 26 Feb 2022 19:07:48 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

rudidev08 commented 2 years ago

Fantastic PR and comments: you've explained what was done for users and for devs audience, plus what you considered doing and what was blocker (grouped lists).

laurenyz commented 2 years ago

@lindseyindev @shelleymcq - I failed to say (even though I thought it) - your solution is very creative and thoughtful! There were so many intricate pieces to this issue, and you solved them all in really interesting ways (isActive, groups, colorClass, sorting methods, unique rendering). 👏 🎉

lindseyindev commented 2 years ago

Yay for making code better!! Thank you everyone for the feedback and I love seeing all these perspectives to help make our app better 😊 I think I looked at almost everything mentioned but if I missed something please let me know

Also I really love how @rudidev08 showed us this grouping strategy the logic is so brilliant and allows us to centralize our sorting instead of having these sort methods really detached from the rendering and it makes it really easy for styling as a section

An update on what it looks like with the list of items Shelley was able to format so there are items in every section

styling updates

**the bottom container's corners look cut off but that's just from the page screenshot extension I use, in live all the corners look rounded

I'm going to make an issue for some later refactoring to hide groups with no items~

the-collab-lab / tcl-36-smart-shopping-list