#12 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.

gabynr commented 3 years ago

Items are visually distinct with different background colours based on how soon they need to be purchased (Soon, Kind of Soon, Not Soon, Inactive). Aria labels are also included for screen readers with the same labels.

Items are sorted by estimated days until next purchase (or if inactive), and if items are on the same date, we also sort and display those items alphabetically.

We also modified some dependencies to decrease errors in the console, removed a debugger sort useeffect, and changed an if statement to a ternary operator.

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

After

github-actions[bot] commented 3 years ago

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

https://tcl-31-smart-shopping-list--pr33-va-gn-order-list-9jwpra8a.web.app

_{(expires Tue, 16 Nov 2021 15:34:33 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

bajancode commented 3 years ago

Thank you Andrea! So, we ended up changing it mainly because we felt a ternary operator looks more in keeping with the "modern" React framework. It still seems to work the same!

On Wed, Nov 10, 2021 at 2:02 PM Andrea Martz @.***> wrote:

@.**** commented on this pull request.

In src/List.js https://github.com/the-collab-lab/tcl-31-smart-shopping-list/pull/33#discussion_r746852930 :

checked={

!!item.lastPurchasedDate &&

new Date() - item.lastPurchasedDate < ONE_MINUTE

}

onChange={(e) => handleChange(item.id, e)}

/>

<label htmlFor={custom-checkbox-${item.id}}>

{item.name}

);

})}

</>

) : (

Just curious...this was fixed last week according to @MikeBLambert https://github.com/MikeBLambert's suggestion. He and @bajancode https://github.com/bajancode approved it. What made you decide to change it to a ternary operator?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/the-collab-lab/tcl-31-smart-shopping-list/pull/33#pullrequestreview-802953185, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMSBG4VMRUK4GIND5FRUFADULKXSXANCNFSM5HVS5H3Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

aidantorrence commented 3 years ago

Approved!

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