Mark Item as Purchased

Value Proposition

As a user

I want to mark shopping items as purchased,

so that I can keep track of what I have already bought and what is still needed.

Each shopping item in the shopping list includes a checkbox to mark the item as purchased.
When an item is marked as purchased, it is moved to a separate “Purchased Items” section below the shopping list.
The “Purchased Items” section displays purchased items with a clear visual distinction (e.g., greyed out, strikethrough, etc.).
The last item marked as purchased appears at the top of the “Purchased Items” section.
Users can unmark purchased items by clicking the checkbox again.
Unmarking an item moves it back to the shopping list.
The shopping list and “Purchased Items” section both support vertical scrolling to accommodate multiple entries.
The number of items in both sections is clearly displayed.
If all items in the shopping list are marked as purchased, a message is displayed indicating that all items have been purchased.

TASKS:

[x] Create feature branch feature/mark-item-purchased
[x] implement a check box in the ShoppingItem component
[x] define a purchased-State in the component
[x] have check box toggle isPurchased
[ ]
[ ] leave this State in the ShoppingItem component
Pete 09/18:
[] keep isPurchased state and toggleIsPurchased in order to toggle state for individual items
[] one single State for the shoppingItems in _app.js,
[] simply add the feature isPurchased to each item in the original array, then
[] filter shoppingItems into 2 arrays (in the _app.js): purchasedItems and unpurchasedItems
[ ] ?? introduce new state `purchasedItems´ in index/_app.js
[ ] ?? pay attention: use shoppingItems or shoppingItemsWithCategoryColor
create components: shopping list, list of purchased items
[ ] use the purchasedItems´ and theshoppingItems(?WithCategoryColor)´ states here in order to

no: create new array: "items not purchased"
[ ] conditionally render items on the home page (index.js) either in the shopping list itself or - in the list of purchased items below the shopping list
[ ] convert useState´ touseLocalStorageState´ in order to conserve the bookmarks - later US, not now
[ ] add a counter for the purchased items
[ ] visually mark purchased items (e.g. greyed out, ...)
[ ] optionally implement PurchasedItems component and render it below the list in index.js
[ ] add a message that is displayed when number of items to purchase = 0
[ ] eventually replace check box with bookmark icon (optional)