1 00:00:00,150 --> 00:00:06,870 Excellent work on the next hour, I want to set up the functionality where every time we increase or 2 00:00:06,870 --> 00:00:14,190 decrease or we remove the item from the cart or clear the cart, we update the values as well as far 3 00:00:14,190 --> 00:00:16,910 as the amount and the total. 4 00:00:17,280 --> 00:00:24,480 And before we set up the functionality, let me just quickly mention that we will use reduced function. 5 00:00:24,810 --> 00:00:31,470 And if you're not familiar with the reduced again, go back to Joske Nugget's playlist that I have where 6 00:00:31,470 --> 00:00:33,900 we have introduction for the reduced basics. 7 00:00:34,170 --> 00:00:41,220 And I'm also planning adding a nugget's video where I cover the functionality that we're going to cover 8 00:00:41,370 --> 00:00:43,660 in this video in greater detail. 9 00:00:43,980 --> 00:00:51,390 So if you get stuck with Rogers, just go to Joske Nuggets playlist and you'll be able to find multiple 10 00:00:51,540 --> 00:00:52,170 videos. 11 00:00:52,170 --> 00:00:54,270 And this one is going to be the basic one. 12 00:00:54,450 --> 00:00:59,760 And then there's also going to be some videos that cover more advanced topics. 13 00:00:59,760 --> 00:01:03,990 And then one of them will be the functionality that we're about to do. 14 00:01:04,400 --> 00:01:08,460 That is just a side note, which we need to navigate back to our project. 15 00:01:08,820 --> 00:01:11,750 And then first, let's set up the function. 16 00:01:12,060 --> 00:01:19,020 Now, in this case, though, I really don't need to even set it up as a separate function in the context. 17 00:01:19,380 --> 00:01:28,710 Instead, what I would want is to set up a user where every time the value in my state, more specifically 18 00:01:28,860 --> 00:01:32,810 in the cart, in my state changes than I would want to call that effect. 19 00:01:33,180 --> 00:01:34,110 So let's start with that. 20 00:01:34,110 --> 00:01:37,630 We have used the fact we have a callback function when we have dependency. 21 00:01:37,650 --> 00:01:38,000 Right. 22 00:01:38,190 --> 00:01:45,000 And then in here, I'll pass in state and then I just start very simply by logging. 23 00:01:46,620 --> 00:01:54,300 Now, once I save, every time we do something with our cart, we should have the Halloween console. 24 00:01:54,690 --> 00:01:56,310 So there is an increasing amount. 25 00:01:56,310 --> 00:01:58,050 Of course, it changes a decrease. 26 00:01:58,320 --> 00:02:01,130 I remove the item and also clear cut. 27 00:02:01,500 --> 00:02:06,720 So every time something happens with the card, of course we run our usufruct. 28 00:02:07,080 --> 00:02:15,300 So what I'm looking for here is despatching and action and I'll call this action get totals again. 29 00:02:15,300 --> 00:02:17,310 We don't really need to set up a separate function. 30 00:02:17,610 --> 00:02:19,830 So we go with type on line. 31 00:02:19,830 --> 00:02:21,000 We'll look for get. 32 00:02:22,150 --> 00:02:29,830 Underscore totals we save, OK, beautiful, now we have our effect and of course, we would need to 33 00:02:29,830 --> 00:02:33,300 navigate to the producer and deal with that action. 34 00:02:33,700 --> 00:02:40,570 So again, of course I'll set up my if so, right after decrease, I'm going to go with if I'm behind, 35 00:02:40,570 --> 00:02:41,710 we're going to go with action. 36 00:02:41,890 --> 00:02:47,020 That type is equal to get on the score totals. 37 00:02:47,400 --> 00:02:49,000 Then of course we would want to do something. 38 00:02:49,360 --> 00:02:53,970 And yes, we will start by setting up separate variables. 39 00:02:54,250 --> 00:02:57,490 However, it is going to be a bit different since we have two of them. 40 00:02:57,850 --> 00:03:00,710 We have total and then we have the amount. 41 00:03:01,090 --> 00:03:01,780 So for now. 42 00:03:02,680 --> 00:03:07,780 I want to return, of course, I'm going to go with DataDot and the state, since I wouldn't want to 43 00:03:07,780 --> 00:03:14,140 mess with other values, but I would want to change the values for the total property as well as the 44 00:03:14,360 --> 00:03:14,780 property. 45 00:03:15,130 --> 00:03:16,010 Keep that in mind. 46 00:03:16,510 --> 00:03:22,990 Those are the same properties that at the moment I have hardcoded and then I will be setting up the 47 00:03:22,990 --> 00:03:23,440 orders. 48 00:03:23,830 --> 00:03:26,320 Now, I won't set up just symbologist. 49 00:03:26,320 --> 00:03:30,400 I will set up a produce that returns a object. 50 00:03:31,030 --> 00:03:36,390 So it returns an object with these two values, and that's why I'll be able to structure it right away. 51 00:03:36,640 --> 00:03:38,700 So I'm going to go online. 52 00:03:39,160 --> 00:03:46,390 I will set up the names exactly the same, so say total and then amount, and that one is equal to state. 53 00:03:46,720 --> 00:03:53,320 So my current state, then the correct array online would go with radius and then of course we pass 54 00:03:53,320 --> 00:03:55,560 in the Kobuk auction as well as well. 55 00:03:55,560 --> 00:03:58,270 What is the value that we are returning? 56 00:03:58,630 --> 00:04:00,310 So that is my callback function. 57 00:04:00,520 --> 00:04:03,220 Then we have a comma and then what am I returning? 58 00:04:03,580 --> 00:04:06,160 Well, I would want to return an object. 59 00:04:07,020 --> 00:04:13,080 That's why I go with object and then to properties total, and I won't be equal to zero, and then of 60 00:04:13,080 --> 00:04:15,320 course I'm also looking for the amount. 61 00:04:15,720 --> 00:04:20,340 So as I'm looking at it, of course, it doesn't change much from what I have right now. 62 00:04:20,650 --> 00:04:24,800 I have total an amount zero and in register pretty much the same thing. 63 00:04:25,080 --> 00:04:28,410 I have my register function, it has the callback function. 64 00:04:28,680 --> 00:04:34,980 I'm returning a object with two properties, total amount, and I write away the structure and then 65 00:04:34,980 --> 00:04:36,960 I return the state. 66 00:04:37,140 --> 00:04:41,990 So a copy of the values and I'll be overwriting total animal. 67 00:04:42,120 --> 00:04:45,630 So of course that one will be equal to the property. 68 00:04:45,630 --> 00:04:47,900 That's three as well as here. 69 00:04:48,210 --> 00:04:49,640 OK, hopefully that is clear. 70 00:04:49,650 --> 00:04:55,800 Of course we have the error because we haven't set up our two arguments and those two arguments are 71 00:04:56,040 --> 00:04:57,420 court total. 72 00:04:57,660 --> 00:05:01,950 And then the second argument, I'm going to call cart and then item. 73 00:05:02,220 --> 00:05:09,420 So cart item represents each and every item that we're carrying over and cart total is what we returning. 74 00:05:10,260 --> 00:05:15,740 Of course, in this case that as an object with these two properties and then inside my function body, 75 00:05:15,780 --> 00:05:19,660 I would want to start by getting two values out of the current item. 76 00:05:19,980 --> 00:05:21,570 Now, what values am I looking for? 77 00:05:21,990 --> 00:05:23,550 I am looking for. 78 00:05:24,090 --> 00:05:25,890 Let me just double check with the data. 79 00:05:26,310 --> 00:05:29,340 I'm looking for price and I'm looking for amount. 80 00:05:29,850 --> 00:05:30,220 Why? 81 00:05:30,300 --> 00:05:37,260 Well, because when I'm setting up the amount and of course I'll just be looking for the amount property 82 00:05:37,260 --> 00:05:37,610 value. 83 00:05:37,920 --> 00:05:41,090 But then when I'm looking for a total, I would want to multiply that. 84 00:05:41,580 --> 00:05:48,210 So since I have multiple items and then they have different amounts, I would need to multiply that 85 00:05:48,210 --> 00:05:49,310 by the price. 86 00:05:49,710 --> 00:05:55,470 So let me navigate back to my producer and then I'm looking for these two properties. 87 00:05:55,920 --> 00:05:57,420 Each and every item has them. 88 00:05:57,690 --> 00:06:05,340 I'm looking for price and none of the amount I want is coming from my cart and an item. 89 00:06:05,350 --> 00:06:06,840 Let me close the sidebar here. 90 00:06:07,260 --> 00:06:12,420 And then as far as return, let's just start simply by returning court total. 91 00:06:12,780 --> 00:06:13,980 So let's go to ten. 92 00:06:14,840 --> 00:06:21,380 And then Kartal and now once we save, we shouldn't get errors now if you want, you can definitely 93 00:06:21,390 --> 00:06:26,330 control these properties if that helps, you know the price and that amount. 94 00:06:26,720 --> 00:06:29,900 And you'll see that of course we have the price. 95 00:06:30,160 --> 00:06:33,560 So five hundred ninety nine online the amount is one. 96 00:06:33,890 --> 00:06:39,110 I notice how for each item we have a different price, but the amount stays the same. 97 00:06:39,680 --> 00:06:41,690 So what is the first thing that I would want. 98 00:06:42,050 --> 00:06:51,440 Well, I would want to first get the amount of items that I have total in the car, so I have my total 99 00:06:51,440 --> 00:06:51,800 amount. 100 00:06:52,130 --> 00:06:55,560 So this is the amount for all the items in the car. 101 00:06:55,880 --> 00:07:01,100 So this is the sum of all the amount property values in my items. 102 00:07:01,490 --> 00:07:06,980 So each item has the amount property and of course it is some kind of value. 103 00:07:07,430 --> 00:07:13,670 So now, of course, out of return, the total of all those properties and the way we do that. 104 00:07:14,510 --> 00:07:20,100 We simply say, you know what total is an object on an object, we have the amount property and that 105 00:07:20,150 --> 00:07:28,250 every time I'm iterating over, I would just want to add the amount now also say plus equals and then 106 00:07:28,310 --> 00:07:28,750 the amount. 107 00:07:29,000 --> 00:07:35,170 And what that simply means is whatever is the value, just add the amount property value. 108 00:07:35,480 --> 00:07:41,090 And now you'll notice that the amount will also change nerdish. 109 00:07:41,180 --> 00:07:43,220 Now, of course, it is three, right? 110 00:07:43,330 --> 00:07:43,790 Why? 111 00:07:44,180 --> 00:07:45,980 Well, because we write. 112 00:07:46,020 --> 00:07:48,350 We run the usufruct. 113 00:07:48,470 --> 00:07:48,890 Correct. 114 00:07:49,340 --> 00:07:53,270 And then it is counting how many items we have in a car. 115 00:07:53,420 --> 00:07:58,060 And then more specifically, for every item we have that amount property. 116 00:07:58,370 --> 00:08:02,900 So as I'm increasing notice how the amount is also increasing. 117 00:08:03,260 --> 00:08:11,100 Remember, no, right away the structure, the amount property coming from the state. 118 00:08:11,540 --> 00:08:13,120 So there's two amount properties. 119 00:08:13,370 --> 00:08:20,990 So there's one that is specific for every item and then there's one in the state that just sums up all 120 00:08:20,990 --> 00:08:21,540 these factors. 121 00:08:21,980 --> 00:08:28,490 So that was amount that was a bit more straightforward because we simply needed to add the value that 122 00:08:28,490 --> 00:08:31,580 is coming from each item and we sum them up. 123 00:08:31,880 --> 00:08:34,170 And as far as the total. 124 00:08:34,550 --> 00:08:37,310 So how much is the total of the cost? 125 00:08:37,580 --> 00:08:44,330 Of course, in this case, we need to set up a separate variable because I would want to multiply the 126 00:08:44,330 --> 00:08:45,460 amount by price. 127 00:08:45,770 --> 00:08:53,690 So how many pieces of that item I have in the cart and then multiply by the price of each piece? 128 00:08:54,140 --> 00:09:02,360 So we're going to go here with CONSED and that item total amount is equal to a price multiplied by the 129 00:09:02,360 --> 00:09:02,800 amount. 130 00:09:03,050 --> 00:09:10,040 And of course now I would want to add this total to the cart, total total property. 131 00:09:10,400 --> 00:09:15,160 So the same how we worked with the amount I'll do with a total. 132 00:09:15,620 --> 00:09:24,740 So let's go to the next line and I'll say kaat total total property plus equals plus equals. 133 00:09:25,010 --> 00:09:28,340 And then of course we're adding this item total value. 134 00:09:28,790 --> 00:09:35,380 So now one Gotcher is going to be that once in a while we might get some weird buyers. 135 00:09:35,680 --> 00:09:37,640 So as you can see, everything works nicely. 136 00:09:37,820 --> 00:09:38,870 So we can increase. 137 00:09:38,900 --> 00:09:41,450 We can decrease, but not once in a while. 138 00:09:41,450 --> 00:09:45,290 We get these weird values and essentially avoid that. 139 00:09:45,500 --> 00:09:51,800 We would just need to make sure that we have only a set amount of numbers after the dot. 140 00:09:52,100 --> 00:09:54,230 And in order to do that, I'll change this around. 141 00:09:55,160 --> 00:10:01,700 Also, let me show now, of course, I'm still getting these two properties, but I would want to do 142 00:10:01,700 --> 00:10:03,500 a little bit more work on total. 143 00:10:03,900 --> 00:10:09,490 So I'm going to say here, total is equal to a partial float like so. 144 00:10:09,740 --> 00:10:13,140 And I would want to say total and then two fixed. 145 00:10:13,430 --> 00:10:20,810 So this is going to limit the amount of numbers after that, but it does return a string. 146 00:10:21,120 --> 00:10:24,360 So I just need to pass it through the parcel. 147 00:10:24,680 --> 00:10:32,150 And now you'll notice that still functionality works, but you won't get these weird marks again, iterating 148 00:10:32,150 --> 00:10:32,910 over the array. 149 00:10:33,230 --> 00:10:35,390 We have the car total and then car item. 150 00:10:35,690 --> 00:10:41,640 As far as the car total, we return an object where we have two properties total on the amount. 151 00:10:42,080 --> 00:10:48,990 So of course that is the total of my card and the amount of items I have in the car. 152 00:10:49,460 --> 00:10:54,980 However, as we iterating, each item also has the amount and price property. 153 00:10:55,310 --> 00:10:58,490 And then as far as the amount, I just sum up these values. 154 00:10:58,790 --> 00:11:01,420 What gives me that total amount? 155 00:11:01,730 --> 00:11:03,320 And then as far as total? 156 00:11:03,590 --> 00:11:07,830 Well, since I would want to count the pieces times the price. 157 00:11:08,180 --> 00:11:10,030 So of course that is going to give me the total. 158 00:11:10,340 --> 00:11:14,170 That's why I set up the variable as a price times the amount. 159 00:11:14,360 --> 00:11:18,950 So amount of items in the cost of that specific item multiplied by price. 160 00:11:19,160 --> 00:11:24,160 And then just add to the total that is coming from the state. 161 00:11:24,590 --> 00:11:29,920 Hopefully it is clear and of course we can nicely increase, decrease and more. 162 00:11:29,930 --> 00:11:35,720 And every time we do something with the cart, of course we call our user factor in the user we call 163 00:11:35,750 --> 00:11:36,960 get totals. 164 00:11:36,980 --> 00:11:42,250 So we dispatch the type of gutturals and we take care of that in the user.