All language subtitles for 018 Making Items Removable_en

So let's now make the cart work

and let's make sure we can add and delete items

from there as well.

Now, actually we can start with adding items

because we got all the logic for that in place already.

And in the Cart.js file, we've got the cartItemHandler

which is being triggered when this plus button

for a CartItem is clicked.

So in the cartItemHandler, we now simply need to reach out

to our cartCtx and call addItem there

and simply forward the item.

And that will trigger that addItem function

in the CartProvider.

Here it is, which dispatches this CartAction

and that will therefore already do the rest.

So with that, if we save that if we reload,

if I add a couple of items,

if I click the plus next to sushi,

this already updates and the same for the schnitzel.

So this is working.

Now what's of course not working is removing items.

So therefore let's work on this now.

We already got the removeItemFromCartHandler

in the CartProvider where we dispatch an action

but currently we're not really handling that action.

In the cartReducer, we should now add another if check

where we check if the action type is equal to remove

like this and actually we should do that, not here

but next to the add if check.

So here, right before we return our defaultCartState

which is our fallback in case we had some other action.

Now in here we now wanna update the cart

and again we'll have to make a differentiation here.

Generally, we wanna update the existing cart item.

So for example here, if we already have sushi in the cart

and we click minus, we wanna decrease the amount by one

but sushi will still be a cart item

unless we had an amount of one here.

Then if I press minus again if this was one here,

I want to remove the item entirely from the cart.

So we'll have to differentiate

and to check for that here in our reducer.

We can start by finding the cart item

as a first step though.

For this I'll again get my existing CartItemIndex here

by reaching out to the state.items.findIndex.

Same logic as before.

And here just as before we can copy that entire code here

and replace this actually.

We now find the index of an existing item.

Now we can also get to the item itself

by then reaching out to state.items

for that identified index here.

We also wanna update the amount and we can do that first.

The updatedTotalAmount is simply state.item

as state.totalAmount

minus simply existingItem.price.

And I should move this past the existing item of course

because either way if we remove the item entirely

from the array or if we just decreased the amount

in the cart, we simply remove one item of that type.

So the total amount definitely decreases

by the price of one single removed item.

So this line here is always correct.

Now we can again create our updatedItems variable

and then again differentiate and simply check

if for the existing item the amount is equal to one

which means it's the last item of that type

in the cart, which we wanna remove.

In which case we wanna remove the entire item

from the array. Else if it's bigger than one,

we wanna keep the item in the array,

we wanna keep the item in the cart

but we wanna decrease the amount.

So let's start with the if case.

Here, updatedItems is simply state.items.filter.

Filter is a built-in method which returns a new array,

build that by applying specific conditions.

And we pass a function to filter

which is executed for every item in the array.

And that function receives the item.

And if it returned true here,

we keep the item in the newly returned array.

If it returned false, we get rid of it.

So here we wanna keep all items

but we wanna remove the item with that id

which we get on our action here.

That's the item we wanna get rid of.

And by the way here, we should just check action id,

not action item id because for removing items

we are dispatching an object

which just has the id, not the entire item.

So that's a little fixed. We should implement anyways.

But now back to filter, here we wanna check

if item id is not equal to action.id.

With this check we make sure that all items

where the id is not equal to the action id are kept

because this returns true and hence the items are kept.

But the one item where the item id is equal

to the id of the action, which is the to-be-removed id

for that one item we return false here.

And then we remove that item from the newly generated array.

So that gives us a new array where this item

with id is not part anymore.

And that's the entire logic

for this case that we had an amount of one.

Now if the amount is greater than one,

we don't wanna remove the item from the array.

We just wanna update the amount.

So here we have the updated item

which is a copy of the existing item

in a new object with the spread operator.

And we just update the amount.

We set the amount to existingItem.amount minus one

to decrease it by one

and updatedItems is then a copy of state.items

to create a new array with the old items.

But we override one of these items.

The item for that index which we got here

where we then override the old item in the array

with the updated item which has the updated amount.

And then here after this if else blank,

we simply return a new state object

where items is updatedItems, add the totalAmount is equal

to the updatedTotalAmount.

And that's our logic for removing items from the cart.

Now we just need to wire up this button

in the cart component here in the CartItemRemoveHandler.

We now wanna call cartCtx,

removeItem and forward that id.

And if we do that and save everything,

if I reload and I add a couple of items.

I have one of all these items in there.

If I now remove sushi, it's removed entirely from the array.

If I add one to the schnitzel and I then remove that,

the amount has just decreased

and only if I remove that again, it's removed from the cart.

So now it looks like adding and removing to

and from the cart is working correctly.

And that's exactly, of course what we want here.

Now with that we're almost done

but I wanna play a little animation on the cart button now,

whenever a new item is added to a highlight

that this badge changed and that the cart overall changed.