1 00:00:00,760 --> 00:00:01,300 Beautiful. 2 00:00:01,330 --> 00:00:07,750 And another thing that I would want to fix is the fact that notice how decrease and increase have almost 3 00:00:07,750 --> 00:00:08,780 the same functionality. 4 00:00:09,040 --> 00:00:12,650 The only difference is the plus one, minus one. 5 00:00:12,930 --> 00:00:16,270 And in this case, I decided that I'm going to create another action. 6 00:00:16,530 --> 00:00:18,880 That's why we call this toggle amount. 7 00:00:19,030 --> 00:00:21,090 And in that one, we will combine the two. 8 00:00:21,310 --> 00:00:24,610 So that way you can still have reference for a decrease and increase. 9 00:00:24,850 --> 00:00:29,140 But we'll take a look at how we can add more values in the function. 10 00:00:29,320 --> 00:00:31,680 So that way we can just have one action. 11 00:00:31,990 --> 00:00:37,650 Now, as far as the beginning, I want to start by setting up everything in my car container. 12 00:00:38,020 --> 00:00:40,200 So of course, this is where I will run. 13 00:00:40,480 --> 00:00:42,010 So I need to look for. 14 00:00:43,520 --> 00:00:45,980 Blencoe Costa, Sarah. 15 00:01:34,380 --> 00:01:39,740 Behind the project, the station just west of here. 16 00:01:40,910 --> 00:01:42,880 What were you now? 17 00:02:05,500 --> 00:02:08,290 Beautiful, with our first refractor out of the way. 18 00:02:08,600 --> 00:02:14,960 Next would like to take care of the fact that decrease and increase essentially have almost this. 19 00:02:17,020 --> 00:02:19,890 Beautiful with our initial refractor out of the way. 20 00:02:19,950 --> 00:02:22,930 Next, I want to switch gears and talk about. 21 00:02:24,900 --> 00:02:28,350 Beautiful with our initial refactor out of the way. 22 00:02:28,710 --> 00:02:34,080 Next, I would like to focus on the fact that decrease in increase essentially have exactly the same 23 00:02:34,080 --> 00:02:34,630 functionality. 24 00:02:35,070 --> 00:02:39,500 The only difference is the minus one line in here, of course, I have plus one. 25 00:02:39,900 --> 00:02:46,170 That's why I will create a separate section just so you still can have references for these two, but 26 00:02:46,170 --> 00:02:50,550 then in that action will take care of the both the decrease and increase. 27 00:02:50,910 --> 00:02:55,200 Now, the way it will work in the actions, currently we have toggle amount. 28 00:02:55,500 --> 00:02:59,050 So first we will need to import in the correct item. 29 00:02:59,760 --> 00:03:00,930 So let me navigate there. 30 00:03:01,410 --> 00:03:06,830 Instead of just remove the crease and increase, we will also go with toggle amount. 31 00:03:07,080 --> 00:03:07,740 OK, awesome. 32 00:03:08,100 --> 00:03:14,880 Then remember, down in the bottom we had our match props and of course we would still want this patch 33 00:03:14,930 --> 00:03:20,270 correction or in this case, it's going to be a bit more complicated as far as our function. 34 00:03:20,520 --> 00:03:23,480 Now, it's not going to be much more complicated, but just a bit. 35 00:03:23,820 --> 00:03:25,790 So we're going to go with toggle. 36 00:03:25,830 --> 00:03:27,750 So that's how I'm going to name my function. 37 00:03:28,110 --> 00:03:32,470 And then in this case, I'm going to pass in the function a argument. 38 00:03:32,820 --> 00:03:39,120 So when we will actually invoke our function, we'll also pass in the actual argument. 39 00:03:39,300 --> 00:03:44,520 And that argument will be either we will increase or decrease since again, it's going to be the same 40 00:03:44,520 --> 00:03:44,970 function. 41 00:03:45,090 --> 00:03:49,360 But in the function we will check whether we're increasing or decreasing. 42 00:03:49,620 --> 00:03:50,550 So that's where I. 43 00:03:52,470 --> 00:03:57,610 So that way we won't have to copy and paste the same functionality again, toggle function. 44 00:03:57,630 --> 00:04:04,500 But then unlike the other ones in this one, we will pass here a primer, which eventually will be our 45 00:04:04,500 --> 00:04:07,440 argument, and that will still return a dispatch. 46 00:04:07,590 --> 00:04:08,880 So let me set this up. 47 00:04:09,240 --> 00:04:10,950 We will go with this patch. 48 00:04:11,220 --> 00:04:13,300 Then type will be torgau amount. 49 00:04:13,320 --> 00:04:16,980 Remember, we need it to have an object than a toggle amount. 50 00:04:17,340 --> 00:04:23,790 And then for the payload, I'll pass through things opportunity because I still need to know which item 51 00:04:23,790 --> 00:04:24,200 it is. 52 00:04:24,480 --> 00:04:26,820 And the second one will be my payload. 53 00:04:28,950 --> 00:04:30,810 And the second one will be my dog. 54 00:04:31,110 --> 00:04:35,780 So the one that I'm passing in the actual function, I'll pass it also in my payload. 55 00:04:36,090 --> 00:04:37,460 So payload is an object. 56 00:04:37,470 --> 00:04:40,580 We have the ID that is coming from the on purpose, of course. 57 00:04:40,800 --> 00:04:47,750 And then the second one, like I said, is the toggle parameter that we will pass in actually our return. 58 00:04:48,090 --> 00:04:49,440 So we have our return. 59 00:04:49,650 --> 00:04:56,940 And then instead of increase and decrease now, we will use our tag to see the function that we created 60 00:04:56,940 --> 00:04:57,260 last. 61 00:04:57,440 --> 00:04:59,220 That's the one we will import first. 62 00:04:59,580 --> 00:05:01,600 So let me check where I have the car item. 63 00:05:01,620 --> 00:05:02,520 So I have increase. 64 00:05:02,520 --> 00:05:02,970 Decrease. 65 00:05:03,300 --> 00:05:08,340 Now, those will stay for reference, but I will also get as a prop my toggle. 66 00:05:08,610 --> 00:05:13,160 And then, like I said, instead of increase, I will go with toggle. 67 00:05:13,590 --> 00:05:17,610 And then as far as the toggle argument, it will be either ink. 68 00:05:17,880 --> 00:05:23,690 So I m c or D, e, c, so either I'm increasing or decreasing. 69 00:05:23,910 --> 00:05:29,990 So in my case, since it is a increased button, that's why I'll pass my toggle as a string ink. 70 00:05:30,150 --> 00:05:31,560 So that means I'm increasing. 71 00:05:31,740 --> 00:05:35,250 And the same thing I would want to do here where I have the decrease. 72 00:05:35,580 --> 00:05:40,230 So I'm not going to return a decrease, I will return a toggle. 73 00:05:40,260 --> 00:05:46,610 However, in this case, of course, my argument will change to D.C. Now I'll say both of them. 74 00:05:47,040 --> 00:05:50,680 And of course, now in a register, I need to take care of that. 75 00:05:51,030 --> 00:05:53,220 So let me first look for my register. 76 00:05:54,000 --> 00:05:55,520 Then of course I need to import. 77 00:05:55,920 --> 00:05:58,250 So I'm going to go with toggle amount. 78 00:05:58,260 --> 00:06:00,240 OK, we imported a fraction. 79 00:06:00,540 --> 00:06:05,040 And then again, let's find a place somewhere here, maybe in the bottom. 80 00:06:05,160 --> 00:06:06,750 I think that will make more sense. 81 00:06:07,020 --> 00:06:11,570 I'm going to go with if action type is equal. 82 00:06:11,580 --> 00:06:14,820 And again, we're looking for the toggle amount. 83 00:06:15,150 --> 00:06:23,220 And in this case we will copy and paste some code or remember that we will set up a one function that 84 00:06:23,220 --> 00:06:24,450 take care of the both. 85 00:06:24,700 --> 00:06:26,220 Now, we'll still do the map. 86 00:06:26,580 --> 00:06:28,350 I mean, that will not change. 87 00:06:28,560 --> 00:06:32,610 However, we'll just going to place both of them in the same place. 88 00:06:32,940 --> 00:06:34,140 So let's start this way. 89 00:06:34,350 --> 00:06:35,820 We have our on amount. 90 00:06:35,850 --> 00:06:36,750 OK, awesome. 91 00:06:37,050 --> 00:06:39,060 Then let's set up our curly braces. 92 00:06:39,390 --> 00:06:40,110 And you know what? 93 00:06:40,290 --> 00:06:45,810 Just to make things interesting and just to show you how it would look like if we would just write everything 94 00:06:46,050 --> 00:06:51,900 in one object, it'll make things interesting where I will right away return my state. 95 00:06:52,080 --> 00:06:54,030 So I'll copy and paste my values. 96 00:06:54,030 --> 00:06:54,600 That's fine. 97 00:06:54,750 --> 00:06:58,410 Or maybe more precisely, I'll copy all my values. 98 00:06:58,620 --> 00:06:59,430 And then I'm a writer. 99 00:06:59,430 --> 00:07:00,830 We're going to overwrite card. 100 00:07:01,080 --> 00:07:06,120 And in this case, instead of setting up a separate variable, let's write state card. 101 00:07:06,360 --> 00:07:10,320 So we are on our map function that still stays the same. 102 00:07:10,560 --> 00:07:17,310 Then I remember we had a callback function, so I'm going to go with card item and now what are we returning 103 00:07:17,310 --> 00:07:18,630 from the card item? 104 00:07:18,930 --> 00:07:25,620 So this is going to be the case where if the actual ID doesn't match, then I will just return a card 105 00:07:25,620 --> 00:07:27,840 item that still stays the same. 106 00:07:28,020 --> 00:07:32,730 That would be my default, however, then I'll have two sets of if statements. 107 00:07:33,030 --> 00:07:34,740 So first I'm going to have if statement. 108 00:07:34,740 --> 00:07:40,320 If the ID matches, then of course I would want to make some changes, just like we did previously here. 109 00:07:40,480 --> 00:07:46,650 Remember again, we checked for the ID if the ID matched the payload ready, then of course we returned 110 00:07:46,650 --> 00:07:47,370 a new item. 111 00:07:47,790 --> 00:07:51,650 But if it didn't, then we just return whatever item was in the way. 112 00:07:51,870 --> 00:07:54,570 Now in this case, there's going to be two sets of if statements. 113 00:07:54,930 --> 00:07:57,090 So again, we have our return card item. 114 00:07:57,240 --> 00:07:59,430 So we have default taken care of. 115 00:07:59,760 --> 00:08:03,900 But now we want to set up my if that card I remedy. 116 00:08:04,140 --> 00:08:12,780 If that matches to my action payload already, then I would want to have another set of if statements. 117 00:08:12,990 --> 00:08:18,540 And in this case it's going to be following where I'm going to go with action payload and then remember 118 00:08:18,540 --> 00:08:20,460 the toggle argument that we passed. 119 00:08:20,670 --> 00:08:24,090 And I'm going to say if it is equal to increment. 120 00:08:24,360 --> 00:08:27,990 So I am see, then of course I would want to return. 121 00:08:29,420 --> 00:08:37,100 And I'm going to return my cart item, so I'm going to go with cart item, so essentially I'm overriding 122 00:08:37,100 --> 00:08:40,700 whatever I have here and I'm going to set it equal to my new object. 123 00:08:41,120 --> 00:08:42,950 So everything exactly the same. 124 00:08:42,950 --> 00:08:44,750 But in this case, we're using this statement. 125 00:08:45,020 --> 00:08:47,810 So the same line of code effectively here. 126 00:08:48,230 --> 00:08:49,640 So I will. 127 00:08:49,640 --> 00:08:50,000 All right. 128 00:08:50,000 --> 00:08:51,990 Here, item that. 129 00:08:52,100 --> 00:08:56,180 Let's copy everything that we have in the cart item at the moment. 130 00:08:56,390 --> 00:09:01,760 And then since the argument is increase, that's why amount will be equal. 131 00:09:02,150 --> 00:09:05,990 You guessed it cart item amount and then plus one. 132 00:09:06,110 --> 00:09:06,560 Correct. 133 00:09:06,570 --> 00:09:08,390 I'm sorry, not plus two plus one. 134 00:09:08,660 --> 00:09:14,910 And of course I would also need to set up another if statement if the toggle argument is equal to decrease. 135 00:09:15,380 --> 00:09:17,750 So in this case we can copy and paste. 136 00:09:18,200 --> 00:09:23,460 It's not a crime and I'm going to go with decrease and negative one. 137 00:09:23,690 --> 00:09:28,160 So again, in this case, we're not copying pasting the whole functionality. 138 00:09:28,490 --> 00:09:33,530 We just check within the map whether we are increasing or decreasing. 139 00:09:33,800 --> 00:09:35,600 So, again, notice we can increase. 140 00:09:35,870 --> 00:09:36,620 We can decrease. 141 00:09:36,890 --> 00:09:39,470 And since we set up the functionality to remove the item. 142 00:09:39,770 --> 00:09:41,540 Now, of course, we can just remove the item.