Display items in categories

[ocsiddisco]

Description

This PR is adding visuals indicators to how soon an item should be bought. It takes in consideration that an item could be 'overdue', meaning that it had not been purchased at the expected time, and 'inactif', meaning an item has not been purchased for more than 60 days.
The implementation keeps the previous filtering method implemented and adapted it to the new UI.

Regarding the acceptance criteria 'sorts inactive items last', we did not implemented it in the 'comparePurchaseUrgency' in firebase.js, but it is implemented in the UI in the 'list.jsx'.

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

Type of Changes

	Type
✓	✨ New feature

Updates

Before

After

Testing Steps / QA Criteria

• git checkout -b bo-ce-compareitems
• git pull origin bo-ce-compareitems
• Go to the list page and your items are now sorted by categories, and try searching an item.

[github-actions]

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

https://tcl-71-smart-shopping-list--pr31-bo-ce-compareitems-jm8hed6x.web.app

_{(expires Fri, 22 Mar 2024 09:31:39 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 1e7ade9d0f374c4ddb5d7ab6fc541062fc7a1ab4}

[BikeMouse]

Nicely done!! <3

[vivitt]

Hello team! Nice job, the new feature works great and the items are nicely ordered. I like that the changes in the UI are simple yet clear.

I think we can still add more work on this issue, so we address the problem of displaying the items with a sooner nextPurchaseDate first.

I tried locally to make some changes in the comparePurchaseUrgency function in firebase.js line 251:

let dataSortedByDaysLeft = newData.sort((itemA, itemB) => {
    return itemA.daysBeforePurchase - itemB.daysBeforePurchase;
});

let dataSortedAlphabetically = dataSortedByDaysLeft.sort((itemA, itemB) => {
    if (itemA.daysBeforePurchase === itemB.daysBeforePurchase) {
        return itemA.name.localeCompare(itemB.name);
    }
});

return dataSortedAlphabetically;

Will be happy to contribute on this if needed :)

[ocsiddisco]

Thank you for your feedback Viviana! @borjaMarti Viviana raised this question during the office hour meeting yesterday. We have now this question, in each categories (Buy Soon, Buy soonish...etc), do we display items alphabetically or by day before purchased.

As the meeting was yesterday, I had some thinking time, and this decision will have to be a team one, as both way of handling the sortering are acceptable.

I approach this question with the user and their behavior in mind:

• For the 'buy soon' category, the user will never know exactly when the next expected date of purchase is, therefore does it matter for them to have the first expected to purchase items at the top? In this case, sorting alphabetically will be easier for the user to read and find an item.

Example one, there are three items in the 'buy soon' category, and the date before purchase is 5 of those three items. The user won't know the date of purchase, however as the items are in the 'buy soon' category, they know they will probably need them soon.
Buy soon:
Botter
Chocolate
Milk

Example two, there are three items in the 'buy soon' category, and the date before purchase for chocolate is 3 and for the other two items 7. The user won't know the date of purchase, however as the items are in the 'buy soon' category, they know they will probably need them soon.
Buy soon:
Chocolate
Botter
Milk

The 'buy soon' category is more an indication we give the user that they are more likely to need to purchase this items soon so they can plan their grocery accordingly.

• However, for the 'Buy soonish' and 'Buy not soon' categories, it could be wise to sort them buy day before purchase, this will give a visual hint to the user about the items that will move first to the upper category.

@BikeMouse @vivitt @borjaMarti Let's come up with a decision before the weekend :)

[borjaMarti]

Hey team!

The way I understood the issue, sorting should work the way you mention, @vivitt, but while coding it @ocsiddisco mentioned that from a UX perspective it makes more sense to alphabetically order the items inside each block since we aren't communicating the exact numbers of days left to the user. To me this made sense as well, so that's the way we implemented it.

Personally I'd keep the sorting behavior consistent between blocks, one way or the other. I'm open to doing it either way though ^^

[ocsiddisco]

Good morning team!
I have updated the comparePurchaseUrgency function in firebase.js. It returns now an array sorting items by day before purchase and when items have the same day before purchase, they are sorted alphabetically. Thank you @vivitt again for you feedback, this implementation is fidele to the acceptance criteria.
@borjaMarti and @BikeMouse