1
00:00:00,330 --> 00:00:05,940
And as far as the functionality, I think I'm going to start by setting up, removing them and then

2
00:00:05,940 --> 00:00:13,740
clearing the cart because I'm just going to be faster than the Torgau as well as counting the totals.

3
00:00:14,160 --> 00:00:18,060
And I'll start by closing all the open files.

4
00:00:18,480 --> 00:00:21,210
And we're looking for a court context, of course.

5
00:00:21,600 --> 00:00:26,730
And here I have the placeholders, but I would want to set up my dispatches.

6
00:00:27,060 --> 00:00:33,480
So Remove Item was looking for the idea which we passed then and then clear court is just going to dispatch

7
00:00:33,660 --> 00:00:37,460
the action by itself without any kind of parameters.

8
00:00:37,830 --> 00:00:40,200
And of course, the same is going to be in removing them.

9
00:00:40,200 --> 00:00:43,440
But we'll have to pass in as a payload our ID.

10
00:00:43,800 --> 00:00:47,220
So we're looking for two actions that remove card item and then clear the card.

11
00:00:47,550 --> 00:00:51,680
So we dispatch again, both of the actions are coming from the actions.

12
00:00:51,690 --> 00:00:54,330
Jarius, I'm not going to do the whole spiel.

13
00:00:54,660 --> 00:00:56,480
You already know what is happening.

14
00:00:56,490 --> 00:00:57,780
So remove card item.

15
00:00:58,020 --> 00:01:04,680
And then as far as the payload, I'm just setting up the idee and then in the clear cart, I'll do the

16
00:01:04,680 --> 00:01:05,340
same thing.

17
00:01:05,340 --> 00:01:08,670
Also this patch and then we pass in type.

18
00:01:08,970 --> 00:01:12,500
And of course, the type is not clear filters, so.

19
00:01:13,480 --> 00:01:21,830
Type is clear and then on the score card, so those are the actions that are coming from my actions.

20
00:01:23,380 --> 00:01:30,030
So we save it and our next step, of course, is setting up our card reducer.

21
00:01:30,400 --> 00:01:35,790
So make sure that we handle all those actions over there as well.

22
00:01:36,370 --> 00:01:39,600
And it is simpler than you think.

23
00:01:40,000 --> 00:01:42,560
So we navigate to a card reducer.

24
00:01:42,820 --> 00:01:50,470
I have my first section of the card and I just keep on scrolling and once I'm done with this one, so

25
00:01:50,470 --> 00:01:52,300
make sure that you don't place it inside.

26
00:01:52,630 --> 00:01:55,480
It's kind of easy here because we have so many curly braces.

27
00:01:55,880 --> 00:01:58,510
Now, of course, I would want to check for a remove item.

28
00:01:58,870 --> 00:02:07,120
We're going to go with action type and if it is equal to remove card item, then I would want to filter

29
00:02:07,210 --> 00:02:07,900
my card.

30
00:02:08,170 --> 00:02:14,860
And if the ID doesn't match to whatever I'm passing in, then of course I will leave that item in the

31
00:02:14,860 --> 00:02:19,380
card if it does match and our remove it from my card.

32
00:02:19,660 --> 00:02:27,310
So set up temporary card, so time card array and then we just filter our state card and then we of

33
00:02:27,310 --> 00:02:32,290
course are on filter and every item I'll name it as an item.

34
00:02:33,070 --> 00:02:40,510
And also if the item ID, if the card ID doesn't match to whatever I'm passing in then I will return

35
00:02:40,510 --> 00:02:40,610
it.

36
00:02:40,900 --> 00:02:41,350
Why?

37
00:02:41,560 --> 00:02:45,310
Well, because I know that that is not the item that I clicked on.

38
00:02:45,610 --> 00:02:51,970
So say, if it doesn't match the action, that payload, since that's where the idea is, then I'm going

39
00:02:51,970 --> 00:02:52,470
to return.

40
00:02:52,750 --> 00:02:58,500
And as far as the return from the function is going to say that that state so I want to get all my state

41
00:02:58,510 --> 00:03:02,650
properties and then card will be equal to my trump card.

42
00:03:03,020 --> 00:03:09,160
So so I save and now we're sure should have the functionality where once we click, check it out.

43
00:03:09,430 --> 00:03:14,470
Now of course we can remove the items and once I remove the second one, there it is.

44
00:03:14,470 --> 00:03:15,960
Now we have your card is empty.

45
00:03:16,180 --> 00:03:16,630
Why?

46
00:03:16,960 --> 00:03:18,970
Because in the card page we handle that.

47
00:03:19,150 --> 00:03:22,390
We say if the card is empty, then this is what we are turning.

48
00:03:22,690 --> 00:03:31,900
And we should also be able to see once we refresh in the local storage that our cart powers are empty

49
00:03:31,900 --> 00:03:35,140
here as well, because remember, we run that dispatch.

50
00:03:35,230 --> 00:03:35,670
Correct.

51
00:03:35,920 --> 00:03:37,720
So let's try it out one more time.

52
00:03:38,660 --> 00:03:39,860
I'm going to go with the shelf.

53
00:03:40,520 --> 00:03:43,300
It has this green color that's my default value.

54
00:03:43,490 --> 00:03:50,630
And now, of course, I can see that item in the page in the local storage, but I still have this option

55
00:03:50,630 --> 00:03:53,060
of clearing my item from the card.

56
00:03:53,420 --> 00:04:02,040
And the clear card is even easier because the only thing we need to do is just return card as a empty.

57
00:04:02,090 --> 00:04:02,490
All right.

58
00:04:02,750 --> 00:04:13,970
So if action and that type is equal to clear court action, then we just return now to that state and

59
00:04:13,970 --> 00:04:16,050
then court will be are empty.

60
00:04:16,080 --> 00:04:16,420
All right.

61
00:04:16,820 --> 00:04:18,050
We save it now.

62
00:04:18,080 --> 00:04:18,940
Of course we refresh.

63
00:04:19,700 --> 00:04:21,920
Now we can see our court item.

64
00:04:22,250 --> 00:04:24,380
And I'm just going to add one more item.

65
00:04:24,860 --> 00:04:26,520
So let's click on continue shopping.

66
00:04:26,540 --> 00:04:30,500
Double check if this works and we navigate here.

67
00:04:31,550 --> 00:04:36,430
We're going to add a few more items to the cart, and now if I want to clear and just clear the shopping

68
00:04:36,440 --> 00:04:45,020
part and again, we have your card is empty because we handled that in the card page as we're done setting

69
00:04:45,020 --> 00:04:46,130
up these two functionalities.

70
00:04:46,470 --> 00:04:48,830
Now let's tackle the toggled card.