1 00:00:00,540 --> 00:00:08,890 Some job we can clear our cart, whether by removing a single item or removing all the items altogether. 2 00:00:09,360 --> 00:00:17,370 So now, of course, let's add functionality where we can toggle the amount of items we have in CART 3 00:00:17,790 --> 00:00:20,030 from that one product. 4 00:00:20,460 --> 00:00:25,170 And I'm going to start by adding some items because, of course, there's going to be some cataloging 5 00:00:25,170 --> 00:00:26,500 along the way as well. 6 00:00:26,880 --> 00:00:29,340 So let's fill our cart then. 7 00:00:29,340 --> 00:00:30,870 I'm just going to add some random items. 8 00:00:31,750 --> 00:00:33,240 Don't freak out. 9 00:00:33,670 --> 00:00:36,480 Don't think that there's some purpose to what I'm doing right now. 10 00:00:37,020 --> 00:00:38,880 There's just some random items. 11 00:00:38,880 --> 00:00:40,560 If you want to add one, you can add one. 12 00:00:40,890 --> 00:00:44,780 You add, I don't know, 15 can add 15. 13 00:00:44,790 --> 00:00:45,950 That's really up to you. 14 00:00:46,320 --> 00:00:53,850 What I'm interested in is these two buttons because remember, we use them in the add to cart. 15 00:00:54,300 --> 00:00:55,350 So that was one set up. 16 00:00:55,350 --> 00:01:00,170 And now, of course, we're using the same component or the functionality is going to be different. 17 00:01:00,180 --> 00:01:04,820 Where will control the values that we have in the cart? 18 00:01:05,430 --> 00:01:07,710 So let's navigate first with the cart context. 19 00:01:08,920 --> 00:01:10,590 And then where we have to go. 20 00:01:11,050 --> 00:01:18,500 Notice how I am taking two things, I'm taking in the ID and I'm also taking in the value. 21 00:01:18,790 --> 00:01:19,810 Now, what is the value? 22 00:01:19,840 --> 00:01:27,220 Well, since I would want to add the same function to both buttons, that's why I'm asking whether I'm 23 00:01:27,220 --> 00:01:29,240 increasing or decreasing. 24 00:01:29,680 --> 00:01:36,400 And if you remember our first, I believe, reduce project, or maybe it wasn't the first first one 25 00:01:36,400 --> 00:01:37,630 was technically in tutorial. 26 00:01:37,630 --> 00:01:42,340 But remember when we were setting up that cart and let me see. 27 00:01:43,230 --> 00:01:45,910 Sorry, there's going to be a small detour. 28 00:01:46,500 --> 00:01:48,800 Let me keep on scrolling, remember this project? 29 00:01:49,320 --> 00:01:55,290 So we did something similar where essentially we first set up the function just for increase and increase 30 00:01:55,290 --> 00:01:57,490 and then I combined it. 31 00:01:57,690 --> 00:02:02,070 So if you remember the project, it's going to be very easy what we're about to do. 32 00:02:02,490 --> 00:02:03,700 I have idea and value. 33 00:02:04,170 --> 00:02:06,980 So this one will be either increase or decrease. 34 00:02:07,200 --> 00:02:09,600 And then, of course, I would want to dispatch my action. 35 00:02:10,000 --> 00:02:18,690 So this page, the name of the function or I'm sorry, I guess the name of the action will be toggle 36 00:02:18,840 --> 00:02:23,280 cart item or item amount more precisely. 37 00:02:23,610 --> 00:02:26,280 And then for the payload, I'll pass it on to you. 38 00:02:26,310 --> 00:02:26,610 Thanks. 39 00:02:26,650 --> 00:02:30,570 So now my payload will be an object and I'm going to be looking for the item. 40 00:02:30,990 --> 00:02:36,800 So the idea and then the second thing, of course, is going to be my value. 41 00:02:37,080 --> 00:02:42,420 So setting this up as an object, I'm missing one set of Curly versus over here. 42 00:02:43,670 --> 00:02:51,200 And my apologies, Mark, so so this should be our set up type will be toggle caught in a moment and 43 00:02:51,200 --> 00:02:54,870 then when it comes to payload ID plus the value. 44 00:02:54,950 --> 00:02:58,670 So now in this case, my payload is an object. 45 00:02:59,000 --> 00:03:08,300 And before we do anything in reducer, I would want to navigate to my cart item since that is where 46 00:03:08,330 --> 00:03:11,290 we are setting this up and then check it out. 47 00:03:11,510 --> 00:03:18,770 I have my target amount and in the increase in my placeholder, I would just want to invoke the function 48 00:03:19,280 --> 00:03:19,660 again. 49 00:03:19,670 --> 00:03:26,810 The difference here is that I'm not passing in the total amount to the amount of buttons I'm just passing 50 00:03:26,810 --> 00:03:33,890 in the increase and increase that are coming from my cart item and not in that cart item. 51 00:03:34,130 --> 00:03:38,720 I invoke this toggle amount, so I just say here toggle amount. 52 00:03:38,990 --> 00:03:45,890 And for the increase, of course I will want to pass in first ID, but then as far as the string, I'm 53 00:03:45,890 --> 00:03:47,590 just going to go with ink. 54 00:03:47,840 --> 00:03:51,800 So increase and then decrease pretty much the same. 55 00:03:52,080 --> 00:03:53,210 Just the value will change. 56 00:03:53,540 --> 00:03:55,940 Now of course I'm still passing in the same ID. 57 00:03:56,270 --> 00:04:01,190 I'm getting the card itemized, but of course the string is decreased. 58 00:04:01,520 --> 00:04:10,040 And since I would want us to see what's happening, I'll go to inspect and where we have the card context. 59 00:04:10,370 --> 00:04:13,040 I just want to toggle both these values. 60 00:04:13,040 --> 00:04:16,670 So log and value over here. 61 00:04:17,000 --> 00:04:20,270 And you'll notice in the console that once we click, check it out. 62 00:04:20,550 --> 00:04:23,360 Now, of course, we have no matching toggle. 63 00:04:23,360 --> 00:04:24,890 Correct item amount. 64 00:04:25,400 --> 00:04:26,300 Don't worry about it. 65 00:04:26,720 --> 00:04:27,230 You know what? 66 00:04:27,230 --> 00:04:32,720 For the time being, since we I just want to console, like the viewers, I'm just going to move that 67 00:04:32,720 --> 00:04:36,310 action by dispatch and set it up in a second. 68 00:04:36,530 --> 00:04:39,570 And Nancy, I have my card. 69 00:04:39,600 --> 00:04:42,320 Annamarie, by the way, this is very, very important. 70 00:04:42,680 --> 00:04:48,440 Please understand that in this case, I'm already iterating over the card. 71 00:04:49,160 --> 00:04:59,450 So I'm getting that car ready, which is just a combination of product productivity plus the car, not 72 00:04:59,450 --> 00:05:04,190 like initially when we're adding it to the card, then we were constructing that idea. 73 00:05:04,550 --> 00:05:11,480 In this case, I already have the idea since I'm iterating over here and there is now I have the ink. 74 00:05:11,810 --> 00:05:19,000 So if I click on Vigorish now, the idea is going to be exactly the same, but the string is decreased. 75 00:05:19,490 --> 00:05:22,130 So let's go to a toggle amount. 76 00:05:22,850 --> 00:05:26,840 We will on comment or dispatch and in the car producer. 77 00:05:27,860 --> 00:05:35,390 Right after clearing the court now, we could set up our toggle functionality, so let's say here, 78 00:05:35,390 --> 00:05:44,870 if an action that type is equal to toggle correct item amount, then first I would want to get both 79 00:05:44,870 --> 00:05:45,550 of those values. 80 00:05:45,560 --> 00:05:51,390 So const come up value coming from action and payload. 81 00:05:51,590 --> 00:05:53,150 So let's grab those ones first. 82 00:05:53,600 --> 00:06:02,150 And similarly to how we were increasing the amount when we added items to the card, we will iterate 83 00:06:02,170 --> 00:06:06,480 already card and then we'll check first. 84 00:06:06,530 --> 00:06:07,380 What is the value. 85 00:06:07,730 --> 00:06:12,200 So if we want to increase then of course we'll add one to the amount. 86 00:06:12,510 --> 00:06:14,300 If not, then we'll decrease. 87 00:06:14,480 --> 00:06:17,370 So first we'll check whether the item matches. 88 00:06:17,600 --> 00:06:24,170 So if the ID is equal to three and then there's going to be two more if statements where we will either 89 00:06:24,170 --> 00:06:26,030 increase or decrease. 90 00:06:26,480 --> 00:06:28,790 So now let's start by setting up our time card. 91 00:06:29,650 --> 00:06:35,130 And of course, this is going to be state and then court and then map, and before we set up the rest 92 00:06:35,140 --> 00:06:41,170 of the functionality, I simply want to go with my return where I'm going to go down to that state. 93 00:06:41,440 --> 00:06:45,540 And of course, my court will be that new court. 94 00:06:45,560 --> 00:06:45,920 All right. 95 00:06:46,390 --> 00:06:48,740 Where I'm iterating over my court. 96 00:06:48,760 --> 00:06:51,700 And then, like I said, the steps are following more. 97 00:06:51,700 --> 00:06:54,330 First, I want to check if the itemized matches. 98 00:06:54,940 --> 00:07:01,360 And again, I already mentioned this, but please keep in mind that in this case, it is already that 99 00:07:01,360 --> 00:07:05,500 value added is already this red plus color. 100 00:07:06,110 --> 00:07:12,230 So it's not like previously where I was getting idea of color separately and that's why I was checking 101 00:07:12,230 --> 00:07:13,030 her I.D.. 102 00:07:13,050 --> 00:07:14,960 Plus, in this case, I don't have to do that. 103 00:07:15,490 --> 00:07:18,960 This is already that long value. 104 00:07:19,240 --> 00:07:23,920 So I just say if the idea is equal to any, then of course I'll toggle those values. 105 00:07:23,950 --> 00:07:27,370 If not, then I just simply want to return the item. 106 00:07:27,400 --> 00:07:35,270 That's why we set up house and we say return the item as it is my item as I'm iterating over. 107 00:07:35,300 --> 00:07:39,040 However, if this matches, then of course there's two options. 108 00:07:39,370 --> 00:07:42,490 I either have value increase or decrease. 109 00:07:42,490 --> 00:07:42,870 Correct. 110 00:07:43,180 --> 00:07:45,700 So we simply go here with if value. 111 00:07:47,030 --> 00:07:53,660 Is equal to increase, then there's going to be one piece of functionality, and then if there's going 112 00:07:53,660 --> 00:07:58,280 to be a value of decrease, well, then we'll have something else. 113 00:07:58,610 --> 00:08:05,510 Now, as far as returning both of them or turn this item is just the amount that is going to change 114 00:08:05,810 --> 00:08:07,820 and we'll set up on your mouth. 115 00:08:07,820 --> 00:08:12,610 Our new mount is equal to item amount plus one. 116 00:08:12,620 --> 00:08:13,040 Why? 117 00:08:13,100 --> 00:08:15,530 Well, because we're increasing kind of makes sense. 118 00:08:15,530 --> 00:08:15,780 Right. 119 00:08:16,160 --> 00:08:19,700 And then I need to check that amount. 120 00:08:19,970 --> 00:08:25,070 So it is not bigger than the max, remember, highly, highly important. 121 00:08:25,430 --> 00:08:27,770 I have some stock values in this case. 122 00:08:27,770 --> 00:08:29,990 I kind of just say you add ninety nine items. 123 00:08:30,000 --> 00:08:33,350 No, because I always need to check for my stock. 124 00:08:33,380 --> 00:08:35,900 That's why we're setting up this Max one. 125 00:08:36,290 --> 00:08:40,130 So I'll see if the new amount is bigger. 126 00:08:41,240 --> 00:08:43,500 Then the item that Max. 127 00:08:43,910 --> 00:08:49,910 Well, then I just need to set it back to that, Max, whatever it is, some cases, in some cases it's 128 00:08:49,910 --> 00:08:52,610 11, I just randomly out of those values. 129 00:08:52,830 --> 00:08:55,720 So item will be to that item, Max. 130 00:08:55,730 --> 00:08:58,920 And then over here, of course, I would want to return it. 131 00:08:58,940 --> 00:09:04,640 I'm just going to say that that item so spread out the rest of the properties and also the amount is 132 00:09:04,640 --> 00:09:07,270 equal to my new amount. 133 00:09:07,280 --> 00:09:10,460 We save it and now we just need to set up a decrease. 134 00:09:10,730 --> 00:09:17,810 And in order to speed this up, I'll just grab these lines of code since there's going to be quite a 135 00:09:17,810 --> 00:09:20,180 few similar things there. 136 00:09:20,450 --> 00:09:24,110 And we'll start by minus one because we are decreasing. 137 00:09:24,440 --> 00:09:29,150 And in this case, we're just checking if the new amount is less than one. 138 00:09:29,550 --> 00:09:32,510 So if that is the case, I'm just going to set it equal to one. 139 00:09:32,930 --> 00:09:35,120 That's all I want to do previously. 140 00:09:35,120 --> 00:09:37,730 And some other projects we remove the item from the cart. 141 00:09:38,060 --> 00:09:40,280 In this case, I'm not going to add that functionality. 142 00:09:40,310 --> 00:09:42,560 We already have the button to do that. 143 00:09:42,570 --> 00:09:45,140 So that's not how I'm clicking. 144 00:09:45,140 --> 00:09:49,520 And nothing is happening by design because of course, we are at the one. 145 00:09:49,520 --> 00:09:51,440 But if we want, we can increase. 146 00:09:51,680 --> 00:09:52,880 This is going to be the max. 147 00:09:53,120 --> 00:09:54,530 So we kind of have more items. 148 00:09:54,800 --> 00:09:59,210 And of course, in this case, for example, the max is seven. 149 00:09:59,450 --> 00:10:04,580 And if you can do the same, if you can increase and decrease the amount. 150 00:10:04,970 --> 00:10:08,360 Now, of course, we can set up our totals.