1 00:00:00,790 --> 00:00:08,050 With our cart item complete we can switch back to cart context Jesus as we would want to set up all 2 00:00:08,050 --> 00:00:15,430 our functionality and as a side note if you have different products as your local cart and if you don't 3 00:00:15,430 --> 00:00:20,830 like that even though it's not going to affect your functionality but if let's say you don't like that 4 00:00:20,830 --> 00:00:27,650 you can head over to my github then look for Star Project react store or version 2. 5 00:00:27,910 --> 00:00:32,940 Then you're going to look for the source as well as utilize. 6 00:00:33,200 --> 00:00:39,520 And then you can look for the local card and these are gonna be the correct items meaning correct items 7 00:00:39,560 --> 00:00:44,310 being computers because previously I just had some different random products. 8 00:00:44,350 --> 00:00:49,060 So as you don't like those random products just head over there and swap them out. 9 00:00:49,070 --> 00:00:53,700 Right now I'm going to leave the local card because there's some items that I would like to show there 10 00:00:54,100 --> 00:00:59,860 but we're going to switch gears and we're going to start working within the cart drag jirgas on first. 11 00:00:59,860 --> 00:01:04,600 I'm just gonna set up some place holders for the functions that we're going to have and we're going 12 00:01:04,600 --> 00:01:07,680 to pass them in our value object. 13 00:01:07,950 --> 00:01:12,880 OK we're not going to access them anywhere but I would just like to set up the place holders just to 14 00:01:12,880 --> 00:01:17,630 show you why would want to use total and cart item. 15 00:01:17,770 --> 00:01:21,010 Why would want to calculate them using used effect. 16 00:01:21,240 --> 00:01:21,540 OK. 17 00:01:21,940 --> 00:01:24,530 So let's start by setting up our placeholders again. 18 00:01:24,550 --> 00:01:26,450 There's going to be no functionality in them. 19 00:01:26,500 --> 00:01:32,470 We're just going to have the comment of let's say remove item and then as far as setting up the function 20 00:01:32,860 --> 00:01:34,830 which is we say remove item. 21 00:01:34,900 --> 00:01:41,110 Now this item is going to be looking for the idea parameter like so and then nothing within the function 22 00:01:41,110 --> 00:01:41,700 body. 23 00:01:41,700 --> 00:01:47,560 Now not just copy and paste it and in fact 5.0 and then the second one is going to be increase amount 24 00:01:48,460 --> 00:01:53,720 increase amount and that of course is the function name. 25 00:01:53,920 --> 00:01:54,860 So let's say right. 26 00:01:54,880 --> 00:01:58,780 Increase amount work. 27 00:01:58,820 --> 00:02:03,580 So then let's do the same for decrease. 28 00:02:03,750 --> 00:02:12,890 Also it's gonna have the I.D. So it's changed around let's say decrease decrease item and we're going 29 00:02:12,890 --> 00:02:18,570 to not item maybe maybe amount apologize and we're gonna decrease amount. 30 00:02:18,670 --> 00:02:26,600 So it's right decrease amount both of them are going to be looking for I.D. then we have add to cart 31 00:02:27,730 --> 00:02:34,540 so add to cart and then for Add to Cart we're going to pass in the product which again currently doesn't 32 00:02:34,540 --> 00:02:42,280 make sense but it does not make sense once we start working on it and we're gonna write add to cart 33 00:02:42,730 --> 00:02:47,410 is our function and last we have a clear cart clear cart. 34 00:02:47,650 --> 00:02:52,940 And then of course same for the function name clear cart. 35 00:02:53,050 --> 00:02:54,810 We're not going to passing any parameters. 36 00:02:54,810 --> 00:02:57,460 I'm gonna have empty parentheses. 37 00:02:57,610 --> 00:03:03,140 And now it's use the fact that we can pass all our functions into our value object. 38 00:03:03,280 --> 00:03:06,080 So one by one I'm going to start by removing them. 39 00:03:06,160 --> 00:03:08,630 Then we're going to have increase amount. 40 00:03:08,630 --> 00:03:10,600 Then we have decrease amount. 41 00:03:10,600 --> 00:03:14,130 Then we also have add to cart and then we have clear cut. 42 00:03:14,170 --> 00:03:18,850 And like I said we're not going to access them but I want to make sure that we have right away the place 43 00:03:18,850 --> 00:03:19,490 orders. 44 00:03:19,750 --> 00:03:23,300 And now let's focus on the total as well as car. 45 00:03:24,040 --> 00:03:27,160 So both of the values are going to be calculated from the car. 46 00:03:27,200 --> 00:03:27,830 Correct. 47 00:03:28,030 --> 00:03:31,450 You can't calculate the total from some random variable. 48 00:03:31,450 --> 00:03:32,790 You need to use your car. 49 00:03:32,920 --> 00:03:36,230 And since we have initial values we can right away calculate that. 50 00:03:36,400 --> 00:03:38,800 The same goes for card items. 51 00:03:38,800 --> 00:03:43,930 We can right away calculate how many items and I can see that I have 5 and 4 that should be 9 and then 52 00:03:43,930 --> 00:03:46,360 I have three which means twelve. 53 00:03:46,360 --> 00:03:53,110 So when we would want to calculate that while we're looking at it and your like saying okay we have 54 00:03:53,110 --> 00:03:59,800 removed item we increase item decrease and all the way to clear a card each and every time we're working 55 00:03:59,800 --> 00:04:03,380 with a card value we're going to update our cart. 56 00:04:03,520 --> 00:04:04,060 Correct. 57 00:04:04,060 --> 00:04:06,420 When we remove the item we're going to update our. 58 00:04:06,450 --> 00:04:07,180 All right. 59 00:04:07,270 --> 00:04:08,290 And you can say all right. 60 00:04:08,290 --> 00:04:13,840 So each and every time we're going to call this function then we're going to calculate total as well 61 00:04:13,840 --> 00:04:14,910 as card items. 62 00:04:15,280 --> 00:04:17,680 And you're almost correct. 63 00:04:17,780 --> 00:04:20,070 This thing is don't you think we're repeating ourselves. 64 00:04:20,170 --> 00:04:25,420 We have five functions and then each and every time we're repeating the functionality so wouldn't be 65 00:04:25,420 --> 00:04:32,530 better if we would use a react use effect and then just run that use effect each and every time we're 66 00:04:32,590 --> 00:04:35,350 updating something about cart value. 67 00:04:35,350 --> 00:04:37,000 One that make more most sense. 68 00:04:37,000 --> 00:04:37,720 So let's try it out. 69 00:04:38,440 --> 00:04:43,110 I'm gonna write a react react then we're gonna write. 70 00:04:43,130 --> 00:04:46,030 Use a fact that is of course our callback function. 71 00:04:46,300 --> 00:04:47,810 Like so right away. 72 00:04:47,840 --> 00:04:53,160 As a second argument I'm going to say you're not I only want to run this callback function. 73 00:04:53,300 --> 00:05:02,210 If something gets updated for my cart state value that's it only then I would like to run this callback 74 00:05:02,210 --> 00:05:02,900 function. 75 00:05:03,050 --> 00:05:10,460 And initially we're also gonna do something with a local storage so local storage currently doesn't 76 00:05:10,460 --> 00:05:11,330 make sense. 77 00:05:11,330 --> 00:05:15,290 So I'm just going to leave commandeer just so you know that eventually there's gonna be some kind of 78 00:05:15,290 --> 00:05:16,110 functionality. 79 00:05:16,310 --> 00:05:24,590 But let's start calculating our cart items as well as total and since my cart is an array I can just 80 00:05:24,590 --> 00:05:30,770 use reduce where I can just iterate over the array and then add the value to the total. 81 00:05:30,950 --> 00:05:35,100 And let's start with a cart items because that's gonna be a little bit easier one. 82 00:05:35,120 --> 00:05:41,570 I mean both of them are gonna be easy but no one is gonna be even more easy than the total and we're 83 00:05:41,570 --> 00:05:50,680 gonna set up within a callback function and variable I'm going to say let new cart items and I'm only 84 00:05:50,680 --> 00:05:54,350 using this new because I don't want to confuse you of what we're doing. 85 00:05:54,730 --> 00:05:57,670 So we're going to go with like new card items. 86 00:05:57,670 --> 00:06:02,700 We're gonna send this equal to cart reduce reduce. 87 00:06:02,800 --> 00:06:08,560 And then within a reduced we are seeing the callback function like so and also we need to set up the 88 00:06:08,560 --> 00:06:09,730 initial value. 89 00:06:09,730 --> 00:06:14,590 So since I'm calculating something with numbers my initial value is going to be zero. 90 00:06:14,830 --> 00:06:20,490 And then within our callback function we have two parameters we have one accumulator. 91 00:06:20,620 --> 00:06:24,790 It's a lot of times written as HCC as a murder. 92 00:06:24,850 --> 00:06:29,890 But again please remember that reference is the totals that we are turning as well as each and every 93 00:06:29,890 --> 00:06:32,460 item which is reference as current. 94 00:06:32,590 --> 00:06:39,790 Now since are these parameters I'm just going to name them to total as well as cart item and if you're 95 00:06:40,060 --> 00:06:46,740 iffy about what in fact you are doing always always within a function body you can just console log. 96 00:06:46,750 --> 00:06:49,290 Now we always going to need to return the total. 97 00:06:49,300 --> 00:06:51,820 So let me write return total. 98 00:06:51,850 --> 00:06:56,460 And then like I said let's just cancel logging just so we all are on the same page. 99 00:06:56,590 --> 00:07:00,400 So let's write console log we're going to have our total. 100 00:07:00,610 --> 00:07:05,830 And then of course we're also going to have our cart item and we're going to display that within the 101 00:07:05,830 --> 00:07:06,290 object. 102 00:07:06,320 --> 00:07:12,050 So cart item and then once we run it we're going to check inspect. 103 00:07:12,060 --> 00:07:14,860 And then within the console we're going to have three objects. 104 00:07:14,910 --> 00:07:22,020 Now why I have three objects because I had three items in the array so reduce method is going to have 105 00:07:22,020 --> 00:07:28,260 the callback callback is going to iterate over each and every item in the right and then within that 106 00:07:28,260 --> 00:07:29,910 callback we can access those items. 107 00:07:30,360 --> 00:07:35,560 So the first time total is gonna be zero and I'm gonna have my first item from the cart. 108 00:07:35,580 --> 00:07:39,570 Then the second time total is still going to be 0 because we didn't set up any kind of functionality 109 00:07:39,990 --> 00:07:45,630 and I'm gonna have my second item and then of course we have the same thing for the third item. 110 00:07:45,660 --> 00:07:49,410 So now I know that I can access the third item what I'm looking for. 111 00:07:49,590 --> 00:07:52,810 Well notice how the item has the amount properties. 112 00:07:52,830 --> 00:07:53,570 Right. 113 00:07:53,580 --> 00:08:00,390 So what if we would just grab from each and every item the value for the amount property and just added 114 00:08:00,420 --> 00:08:01,270 to a total. 115 00:08:01,440 --> 00:08:02,870 How it's going to look like. 116 00:08:02,940 --> 00:08:10,020 Let me delete and let's say that not only I'm going to return the total but I would want to add from 117 00:08:10,020 --> 00:08:14,530 my current iteration the amount of said cart item. 118 00:08:14,610 --> 00:08:20,250 That is my current iteration and it has the amount property and now my total is not going to be zero 119 00:08:20,250 --> 00:08:21,010 all the time. 120 00:08:21,060 --> 00:08:22,630 In fact we're going to increase it. 121 00:08:22,800 --> 00:08:29,130 And just to show you that we're going to get let's say correct values we can run it and then also why 122 00:08:29,130 --> 00:08:32,790 don't we have the set card items. 123 00:08:32,790 --> 00:08:38,340 So right after we have a new card items and by the way if you want you can control log that went out 124 00:08:38,340 --> 00:08:39,240 as well. 125 00:08:39,290 --> 00:08:43,690 So a new card items and like I said we should have 12. 126 00:08:44,010 --> 00:08:45,030 And yes we do. 127 00:08:45,030 --> 00:08:49,200 So we calculated correctly because of course it's not showing anywhere in our progression. 128 00:08:49,200 --> 00:08:56,920 So in this case we do need to use console log and now let's use the fact that we have set card items. 129 00:08:56,920 --> 00:09:01,090 Remember that was the function that was given us by you state. 130 00:09:01,120 --> 00:09:07,960 So right after we calculate the items we're going to say set cart items and we're going to pass in our 131 00:09:07,960 --> 00:09:09,520 new card items. 132 00:09:09,640 --> 00:09:13,900 Let's passing the new card items and for the total is gonna be exactly the same. 133 00:09:14,320 --> 00:09:17,080 But the difference would be that not only we have the amount. 134 00:09:17,320 --> 00:09:18,940 We also have the total. 135 00:09:18,970 --> 00:09:23,950 So we're gonna have to multiply amount by these whatever the prices for the item. 136 00:09:24,130 --> 00:09:30,220 And then we're just gonna again append this to whatever total value we have initially we have 0 0 but 137 00:09:30,220 --> 00:09:34,550 then with each iteration we're going to have more total. 138 00:09:34,600 --> 00:09:35,550 So let's do that. 139 00:09:35,560 --> 00:09:39,310 Let's say first of all I guess let's add some kind of comments here. 140 00:09:39,310 --> 00:09:41,830 So we're gonna have cart items. 141 00:09:41,870 --> 00:09:43,120 That's number one. 142 00:09:43,240 --> 00:09:46,020 And then the second one is gonna be total. 143 00:09:46,060 --> 00:09:53,620 So let's add comment of cart total and then we're gonna do pretty much the same syntax we're gonna have 144 00:09:53,620 --> 00:10:02,050 cost or you know what let's use let's let new total is equal again to cart reduce. 145 00:10:02,200 --> 00:10:04,160 Then we have our callback function. 146 00:10:04,330 --> 00:10:07,090 Then again we're still calculating the numbers. 147 00:10:07,450 --> 00:10:09,500 So I'm going to start with zero. 148 00:10:09,520 --> 00:10:12,470 Then again we have accumulator and current. 149 00:10:12,820 --> 00:10:17,770 And again I'm going to call this total and cart item. 150 00:10:17,960 --> 00:10:25,430 And then within the function body again we're gonna have a return but unlike our previous function where 151 00:10:25,430 --> 00:10:32,830 we just return total plus whatever was the amount on that specific item well in this case we're going 152 00:10:32,830 --> 00:10:34,760 to multiplied by the price. 153 00:10:34,760 --> 00:10:39,990 So our functionality is going to look following way where again we're appending this but we're gonna 154 00:10:40,010 --> 00:10:41,750 say cart item. 155 00:10:41,810 --> 00:10:47,210 So each and every iteration has the amount and we would want to multiply this by the price. 156 00:10:47,210 --> 00:10:49,570 So also cart item has the price. 157 00:10:49,670 --> 00:10:52,950 So we're gonna multiply amount by the price. 158 00:10:52,970 --> 00:10:57,260 Now this once in a while is gonna give us a weird numbers. 159 00:10:57,260 --> 00:11:03,830 So in order to avoid that we're also gonna set up one more functionality where we have a new total. 160 00:11:03,860 --> 00:11:08,330 So that's the total I'm getting back and I'm not going to control all this time because we already looked 161 00:11:08,330 --> 00:11:13,400 at the functionality but new total is gonna be equal to a two fixed. 162 00:11:13,430 --> 00:11:18,350 So I'd want to use a two fixed method to make sure that I'm always getting to decimals. 163 00:11:18,350 --> 00:11:21,950 Now the thing with that is it returns a string. 164 00:11:21,950 --> 00:11:23,880 So we also need to use past flow. 165 00:11:24,320 --> 00:11:31,490 So when you say pass load then within the past what we're going to pass in our new total and then two 166 00:11:31,490 --> 00:11:37,080 fixed method like I said so we're going to make sure that there's always only two decimals like so. 167 00:11:37,220 --> 00:11:39,990 And then of course again we need to run our set total. 168 00:11:40,130 --> 00:11:40,850 So set. 169 00:11:40,910 --> 00:11:44,230 Total is now going to be equal to a new total. 170 00:11:44,390 --> 00:11:50,550 And the moment we do that within the cart page we're gonna see our total amount. 171 00:11:50,570 --> 00:11:56,150 So in this case since we are displaying an application we can see that everything has been set up correctly.