Some job we can clear our cart, whether by removing a single item or removing all the items altogether.
So now, of course, let's add functionality where we can toggle the amount of items we have in CART
from that one product.
And I'm going to start by adding some items because, of course, there's going to be some cataloging
along the way as well.
So let's fill our cart then.
I'm just going to add some random items.
Don't freak out.
Don't think that there's some purpose to what I'm doing right now.
There's just some random items.
If you want to add one, you can add one.
You add, I don't know, 15 can add 15.
That's really up to you.
What I'm interested in is these two buttons because remember, we use them in the add to cart.
So that was one set up.
And now, of course, we're using the same component or the functionality is going to be different.
Where will control the values that we have in the cart?
So let's navigate first with the cart context.
And then where we have to go.
Notice how I am taking two things, I'm taking in the ID and I'm also taking in the value.
Now, what is the value?
Well, since I would want to add the same function to both buttons, that's why I'm asking whether I'm
increasing or decreasing.
And if you remember our first, I believe, reduce project, or maybe it wasn't the first first one
was technically in tutorial.
But remember when we were setting up that cart and let me see.
Sorry, there's going to be a small detour.
Let me keep on scrolling, remember this project?
So we did something similar where essentially we first set up the function just for increase and increase
and then I combined it.
So if you remember the project, it's going to be very easy what we're about to do.
I have idea and value.
So this one will be either increase or decrease.
And then, of course, I would want to dispatch my action.
So this page, the name of the function or I'm sorry, I guess the name of the action will be toggle
cart item or item amount more precisely.
And then for the payload, I'll pass it on to you.
Thanks.
So now my payload will be an object and I'm going to be looking for the item.
So the idea and then the second thing, of course, is going to be my value.
So setting this up as an object, I'm missing one set of Curly versus over here.
And my apologies, Mark, so so this should be our set up type will be toggle caught in a moment and
then when it comes to payload ID plus the value.
So now in this case, my payload is an object.
And before we do anything in reducer, I would want to navigate to my cart item since that is where
we are setting this up and then check it out.
I have my target amount and in the increase in my placeholder, I would just want to invoke the function
again.
The difference here is that I'm not passing in the total amount to the amount of buttons I'm just passing
in the increase and increase that are coming from my cart item and not in that cart item.
I invoke this toggle amount, so I just say here toggle amount.
And for the increase, of course I will want to pass in first ID, but then as far as the string, I'm
just going to go with ink.
So increase and then decrease pretty much the same.
Just the value will change.
Now of course I'm still passing in the same ID.
I'm getting the card itemized, but of course the string is decreased.
And since I would want us to see what's happening, I'll go to inspect and where we have the card context.
I just want to toggle both these values.
So log and value over here.
And you'll notice in the console that once we click, check it out.
Now, of course, we have no matching toggle.
Correct item amount.
Don't worry about it.
You know what?
For the time being, since we I just want to console, like the viewers, I'm just going to move that
action by dispatch and set it up in a second.
And Nancy, I have my card.
Annamarie, by the way, this is very, very important.
Please understand that in this case, I'm already iterating over the card.
So I'm getting that car ready, which is just a combination of product productivity plus the car, not
like initially when we're adding it to the card, then we were constructing that idea.
In this case, I already have the idea since I'm iterating over here and there is now I have the ink.
So if I click on Vigorish now, the idea is going to be exactly the same, but the string is decreased.
So let's go to a toggle amount.
We will on comment or dispatch and in the car producer.
Right after clearing the court now, we could set up our toggle functionality, so let's say here,
if an action that type is equal to toggle correct item amount, then first I would want to get both
of those values.
So const come up value coming from action and payload.
So let's grab those ones first.
And similarly to how we were increasing the amount when we added items to the card, we will iterate
already card and then we'll check first.
What is the value.
So if we want to increase then of course we'll add one to the amount.
If not, then we'll decrease.
So first we'll check whether the item matches.
So if the ID is equal to three and then there's going to be two more if statements where we will either
increase or decrease.
So now let's start by setting up our time card.
And of course, this is going to be state and then court and then map, and before we set up the rest
of the functionality, I simply want to go with my return where I'm going to go down to that state.
And of course, my court will be that new court.
All right.
Where I'm iterating over my court.
And then, like I said, the steps are following more.
First, I want to check if the itemized matches.
And again, I already mentioned this, but please keep in mind that in this case, it is already that
value added is already this red plus color.
So it's not like previously where I was getting idea of color separately and that's why I was checking
her I.D..
Plus, in this case, I don't have to do that.
This is already that long value.
So I just say if the idea is equal to any, then of course I'll toggle those values.
If not, then I just simply want to return the item.
That's why we set up house and we say return the item as it is my item as I'm iterating over.
However, if this matches, then of course there's two options.
I either have value increase or decrease.
Correct.
So we simply go here with if value.
Is equal to increase, then there's going to be one piece of functionality, and then if there's going
to be a value of decrease, well, then we'll have something else.
Now, as far as returning both of them or turn this item is just the amount that is going to change
and we'll set up on your mouth.
Our new mount is equal to item amount plus one.
Why?
Well, because we're increasing kind of makes sense.
Right.
And then I need to check that amount.
So it is not bigger than the max, remember, highly, highly important.
I have some stock values in this case.
I kind of just say you add ninety nine items.
No, because I always need to check for my stock.
That's why we're setting up this Max one.
So I'll see if the new amount is bigger.
Then the item that Max.
Well, then I just need to set it back to that, Max, whatever it is, some cases, in some cases it's
11, I just randomly out of those values.
So item will be to that item, Max.
And then over here, of course, I would want to return it.
I'm just going to say that that item so spread out the rest of the properties and also the amount is
equal to my new amount.
We save it and now we just need to set up a decrease.
And in order to speed this up, I'll just grab these lines of code since there's going to be quite a
few similar things there.
And we'll start by minus one because we are decreasing.
And in this case, we're just checking if the new amount is less than one.
So if that is the case, I'm just going to set it equal to one.
That's all I want to do previously.
And some other projects we remove the item from the cart.
In this case, I'm not going to add that functionality.
We already have the button to do that.
So that's not how I'm clicking.
And nothing is happening by design because of course, we are at the one.
But if we want, we can increase.
This is going to be the max.
So we kind of have more items.
And of course, in this case, for example, the max is seven.
And if you can do the same, if you can increase and decrease the amount.
Now, of course, we can set up our totals.