Beautiful.
And another thing that I would want to fix is the fact that notice how decrease and increase have almost
the same functionality.
The only difference is the plus one, minus one.
And in this case, I decided that I'm going to create another action.
That's why we call this toggle amount.
And in that one, we will combine the two.
So that way you can still have reference for a decrease and increase.
But we'll take a look at how we can add more values in the function.
So that way we can just have one action.
Now, as far as the beginning, I want to start by setting up everything in my car container.
So of course, this is where I will run.
So I need to look for.
Blencoe Costa, Sarah.
Behind the project, the station just west of here.
What were you now?
Beautiful, with our first refractor out of the way.
Next would like to take care of the fact that decrease and increase essentially have almost this.
Beautiful with our initial refractor out of the way.
Next, I want to switch gears and talk about.
Beautiful with our initial refactor out of the way.
Next, I would like to focus on the fact that decrease in increase essentially have exactly the same
functionality.
The only difference is the minus one line in here, of course, I have plus one.
That's why I will create a separate section just so you still can have references for these two, but
then in that action will take care of the both the decrease and increase.
Now, the way it will work in the actions, currently we have toggle amount.
So first we will need to import in the correct item.
So let me navigate there.
Instead of just remove the crease and increase, we will also go with toggle amount.
OK, awesome.
Then remember, down in the bottom we had our match props and of course we would still want this patch
correction or in this case, it's going to be a bit more complicated as far as our function.
Now, it's not going to be much more complicated, but just a bit.
So we're going to go with toggle.
So that's how I'm going to name my function.
And then in this case, I'm going to pass in the function a argument.
So when we will actually invoke our function, we'll also pass in the actual argument.
And that argument will be either we will increase or decrease since again, it's going to be the same
function.
But in the function we will check whether we're increasing or decreasing.
So that's where I.
So that way we won't have to copy and paste the same functionality again, toggle function.
But then unlike the other ones in this one, we will pass here a primer, which eventually will be our
argument, and that will still return a dispatch.
So let me set this up.
We will go with this patch.
Then type will be torgau amount.
Remember, we need it to have an object than a toggle amount.
And then for the payload, I'll pass through things opportunity because I still need to know which item
it is.
And the second one will be my payload.
And the second one will be my dog.
So the one that I'm passing in the actual function, I'll pass it also in my payload.
So payload is an object.
We have the ID that is coming from the on purpose, of course.
And then the second one, like I said, is the toggle parameter that we will pass in actually our return.
So we have our return.
And then instead of increase and decrease now, we will use our tag to see the function that we created
last.
That's the one we will import first.
So let me check where I have the car item.
So I have increase.
Decrease.
Now, those will stay for reference, but I will also get as a prop my toggle.
And then, like I said, instead of increase, I will go with toggle.
And then as far as the toggle argument, it will be either ink.
So I m c or D, e, c, so either I'm increasing or decreasing.
So in my case, since it is a increased button, that's why I'll pass my toggle as a string ink.
So that means I'm increasing.
And the same thing I would want to do here where I have the decrease.
So I'm not going to return a decrease, I will return a toggle.
However, in this case, of course, my argument will change to D.C. Now I'll say both of them.
And of course, now in a register, I need to take care of that.
So let me first look for my register.
Then of course I need to import.
So I'm going to go with toggle amount.
OK, we imported a fraction.
And then again, let's find a place somewhere here, maybe in the bottom.
I think that will make more sense.
I'm going to go with if action type is equal.
And again, we're looking for the toggle amount.
And in this case we will copy and paste some code or remember that we will set up a one function that
take care of the both.
Now, we'll still do the map.
I mean, that will not change.
However, we'll just going to place both of them in the same place.
So let's start this way.
We have our on amount.
OK, awesome.
Then let's set up our curly braces.
And you know what?
Just to make things interesting and just to show you how it would look like if we would just write everything
in one object, it'll make things interesting where I will right away return my state.
So I'll copy and paste my values.
That's fine.
Or maybe more precisely, I'll copy all my values.
And then I'm a writer.
We're going to overwrite card.
And in this case, instead of setting up a separate variable, let's write state card.
So we are on our map function that still stays the same.
Then I remember we had a callback function, so I'm going to go with card item and now what are we returning
from the card item?
So this is going to be the case where if the actual ID doesn't match, then I will just return a card
item that still stays the same.
That would be my default, however, then I'll have two sets of if statements.
So first I'm going to have if statement.
If the ID matches, then of course I would want to make some changes, just like we did previously here.
Remember again, we checked for the ID if the ID matched the payload ready, then of course we returned
a new item.
But if it didn't, then we just return whatever item was in the way.
Now in this case, there's going to be two sets of if statements.
So again, we have our return card item.
So we have default taken care of.
But now we want to set up my if that card I remedy.
If that matches to my action payload already, then I would want to have another set of if statements.
And in this case it's going to be following where I'm going to go with action payload and then remember
the toggle argument that we passed.
And I'm going to say if it is equal to increment.
So I am see, then of course I would want to return.
And I'm going to return my cart item, so I'm going to go with cart item, so essentially I'm overriding
whatever I have here and I'm going to set it equal to my new object.
So everything exactly the same.
But in this case, we're using this statement.
So the same line of code effectively here.
So I will.
All right.
Here, item that.
Let's copy everything that we have in the cart item at the moment.
And then since the argument is increase, that's why amount will be equal.
You guessed it cart item amount and then plus one.
Correct.
I'm sorry, not plus two plus one.
And of course I would also need to set up another if statement if the toggle argument is equal to decrease.
So in this case we can copy and paste.
It's not a crime and I'm going to go with decrease and negative one.
So again, in this case, we're not copying pasting the whole functionality.
We just check within the map whether we are increasing or decreasing.
So, again, notice we can increase.
We can decrease.
And since we set up the functionality to remove the item.
Now, of course, we can just remove the item.