Issue #13: Sort Items by Purchase Urgency #30

dterceroparker · 2024-09-16T18:49:49Z

Description

This feature sorts shopping list items by urgency to help users plan their purchases. Items are grouped into:

Due soon (7 days or fewer)
Due kind of soon (7–30 days)
Not due soon (30+ days)
Overdue (0-60 days since predicted next purchase date)
Inactive (60+ days since last purchase)

Changes

Added urgency indicators to each item without relying solely on color.
Implemented comparePurchaseUrgency in dates.js to:

Sort inactive items last.
Sort items by days until purchase.
Sort items alphabetically if urgency is the same.
Overdue items (past their purchase date but not inactive) are sorted to the top.
Overdue items are indicated in the UI.

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

Updates

After

Testing Steps / QA Criteria

Please log in using your Gmail credentials
We have shared the SortTest list which should appear on the Home page

SortTest list reflects all urgency categories. Please examine that they are ordered from (bottom to top) inactive, not soon, kind of soon, due soon, and overdue.

Please feel free to experiment with your own lists to verify that purchasing an item changes its urgency.

export function comparePurchaseUrgency dates.js: update param name and logic to handle future and past dates List.jsx: import comparePurchaseUrgency

github-actions · 2024-09-16T18:50:38Z

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

https://tcl-74-smart-shopping-list--pr30-dtp-nr-sorting-d0os35i8.web.app

_{(expires Sat, 28 Sep 2024 16:15:01 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 79d73546692f99aad8468c28e36db434e2c190ac}

filter shopping list to separate out past purchase dates and pending purchase dates into two lists append the lists to eachother so overdue dates come first

…ping list items based on urgency Categories are: inactive, overdue, and future. Overdue items appear first, followed by future dates, and finally inactive items.

…list to table

…locate comparePurchaseUrgency to dates.jsx

stacy-tech

I tested it, and everything is functioning as expected. The urgency indicator works well, and updates the items purchase urgency time smoothly- great job guy! 🎉

shuveksha-tuladhar

@NickRoccodev11 @dterceroparker Great work! The functionality is excellent. For the UI, perhaps we could revisit the color choices that may work for both dark and light modes to improve visibility, especially in the lighter mode. We could consider creating an issue to address this in the future.

meganesu · 2024-09-21T03:34:25Z

src/api/firebase.js

@@ -10,7 +10,7 @@ import {
 } from 'firebase/firestore';
 import { useEffect, useState } from 'react';
 import { db } from './config';
-import { getFutureDate, getDaysBetweenDates } from '../utils';
+import { getFutureDate, calculateDaysDifferenceFromNow } from '../utils';


Nice update from office hours! 👍

src/components/ListItem.css

meganesu

Tested in the deploy preview. Looks good! 🥳 Great work y'all, this was a tough one.

+1 to @shuveksha-tuladhar's comment about color contrast. Here's a tool you can use to check the contrast ratio between two colors: https://colorkit.co/contrast-checker/

Also some web browser dev tools have a way you can inspect an element's color to see what the contrast ratio is. Here's what it looks like in Firefox:

src/utils/dates.js

jtkabenni

Good work you all! This one was a tough one to end on. I just had a few comments but otherwise it looks great, and you did a great job pulling functions into utils and commenting out what your code is doing.

src/utils/dates.js

src/components/ListItem.jsx

dterceroparker · 2024-09-21T12:59:27Z

Tested in the deploy preview. Looks good! 🥳 Great work y'all, this was a tough one.

+1 to @shuveksha-tuladhar's comment about color contrast. Here's a tool you can use to check the contrast ratio between two colors: https://colorkit.co/contrast-checker/

Also some web browser dev tools have a way you can inspect an element's color to see what the contrast ratio is. Here's what it looks like in Firefox:

Thank you, @shuveksha-tuladhar and @meganesu! We used dark mode and we overlooked testing in light mode. I appreciate the resource you shared, Megan. I'll keep both modes in mind for future testing.

feat(#13): implement sort list by purchase history

bdec39e

export function comparePurchaseUrgency dates.js: update param name and logic to handle future and past dates List.jsx: import comparePurchaseUrgency

dterceroparker assigned NickRoccodev11 and dterceroparker Sep 16, 2024

dterceroparker changed the title ~~Issue #13: Implement sort list by purchase history~~ Issue #13: Implement Sort List by Purchase Date Urgency Sep 16, 2024

NickRoccodev11 and others added 3 commits September 16, 2024 16:08

fix: update comparePurchase urgency function to handle overdue dates

69d35e8

filter shopping list to separate out past purchase dates and pending purchase dates into two lists append the lists to eachother so overdue dates come first

fix(#13): refactor comparePurchaseUrgency to categorize and sort shop…

86518ec

…ping list items based on urgency Categories are: inactive, overdue, and future. Overdue items appear first, followed by future dates, and finally inactive items.

feat(#13): display purchaseUrgency on List.jsx and refactor jsx from …

1161bc4

…list to table

dterceroparker changed the title ~~Issue #13: Implement Sort List by Purchase Date Urgency~~ Issue #13: Sort Items by Purchase Urgency Sep 18, 2024

NickRoccodev11 and others added 2 commits September 18, 2024 13:22

fix: rename getDaysBetweenDates to calculateDaysDifferenceFromNow, re…

e097d2f

…locate comparePurchaseUrgency to dates.jsx

feat(#13): apply css to urgency labels

6307f89

dterceroparker added accessibility enhancement New feature or request labels Sep 18, 2024

dterceroparker requested review from stacy-tech and shuveksha-tuladhar September 18, 2024 18:16

dterceroparker marked this pull request as ready for review September 18, 2024 18:16

stacy-tech approved these changes Sep 18, 2024

View reviewed changes

shuveksha-tuladhar approved these changes Sep 19, 2024

View reviewed changes

dterceroparker requested review from meganesu, mxmason and jtkabenni September 19, 2024 12:08

meganesu reviewed Sep 21, 2024

View reviewed changes

src/components/ListItem.css Outdated Show resolved Hide resolved

meganesu reviewed Sep 21, 2024

View reviewed changes

src/utils/dates.js Show resolved Hide resolved

meganesu approved these changes Sep 21, 2024

View reviewed changes

jtkabenni approved these changes Sep 21, 2024

View reviewed changes

src/utils/dates.js Show resolved Hide resolved

src/components/ListItem.jsx Show resolved Hide resolved

dterceroparker and others added 2 commits September 21, 2024 09:12

fix(#13): delete unused CSS from ListItem.css

7835574

Merge branch 'main' into dtp-nr-sorting

8279ed4

dterceroparker merged commit 55e8bc8 into main Sep 21, 2024
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue #13: Sort Items by Purchase Urgency #30

Issue #13: Sort Items by Purchase Urgency #30

dterceroparker commented Sep 16, 2024 •

edited

Loading

github-actions bot commented Sep 16, 2024 •

edited

Loading

stacy-tech left a comment

shuveksha-tuladhar left a comment

meganesu Sep 21, 2024

meganesu left a comment

jtkabenni left a comment

dterceroparker commented Sep 21, 2024

Issue #13: Sort Items by Purchase Urgency #30

Issue #13: Sort Items by Purchase Urgency #30

Conversation

dterceroparker commented Sep 16, 2024 • edited Loading

Description

Related Issue

Acceptance Criteria

Type of Changes

Updates

After

Testing Steps / QA Criteria

github-actions bot commented Sep 16, 2024 • edited Loading

stacy-tech left a comment

Choose a reason for hiding this comment

shuveksha-tuladhar left a comment

Choose a reason for hiding this comment

meganesu Sep 21, 2024

Choose a reason for hiding this comment

meganesu left a comment

Choose a reason for hiding this comment

jtkabenni left a comment

Choose a reason for hiding this comment

dterceroparker commented Sep 21, 2024

dterceroparker commented Sep 16, 2024 •

edited

Loading

github-actions bot commented Sep 16, 2024 •

edited

Loading