1
00:00:00,330 --> 00:00:06,990
All right, and I think we can the last piece of functionality to our cart, and that is counting the

2
00:00:06,990 --> 00:00:10,310
totals and again will set up a use effect.

3
00:00:10,710 --> 00:00:16,980
So every time the state value will change course, we will invoke that function.

4
00:00:17,160 --> 00:00:21,960
More precisely, we will dispatch an auction to count totals.

5
00:00:22,200 --> 00:00:28,620
And we already have the use of a correct, because if we take a look at the card context, we were setting

6
00:00:28,620 --> 00:00:33,300
up our card every time the card changed in local storage.

7
00:00:33,900 --> 00:00:38,100
So we just need to piggyback this dispatch here as well.

8
00:00:38,490 --> 00:00:47,760
Now, before I set this up, I also want to add the amount so the state value to my card buttons, because

9
00:00:47,760 --> 00:00:55,740
if you remember the moment, we have only the functionality to toggle the sidebar and we're actually

10
00:00:55,740 --> 00:00:56,850
hard coding this value.

11
00:00:57,300 --> 00:01:03,630
But even though at the moment it is zero, I know that there is really no functionality or of course,

12
00:01:03,630 --> 00:01:05,310
this value will change.

13
00:01:05,580 --> 00:01:07,650
So we might as well just grab it over here.

14
00:01:08,040 --> 00:01:14,450
And the name is total and then underscore items not as equal to my use card contacts.

15
00:01:14,790 --> 00:01:16,020
We just need to invoke it.

16
00:01:16,300 --> 00:01:20,470
And if everything is correct the moment, it should be zero.

17
00:01:20,800 --> 00:01:28,050
So say here, total underscore and items and I can see it on the big screen and on the small screen.

18
00:01:28,050 --> 00:01:29,370
I just need to open up the sidebar.

19
00:01:29,580 --> 00:01:30,250
Allerdyce.

20
00:01:30,280 --> 00:01:33,150
Now of course I have to zero then like I said.

21
00:01:34,210 --> 00:01:41,650
In the current context, I would want to piggyback here in the U.S. fact where I have my local storage

22
00:01:41,920 --> 00:01:44,200
and before or after doesn't really matter.

23
00:01:44,530 --> 00:01:51,960
I'm just going to set up my dispatch and I'll dispatch an auction by the name of Count Car Total.

24
00:01:51,980 --> 00:01:58,750
So every time I change something in the cart, it's going to be displayed in multiple places again.

25
00:01:58,770 --> 00:02:04,300
The type was count part two, whatever I want one.

26
00:02:04,330 --> 00:02:10,630
Yes, there's going to be a big fat error because of course, we invoke it right away when the component

27
00:02:10,630 --> 00:02:14,440
mounts and we're not handling that in the producer.

28
00:02:14,740 --> 00:02:21,680
So now, of course, we just need to go back to the cart producer and handle that action as well.

29
00:02:22,120 --> 00:02:29,410
So in the cartridges or keep on scrolling right here, we're going to go with F and then action not

30
00:02:29,410 --> 00:02:32,890
type is equal to count cart totals.

31
00:02:33,250 --> 00:02:41,470
Then of course I would want to reduce over my car and the way we'll do that again, similarly, like

32
00:02:41,470 --> 00:02:46,870
we did in that previous years, reduce a project which is going to iterate over.

33
00:02:46,870 --> 00:02:47,370
All right.

34
00:02:47,380 --> 00:02:50,080
In this case, we will do that using a reduced.

35
00:02:51,070 --> 00:02:57,220
And then we'll just count for every item, what is the price and what is the amount of items we have

36
00:02:57,490 --> 00:02:58,400
in the cart?

37
00:02:58,930 --> 00:03:00,770
So let's go here with comments.

38
00:03:00,790 --> 00:03:04,480
I know that I'm going to be returning a object from my readers.

39
00:03:04,840 --> 00:03:12,670
So right away, the structure it so say here state and then court and reduce.

40
00:03:12,670 --> 00:03:18,670
Now in the reduce we pass in the competition and in the combat function, we have two programs.

41
00:03:19,060 --> 00:03:26,980
We have total or you can name whatever you like my name and the store that represents whatever we are

42
00:03:26,980 --> 00:03:28,640
returning from lenders.

43
00:03:29,080 --> 00:03:30,820
And also we have them.

44
00:03:31,060 --> 00:03:34,930
As a side note, I do have JavaScript Nuggets video on this.

45
00:03:34,960 --> 00:03:42,670
So if you're lost at some point, just go to the JavaScript Nugget series and I explain that in greater

46
00:03:42,670 --> 00:03:43,510
detail over there.

47
00:03:43,780 --> 00:03:46,450
As far as the return, I would want to return a object.

48
00:03:46,690 --> 00:03:49,090
And in that object there's going to be two properties.

49
00:03:49,090 --> 00:03:55,930
Not all named them exactly like I have in context, because I don't want to keep on using both of them

50
00:03:55,930 --> 00:04:03,100
since I can just use my S6 thing where if the name is exactly the same, then I can just keep on using

51
00:04:03,100 --> 00:04:03,910
the same name.

52
00:04:04,210 --> 00:04:08,190
So say total, and then items by default is going to be zero.

53
00:04:08,200 --> 00:04:15,610
Don't worry, functionality is coming up and the same goes for total, total and underscore amount,

54
00:04:15,610 --> 00:04:17,630
which also by default will be zero.

55
00:04:18,010 --> 00:04:22,210
So once I know that I'm returning object with these two hours, I can.

56
00:04:22,270 --> 00:04:24,160
The structure here is well, correct.

57
00:04:24,430 --> 00:04:30,550
I can say total and underscore items and then total underscore among mean.

58
00:04:31,090 --> 00:04:33,100
Even though we haven't set up the functionality yet.

59
00:04:33,280 --> 00:04:41,230
I know that I'll return my state that not and then state and then I would want to change to the total

60
00:04:41,230 --> 00:04:42,820
items and total amount.

61
00:04:42,820 --> 00:04:50,590
And since names match exactly to whatever I have already, I just simply can write a total total on

62
00:04:50,590 --> 00:04:56,550
the score items and then total underscore mount like.

63
00:04:56,570 --> 00:04:59,400
So now we just need to set up the functionality.

64
00:04:59,710 --> 00:05:04,990
Now one Gotcher with the producer, we always, always, always, always need to return our total.

65
00:05:05,230 --> 00:05:08,140
So let's start with that one, because it's easy to make that mistake.

66
00:05:08,440 --> 00:05:11,440
And then of course our functionality will break.

67
00:05:11,920 --> 00:05:16,750
And please keep in mind that in each direction I'm accessing the card item.

68
00:05:17,570 --> 00:05:22,600
Now, what kind of properties I have in the card item, I have the amount and the price.

69
00:05:22,600 --> 00:05:23,020
Correct.

70
00:05:23,290 --> 00:05:30,550
So I can adjust the structure that and say price and amount is coming from my car item.

71
00:05:30,970 --> 00:05:36,550
And then as far as the items, the total items in the cart, what do I need to do?

72
00:05:36,880 --> 00:05:38,560
Well, I have the object.

73
00:05:39,100 --> 00:05:40,690
Object has a value of no.

74
00:05:40,930 --> 00:05:48,360
So in each iteration, I just want to grab the amount value and added to that total items.

75
00:05:48,610 --> 00:05:55,870
So we simply say with total, that's my object property name is total items and plus equals.

76
00:05:56,380 --> 00:06:00,460
Since I wouldn't want to override that value, I would just want to add to that value.

77
00:06:00,730 --> 00:06:10,600
I just add my amount and then when it comes to the total amount, so that is going to be the price multiplied

78
00:06:10,600 --> 00:06:11,150
by amount.

79
00:06:11,470 --> 00:06:18,170
Again, the same exact setup where we go with total and the total amount.

80
00:06:18,310 --> 00:06:21,340
So that's going to be the total money amount.

81
00:06:21,940 --> 00:06:24,400
And in this case, Housei plus equals.

82
00:06:24,610 --> 00:06:30,730
And I just need to multiply price by the amount since of course, in order to get my total, I need

83
00:06:30,730 --> 00:06:38,470
to know how many items of this particular product I have multiplied by the product price and that will

84
00:06:38,470 --> 00:06:46,840
be added to my total amount and once we save, since we already are setting up everything in local storage

85
00:06:46,840 --> 00:06:47,280
as well.

86
00:06:48,130 --> 00:06:54,940
That's why I'm getting my items and I can make my calculation where I have right away for and try.

87
00:06:55,420 --> 00:06:59,180
And, you know, in this case, it's going to be easier if we go to the big screen, check it out.

88
00:06:59,200 --> 00:07:05,590
So this is going to be the subtotal for those items, of course, and I can have the total subtotal

89
00:07:05,590 --> 00:07:06,340
as well.

90
00:07:06,640 --> 00:07:10,650
And then I just had a shipping fee and this is going to be my card total.

91
00:07:10,900 --> 00:07:18,220
And as I'm changing my values, notice every time we are invoking, of course, the use of it.

92
00:07:18,550 --> 00:07:21,090
And that's why we can count our totals.

93
00:07:21,370 --> 00:07:29,470
I notice here in the cart, I also can see that how many items I have that should do it for the card.

94
00:07:29,830 --> 00:07:34,360
And I think now I can start working on the user.