Beautiful.
And with our initial set up in place, why don't we start working on functionality and I can tell you
right away that for the following videos, the structure pretty much is going to be the same.
We're first in the context.
I'm going to set up my function and dispatch some kind of action that will pass that function down to
the provider.
And then, of course, we'll look for the component that is looking for that functionality, whether
that is to remove all the items or just a single item or increase or decrease or whatever.
And then, of course, we will deal with that in the register.
So steps will be the same because the functionality will change.
And I'll start with the easiest one, and that one is to remove all the items from the clock.
So we have the clear cut button.
Of course, it is looking for that function.
So I'm going to go with const.
I will name this, I don't know, clear cut and also clear, clear cut.
Now the function won't be looking for any arguments and will simply would want to dispatch.
So say this patch.
Remember we needed to pass and the object of course.
And then as far as the type again common convention is typing this all in uppercase.
So just say clear on the score and then.
So that is the action that we're dispatching.
Like I said, then I would want to pass it down to my provider so the whole app can access that function.
And which component is looking for this functionality?
Although I want is the card container.
Now, at the moment we have carte and then total.
So we also the structure, clear card function and then there it is.
Now we have our button and then instead of setting up the in line, I can simply delete because I'm
not going to be passing any kind of arguments.
So we go with Claire and Card and the last thing, like I said, is to make sure that we handle that
and register now before we set up the functionality, I just want to mention something that I didn't
cover in tutorial when we talked about reducer.
Some people prefer using the switch statement here instead.
So in my case, I prefer setting up a bunch of statements.
That is just my preference.
There's some people who prefer using a switch statement.
So if you're one of those people, feel free to do that.
In my case, I'm still going to use a bunch of if statements just because I prefer that better.
And we're going to start with the first one.
So I have my condition.
And what I'm looking for, of course, is if and then I'm going to say, well, what is the type?
Correct.
And in my case, the type that I'm looking for is clear cut.
So go with if and then action and then type.
And if that is equal, he'll clear cut what I would want to do.
Well, let's think about it.
We have our state now in the state.
I have multiple values.
Not only I have the card, I also have loading, I have total and then the amount.
And we already know that once we return something from the producer, that will be our new state.
So we need to be careful where I have other values as well.
So I'm going to go return.
I'm returning the object.
So that is going to be my new state.
And then I go with that and I spread out the old state values.
And then the only one that I would want to change is what?
Well, that is the card.
Correct, because I would want to clear all the items from the card and how we can do that.
Well, if it is in our area right now and simply say, you know, change the value of the property to
a empty array, that's all we have to do.
Now, of course, once we click, there is now clear out all the items from the card like so.
And then since we're handling that in the card container where we have the condition where we say if
the card like the zero, then of course we can see your bag is currently empty.
Now, if you want to see that in the components as far as the react developer tools, you can go to
components.
There is our provider and there is our juicer.
We have the amount, we have the card, we have the loading and total.
And since we nicely spread out the old values, we don't remove them from the state.
We just simply turn the array from three items down to an empty array, meaning zero items in our array.