1
00:00:00,330 --> 00:00:00,940
Beautiful.

2
00:00:00,960 --> 00:00:08,070
And with our initial set up in place, why don't we start working on functionality and I can tell you

3
00:00:08,070 --> 00:00:14,640
right away that for the following videos, the structure pretty much is going to be the same.

4
00:00:15,000 --> 00:00:17,210
We're first in the context.

5
00:00:17,220 --> 00:00:25,530
I'm going to set up my function and dispatch some kind of action that will pass that function down to

6
00:00:25,530 --> 00:00:26,280
the provider.

7
00:00:26,670 --> 00:00:31,900
And then, of course, we'll look for the component that is looking for that functionality, whether

8
00:00:31,900 --> 00:00:37,130
that is to remove all the items or just a single item or increase or decrease or whatever.

9
00:00:37,530 --> 00:00:41,510
And then, of course, we will deal with that in the register.

10
00:00:41,700 --> 00:00:46,020
So steps will be the same because the functionality will change.

11
00:00:46,290 --> 00:00:52,010
And I'll start with the easiest one, and that one is to remove all the items from the clock.

12
00:00:52,380 --> 00:00:53,950
So we have the clear cut button.

13
00:00:53,980 --> 00:00:56,090
Of course, it is looking for that function.

14
00:00:56,340 --> 00:00:57,540
So I'm going to go with const.

15
00:00:57,540 --> 00:01:04,910
I will name this, I don't know, clear cut and also clear, clear cut.

16
00:01:05,160 --> 00:01:10,740
Now the function won't be looking for any arguments and will simply would want to dispatch.

17
00:01:11,070 --> 00:01:12,230
So say this patch.

18
00:01:12,240 --> 00:01:15,720
Remember we needed to pass and the object of course.

19
00:01:15,960 --> 00:01:22,130
And then as far as the type again common convention is typing this all in uppercase.

20
00:01:22,350 --> 00:01:25,590
So just say clear on the score and then.

21
00:01:26,310 --> 00:01:30,120
So that is the action that we're dispatching.

22
00:01:30,330 --> 00:01:37,050
Like I said, then I would want to pass it down to my provider so the whole app can access that function.

23
00:01:37,380 --> 00:01:40,830
And which component is looking for this functionality?

24
00:01:41,130 --> 00:01:43,290
Although I want is the card container.

25
00:01:43,950 --> 00:01:46,380
Now, at the moment we have carte and then total.

26
00:01:46,890 --> 00:01:53,870
So we also the structure, clear card function and then there it is.

27
00:01:53,880 --> 00:02:00,900
Now we have our button and then instead of setting up the in line, I can simply delete because I'm

28
00:02:00,900 --> 00:02:03,150
not going to be passing any kind of arguments.

29
00:02:03,420 --> 00:02:11,730
So we go with Claire and Card and the last thing, like I said, is to make sure that we handle that

30
00:02:11,940 --> 00:02:18,210
and register now before we set up the functionality, I just want to mention something that I didn't

31
00:02:18,210 --> 00:02:21,500
cover in tutorial when we talked about reducer.

32
00:02:21,810 --> 00:02:26,460
Some people prefer using the switch statement here instead.

33
00:02:26,940 --> 00:02:30,780
So in my case, I prefer setting up a bunch of statements.

34
00:02:31,030 --> 00:02:32,250
That is just my preference.

35
00:02:32,510 --> 00:02:35,420
There's some people who prefer using a switch statement.

36
00:02:35,760 --> 00:02:38,520
So if you're one of those people, feel free to do that.

37
00:02:38,700 --> 00:02:43,950
In my case, I'm still going to use a bunch of if statements just because I prefer that better.

38
00:02:44,400 --> 00:02:46,260
And we're going to start with the first one.

39
00:02:46,440 --> 00:02:48,930
So I have my condition.

40
00:02:49,290 --> 00:02:56,370
And what I'm looking for, of course, is if and then I'm going to say, well, what is the type?

41
00:02:56,700 --> 00:02:57,120
Correct.

42
00:02:57,430 --> 00:03:00,720
And in my case, the type that I'm looking for is clear cut.

43
00:03:00,990 --> 00:03:04,620
So go with if and then action and then type.

44
00:03:05,010 --> 00:03:09,560
And if that is equal, he'll clear cut what I would want to do.

45
00:03:10,110 --> 00:03:11,450
Well, let's think about it.

46
00:03:11,760 --> 00:03:14,820
We have our state now in the state.

47
00:03:15,120 --> 00:03:16,350
I have multiple values.

48
00:03:16,770 --> 00:03:21,540
Not only I have the card, I also have loading, I have total and then the amount.

49
00:03:21,930 --> 00:03:28,860
And we already know that once we return something from the producer, that will be our new state.

50
00:03:29,310 --> 00:03:32,610
So we need to be careful where I have other values as well.

51
00:03:33,300 --> 00:03:34,320
So I'm going to go return.

52
00:03:34,320 --> 00:03:35,430
I'm returning the object.

53
00:03:35,670 --> 00:03:37,650
So that is going to be my new state.

54
00:03:37,890 --> 00:03:42,320
And then I go with that and I spread out the old state values.

55
00:03:42,570 --> 00:03:44,860
And then the only one that I would want to change is what?

56
00:03:45,480 --> 00:03:46,290
Well, that is the card.

57
00:03:46,440 --> 00:03:50,460
Correct, because I would want to clear all the items from the card and how we can do that.

58
00:03:50,460 --> 00:03:57,950
Well, if it is in our area right now and simply say, you know, change the value of the property to

59
00:03:57,960 --> 00:04:00,930
a empty array, that's all we have to do.

60
00:04:01,200 --> 00:04:07,470
Now, of course, once we click, there is now clear out all the items from the card like so.

61
00:04:07,710 --> 00:04:14,520
And then since we're handling that in the card container where we have the condition where we say if

62
00:04:14,520 --> 00:04:19,080
the card like the zero, then of course we can see your bag is currently empty.

63
00:04:19,350 --> 00:04:26,670
Now, if you want to see that in the components as far as the react developer tools, you can go to

64
00:04:26,670 --> 00:04:27,240
components.

65
00:04:27,510 --> 00:04:30,900
There is our provider and there is our juicer.

66
00:04:31,110 --> 00:04:34,410
We have the amount, we have the card, we have the loading and total.

67
00:04:34,770 --> 00:04:39,930
And since we nicely spread out the old values, we don't remove them from the state.

68
00:04:40,170 --> 00:04:48,890
We just simply turn the array from three items down to an empty array, meaning zero items in our array.