1 00:00:00,590 --> 00:00:06,320 Okay, so now we're going to create our cart screen When we hit Add to Cart, it takes us to the cart 2 00:00:06,320 --> 00:00:09,230 route, but we don't have a screen hooked up. 3 00:00:09,230 --> 00:00:17,090 So let's go into our front end and go into screens and we're going to call this cart screen dot JS X 4 00:00:17,510 --> 00:00:20,300 and create a react component. 5 00:00:20,300 --> 00:00:23,360 And then we're just going to bring in a couple things for now. 6 00:00:23,630 --> 00:00:25,760 So let's say import. 7 00:00:27,180 --> 00:00:29,700 This is going to be from React router dom. 8 00:00:30,830 --> 00:00:36,020 And what I want to bring in from here is link and the use navigate hook. 9 00:00:36,940 --> 00:00:37,450 Okay. 10 00:00:37,450 --> 00:00:38,380 And then. 11 00:00:38,940 --> 00:00:40,200 Let's import. 12 00:00:41,390 --> 00:00:43,700 A few things from React Bootstrap. 13 00:00:47,390 --> 00:00:51,650 So from here, I'm going to bring in, let's say, row. 14 00:00:52,700 --> 00:00:54,350 And call. 15 00:00:54,680 --> 00:00:56,960 We're going to want a list group. 16 00:00:57,380 --> 00:01:00,140 We're going to want an image. 17 00:01:01,130 --> 00:01:01,820 What else? 18 00:01:01,820 --> 00:01:02,780 Form. 19 00:01:06,090 --> 00:01:07,410 And let's see. 20 00:01:07,410 --> 00:01:10,020 So form then we have button. 21 00:01:11,170 --> 00:01:12,280 And card. 22 00:01:12,280 --> 00:01:14,170 I think that's all we need for now. 23 00:01:14,590 --> 00:01:14,980 All right. 24 00:01:14,980 --> 00:01:21,680 And then let's let's bring in the trash icon, because we're going to be able to remove stuff from the 25 00:01:21,700 --> 00:01:22,170 cart. 26 00:01:22,180 --> 00:01:26,110 So I'm going to import a trash. 27 00:01:26,750 --> 00:01:31,130 And for some reason, auto import isn't working right. 28 00:01:31,660 --> 00:01:36,730 But we're going to bring that in from React icons and then slash for for font. 29 00:01:36,760 --> 00:01:37,600 Awesome. 30 00:01:37,750 --> 00:01:42,550 And then also, let's bring in our message component that we created. 31 00:01:42,820 --> 00:01:43,840 So let's see. 32 00:01:43,840 --> 00:01:44,530 Message. 33 00:01:44,530 --> 00:01:47,050 Yeah, that's not coming up either for some reason. 34 00:01:47,870 --> 00:01:54,770 So message is going to be from dot, dot slash components, slash and message. 35 00:01:55,940 --> 00:01:56,390 All right. 36 00:01:56,420 --> 00:02:05,390 Now, inside our components, inside the function here, let's initialize our navigate. 37 00:02:05,390 --> 00:02:08,270 So we'll say const, navigate equals. 38 00:02:09,190 --> 00:02:10,720 Use navigate. 39 00:02:11,230 --> 00:02:12,370 And you know what? 40 00:02:12,370 --> 00:02:17,800 Let's also bring in our use dispatch and use selector from React Redux, because we're going to need 41 00:02:17,800 --> 00:02:22,750 those two to to get our state and to interact with our state actions. 42 00:02:22,750 --> 00:02:33,010 So let's also import, we'll say use dispatch and use selector. 43 00:02:34,470 --> 00:02:34,920 Okay. 44 00:02:34,920 --> 00:02:39,900 And that's going to be from React Redux. 45 00:02:41,980 --> 00:02:48,730 Okay, so we have navigate and then we'll also let's also do use dispatch. 46 00:02:52,780 --> 00:02:55,000 So call this dispatch. 47 00:02:56,440 --> 00:02:58,630 And I guess. 48 00:02:59,740 --> 00:03:01,030 I guess for now, we'll just. 49 00:03:01,030 --> 00:03:03,960 We'll just leave it like this just so we can have a root. 50 00:03:03,970 --> 00:03:07,930 So let's go into our index.js in the front end. 51 00:03:08,580 --> 00:03:14,220 And we're going to bring in our cart screen, so we'll copy that down and change this to cart. 52 00:03:15,180 --> 00:03:16,230 This one here. 53 00:03:16,230 --> 00:03:17,220 Change that. 54 00:03:18,710 --> 00:03:19,850 To cart. 55 00:03:20,600 --> 00:03:23,210 And we're going to add this right here. 56 00:03:25,320 --> 00:03:31,680 So cart screen and the route itself is just going to be slash cart. 57 00:03:33,660 --> 00:03:34,010 Let's see. 58 00:03:34,020 --> 00:03:34,560 What do we got? 59 00:03:34,740 --> 00:03:35,930 Okay, that's fine. 60 00:03:35,940 --> 00:03:41,220 So if I come over here now and I click on my cart link, we should see cart screen. 61 00:03:42,380 --> 00:03:42,680 All right. 62 00:03:42,680 --> 00:03:44,900 We can close that index.js up. 63 00:03:46,310 --> 00:03:48,980 So let's figure out what we want to do next. 64 00:03:49,010 --> 00:03:55,730 We have our items in our in local storage and we have it in the Redux state. 65 00:03:55,760 --> 00:04:00,470 So in order to get those cart items, we're going to use our use selector. 66 00:04:00,500 --> 00:04:03,170 So let's go, right? 67 00:04:05,280 --> 00:04:06,090 Um, let's see. 68 00:04:06,090 --> 00:04:09,090 We'll go right under here and let's get our cart state. 69 00:04:09,090 --> 00:04:16,829 So we'll say const and call this cart and then we're going to use use selector and we're going to pass 70 00:04:16,829 --> 00:04:18,810 in here a function. 71 00:04:20,070 --> 00:04:22,680 And that takes in our state. 72 00:04:23,440 --> 00:04:29,390 And we want the state dot cart just like we did in the header to get the cart items. 73 00:04:29,410 --> 00:04:31,270 Then I'm going to take. 74 00:04:32,330 --> 00:04:33,320 The cart items. 75 00:04:33,320 --> 00:04:41,210 I'm going to destructure say cart items and we want to get that from our cart state. 76 00:04:42,370 --> 00:04:44,650 So now we should have access to those. 77 00:04:44,680 --> 00:04:46,120 Now let's go. 78 00:04:47,700 --> 00:04:49,440 Down into our output here. 79 00:04:49,440 --> 00:04:57,540 So where we have the return and let's get rid of that text and what we'll put here is a wrapper is a 80 00:04:57,540 --> 00:05:04,080 row because we're going to have a column that'll have our cart items. 81 00:05:04,080 --> 00:05:08,520 So we're going to return a row and then inside that we'll have a call. 82 00:05:08,550 --> 00:05:11,580 Let's say MD equals eight. 83 00:05:13,250 --> 00:05:14,990 Okay, so we'll have this. 84 00:05:15,590 --> 00:05:17,240 This will be responsive. 85 00:05:17,240 --> 00:05:19,460 And then for the H one. 86 00:05:20,830 --> 00:05:27,040 I'm just going to put a style attribute in here style prop and just set the margin bottom. 87 00:05:27,650 --> 00:05:30,320 To, let's say, 20 pixels. 88 00:05:30,320 --> 00:05:34,190 And then inside the H one, we'll just say shopping cart. 89 00:05:35,740 --> 00:05:35,950 Okay. 90 00:05:35,950 --> 00:05:40,030 And you can save and take a look now under the H one. 91 00:05:40,330 --> 00:05:46,630 Basically, if the cart is item, I just want to say your cart is empty and then a link to go back. 92 00:05:46,630 --> 00:05:54,040 So let's put some curly braces in here and we'll say cart items, which is an array of items in our 93 00:05:54,040 --> 00:06:03,910 cart and we'll say if the length is equal to zero, then let's open up some parentheses else, let's 94 00:06:03,910 --> 00:06:05,200 open up some parentheses. 95 00:06:05,200 --> 00:06:10,510 And in the first one, so if it is equal to zero, then we're going to have our message component, 96 00:06:10,510 --> 00:06:11,890 which we just brought in. 97 00:06:11,890 --> 00:06:13,600 So we'll say message. 98 00:06:16,130 --> 00:06:19,550 And let's say your cart. 99 00:06:20,800 --> 00:06:22,540 Your cart is empty. 100 00:06:23,320 --> 00:06:25,750 And then we'll just have a link after that. 101 00:06:25,750 --> 00:06:29,350 So we already brought in link so we can say link to. 102 00:06:30,120 --> 00:06:33,870 Let's go to the home page and we'll say, go back. 103 00:06:35,240 --> 00:06:35,720 Okay. 104 00:06:35,750 --> 00:06:36,170 Else. 105 00:06:36,170 --> 00:06:45,110 If there is something in the cart, then let's just add our list group wrapper element and I'm going 106 00:06:45,110 --> 00:06:47,540 to just give it a variant of flush. 107 00:06:47,720 --> 00:06:51,890 So variant set that to flush. 108 00:06:51,980 --> 00:06:55,160 And then just for now, we'll just say items. 109 00:06:55,520 --> 00:07:00,530 So let's save and it says items because we do have something in our cart. 110 00:07:01,980 --> 00:07:02,610 All right. 111 00:07:03,660 --> 00:07:08,670 And just to test it out, if I go to my application tab, remember, we can empty our cart by doing 112 00:07:08,670 --> 00:07:09,450 this. 113 00:07:09,780 --> 00:07:17,790 So if I get rid of it and then reload, now it says your cart is empty and we have a go back button. 114 00:07:19,140 --> 00:07:23,550 Okay, so that's working how it should if I add something to the cart. 115 00:07:25,420 --> 00:07:27,640 Then it just says items for now. 116 00:07:28,760 --> 00:07:30,050 So we have our route. 117 00:07:30,080 --> 00:07:33,890 We have our card screen showing, although it doesn't show much. 118 00:07:33,890 --> 00:07:41,090 So let's let's go ahead and just add the rest of our UI here for the shopping cart and we can close 119 00:07:41,090 --> 00:07:42,770 up that sidebar for now. 120 00:07:42,770 --> 00:07:49,670 So basically we're working within this list group so we can get rid of the text of items and let's map 121 00:07:49,670 --> 00:07:51,140 through the cart items. 122 00:07:51,140 --> 00:07:55,430 So we'll say cart items, dot map. 123 00:07:56,150 --> 00:07:57,680 And inside map. 124 00:07:57,680 --> 00:08:03,740 We're going to have our arrow and we want this just to point to some parentheses. 125 00:08:03,740 --> 00:08:06,020 So what do we want to show per item? 126 00:08:06,020 --> 00:08:08,540 And we'll call each one item. 127 00:08:09,920 --> 00:08:18,020 And let's start off with a wrapped list group item so we can basically take our list group and say dot 128 00:08:18,050 --> 00:08:24,410 item and just add a key because this is the wrapper for our map, our loop. 129 00:08:24,410 --> 00:08:29,360 So for the key, let's say item and we'll use dot underscore ID. 130 00:08:31,070 --> 00:08:33,049 Okay, so that's our list group item. 131 00:08:33,049 --> 00:08:36,890 Now in here, we're going to have another row. 132 00:08:36,890 --> 00:08:39,919 So let's do that and we're going to have a few columns. 133 00:08:39,919 --> 00:08:47,180 So first one, let's say call and let's say MD equals two. 134 00:08:47,210 --> 00:08:49,820 So on medium screens, this will take up to. 135 00:08:50,790 --> 00:08:53,650 And this is this is going to be the image. 136 00:08:53,670 --> 00:08:58,800 So let's use our image and let's say source. 137 00:08:59,510 --> 00:09:05,000 In the source for this is just going to be whatever the item dot image is. 138 00:09:05,750 --> 00:09:06,290 Okay. 139 00:09:06,290 --> 00:09:09,470 And then we'll give it an alt of the name. 140 00:09:09,470 --> 00:09:11,090 So item dot name. 141 00:09:11,420 --> 00:09:16,430 And let's also make it fluid and let's make it rounded. 142 00:09:18,670 --> 00:09:20,230 Okay, we can test that. 143 00:09:21,400 --> 00:09:22,750 All right, So we have our item. 144 00:09:22,750 --> 00:09:27,070 Let's add another item just so we can see what happens when we have multiple items. 145 00:09:27,070 --> 00:09:28,450 So there's the next one. 146 00:09:28,570 --> 00:09:31,060 So that's the first column in the row. 147 00:09:31,060 --> 00:09:34,390 Now we're going to add another one. 148 00:09:34,810 --> 00:09:39,190 So this call is going to be three on medium screens and up. 149 00:09:39,190 --> 00:09:41,800 So let's say call MD three. 150 00:09:41,800 --> 00:09:45,970 And in here we're going to have, let's say, a link to. 151 00:09:46,270 --> 00:09:50,230 Now this is going to go to the actual product item page. 152 00:09:50,230 --> 00:09:52,660 So that's going to be some backticks. 153 00:09:53,230 --> 00:10:01,060 And then slash product slash and then whatever the ID is, which we can get with item dot underscore 154 00:10:01,090 --> 00:10:01,600 ID. 155 00:10:02,850 --> 00:10:03,300 Okay. 156 00:10:03,300 --> 00:10:08,090 And then let's close that link and we just want the item name. 157 00:10:08,100 --> 00:10:12,060 So item dot name. 158 00:10:12,770 --> 00:10:13,730 Check it out. 159 00:10:14,270 --> 00:10:14,690 Okay. 160 00:10:14,690 --> 00:10:15,650 There we go. 161 00:10:16,520 --> 00:10:19,760 And then we'll have another column with the price. 162 00:10:19,760 --> 00:10:23,510 So let's say call and this one is going to be on medium screens and up. 163 00:10:23,510 --> 00:10:25,250 It's going to take up to. 164 00:10:27,080 --> 00:10:27,830 Uh, yeah. 165 00:10:27,830 --> 00:10:28,460 So two. 166 00:10:28,460 --> 00:10:30,620 And then this will be the price. 167 00:10:31,010 --> 00:10:33,320 I'm going to put a money sign in front of it. 168 00:10:33,320 --> 00:10:35,930 So let's say item dot price. 169 00:10:37,030 --> 00:10:37,750 Okay, good. 170 00:10:37,750 --> 00:10:38,770 We have the price. 171 00:10:38,800 --> 00:10:46,450 Now we're going to have the the quantity, because I want to be able to change the quantity from here 172 00:10:46,450 --> 00:10:47,610 for each one. 173 00:10:47,620 --> 00:10:49,690 So let's create another column. 174 00:10:51,340 --> 00:10:53,290 And for this one, we'll do MD. 175 00:10:54,040 --> 00:10:55,720 MD two as well. 176 00:10:57,260 --> 00:10:57,770 Okay. 177 00:10:57,770 --> 00:11:04,130 And then I'm just going to grab from, let's see, where did we have this on the product screen? 178 00:11:04,850 --> 00:11:06,950 Where we have our quantity picker. 179 00:11:08,790 --> 00:11:10,710 So let's see. 180 00:11:10,740 --> 00:11:11,760 Form. 181 00:11:12,090 --> 00:11:12,630 Yeah. 182 00:11:12,630 --> 00:11:18,210 So this form right here that has this expression, I'm going to grab that. 183 00:11:18,210 --> 00:11:20,190 So from this form control. 184 00:11:21,520 --> 00:11:21,850 Right. 185 00:11:21,850 --> 00:11:23,470 So form control, that whole thing. 186 00:11:23,470 --> 00:11:29,020 I'm just going to I'm just going to copy that and then I'm going to paste that in here. 187 00:11:29,290 --> 00:11:30,760 And I think. 188 00:11:31,920 --> 00:11:32,340 Let's see. 189 00:11:32,370 --> 00:11:34,170 Do we want to change anything here? 190 00:11:34,170 --> 00:11:39,360 So the value so the value is actually going to be the item dot quantity. 191 00:11:39,720 --> 00:11:41,040 And then. 192 00:11:41,890 --> 00:11:42,680 Let's see. 193 00:11:42,700 --> 00:11:49,870 We're not going to do the on change just yet, so let's actually get rid of that for just for now. 194 00:11:50,110 --> 00:11:53,290 Or we can just have an empty function for now. 195 00:11:55,460 --> 00:11:56,630 So we'll just. 196 00:12:00,540 --> 00:12:02,190 Yeah, we'll just do that for now. 197 00:12:02,190 --> 00:12:09,570 And then this is going to be the same because remember, we just want a number for, for however many 198 00:12:09,600 --> 00:12:10,860 is in stock. 199 00:12:10,980 --> 00:12:16,860 And then the option, let's see, key X plus one because it's it's a zero based array. 200 00:12:16,860 --> 00:12:18,360 So we're adding one. 201 00:12:18,600 --> 00:12:19,950 Yeah, that should all be good. 202 00:12:19,950 --> 00:12:22,080 So let's save that and see. 203 00:12:22,290 --> 00:12:24,270 Product is not defined. 204 00:12:24,270 --> 00:12:24,570 Okay. 205 00:12:24,570 --> 00:12:28,020 So where we have product, we want to change that to item. 206 00:12:30,680 --> 00:12:31,070 All right. 207 00:12:31,070 --> 00:12:36,890 So now we have and you can see it's only going to have as many that is in stock. 208 00:12:38,840 --> 00:12:41,510 So we'll just leave it like that for now. 209 00:12:41,510 --> 00:12:46,550 And then let's create one more column for the button to delete. 210 00:12:46,580 --> 00:12:49,010 So under the last call. 211 00:12:50,150 --> 00:12:56,270 Let's say call and let's say MD set that to two. 212 00:12:57,740 --> 00:13:05,720 And this is where we want to have our button and we're going to give it a type of button and then a 213 00:13:05,720 --> 00:13:06,830 variant. 214 00:13:07,870 --> 00:13:15,790 Of light, and then that button is going to surround the trash icon so far, trash. 215 00:13:16,630 --> 00:13:17,650 Let's check it out. 216 00:13:19,050 --> 00:13:19,380 Okay. 217 00:13:19,380 --> 00:13:21,180 So I think that looks pretty good. 218 00:13:21,300 --> 00:13:24,330 Now we want to work on this column, right? 219 00:13:24,330 --> 00:13:26,370 So if we look at the. 220 00:13:27,500 --> 00:13:28,280 The return. 221 00:13:28,280 --> 00:13:31,310 Here we have this this column is is this whole thing. 222 00:13:31,310 --> 00:13:31,640 Right? 223 00:13:31,640 --> 00:13:35,140 It takes up eight, eight slices of the 12. 224 00:13:35,150 --> 00:13:44,960 So let's go under that which ends right here and let's create a new column and let's set that 1 to 4. 225 00:13:44,960 --> 00:13:45,250 Right? 226 00:13:45,260 --> 00:13:47,060 Because eight and four is 12. 227 00:13:47,060 --> 00:13:51,380 So this will take up the rest of the space and we're going to want a card here. 228 00:13:51,380 --> 00:13:53,060 And did I bring in card? 229 00:13:54,000 --> 00:13:54,910 Yes, I did. 230 00:13:54,930 --> 00:13:55,500 All right. 231 00:13:55,500 --> 00:13:56,970 So this will be wrapped in a car. 232 00:13:56,970 --> 00:14:02,100 And this is basically where we're going to have our, you know, our total and then our proceed to checkout 233 00:14:02,100 --> 00:14:02,970 and so on. 234 00:14:02,970 --> 00:14:06,900 So I'm going to have a list group, let's say list group. 235 00:14:06,900 --> 00:14:13,560 We'll do a variant of flush, not flush, flush. 236 00:14:14,560 --> 00:14:19,990 Okay, so we have our list group and then let's have a list group dot item. 237 00:14:21,790 --> 00:14:27,340 And inside that, let's have an H two and this will be the subtotal. 238 00:14:27,340 --> 00:14:29,500 So let's say subtotal. 239 00:14:29,860 --> 00:14:34,090 And the way we'll do this is in parentheses. 240 00:14:34,090 --> 00:14:37,330 We're going to have our cart items and we're going to use reduce. 241 00:14:37,330 --> 00:14:42,820 So cart items and let's say dot reduce. 242 00:14:43,460 --> 00:14:50,990 And that's going to take in a function with an accumulator and the item or the current item. 243 00:14:51,290 --> 00:14:57,150 And then all we want to do is take that accumulator and add the item quantity. 244 00:14:57,170 --> 00:15:04,100 So item dot qty and pass in zero as the default for the accumulator. 245 00:15:04,370 --> 00:15:08,960 And then after the parentheses, we'll just put the word items. 246 00:15:08,990 --> 00:15:10,820 So let's see if that works. 247 00:15:10,870 --> 00:15:15,620 Okay, so we get subtotal two items right now under the age. 248 00:15:16,460 --> 00:15:18,160 And we want the price here. 249 00:15:18,170 --> 00:15:25,520 So what we'll do is we'll have a money sign and then let's once again reduce or add reduce to the cart 250 00:15:25,520 --> 00:15:26,510 items. 251 00:15:26,900 --> 00:15:28,760 So reduce. 252 00:15:28,760 --> 00:15:34,160 And we're going to do the same thing where we pass in accumulator and. 253 00:15:34,770 --> 00:15:36,600 The current item. 254 00:15:37,970 --> 00:15:43,910 And then we want to take the accumulator, we want to add the item dot quantity, but we want to get 255 00:15:43,910 --> 00:15:46,850 the price this time, not just the total numbers. 256 00:15:46,850 --> 00:15:53,510 So we're going to multiply that by item dot price and then set zero as the default. 257 00:15:53,510 --> 00:15:55,790 And then we want two decimal places. 258 00:15:55,790 --> 00:16:03,290 So after this parentheses, let's say two fixed and pass in two here. 259 00:16:03,860 --> 00:16:06,210 So we can save that and check it out. 260 00:16:06,230 --> 00:16:08,510 So we get 979. 261 00:16:10,170 --> 00:16:11,760 Which looks to be right. 262 00:16:12,620 --> 00:16:13,370 Okay. 263 00:16:14,210 --> 00:16:19,280 And let's just test if we do add another quantity, like let's say we add another mouse here. 264 00:16:20,000 --> 00:16:21,890 So if I do that. 265 00:16:23,600 --> 00:16:24,090 Actually. 266 00:16:24,230 --> 00:16:24,550 Wait a minute. 267 00:16:24,560 --> 00:16:26,480 I want to choose two for this. 268 00:16:26,780 --> 00:16:31,100 So if I do that, I get two here, and that updates the price. 269 00:16:32,420 --> 00:16:33,650 Okay, Now let's see. 270 00:16:33,680 --> 00:16:38,240 Under the price we're going to have or under the list group item, we're going to have another list 271 00:16:38,240 --> 00:16:39,230 group item. 272 00:16:39,900 --> 00:16:42,240 So list group dot item. 273 00:16:42,240 --> 00:16:46,500 And this is where we want our checkout or proceed to checkout button. 274 00:16:46,500 --> 00:16:48,090 So let's add button. 275 00:16:49,310 --> 00:16:51,770 And we'll say proceed. 276 00:16:52,400 --> 00:16:54,380 To check out. 277 00:16:55,130 --> 00:16:56,000 And the button. 278 00:16:56,000 --> 00:16:58,280 We're just going to give this a couple things here. 279 00:16:58,280 --> 00:17:00,950 So let's say type equals button. 280 00:17:01,620 --> 00:17:03,960 And then let's add a class name. 281 00:17:05,290 --> 00:17:07,930 Of BTN Dash Block. 282 00:17:08,589 --> 00:17:10,720 And I want it to be disabled. 283 00:17:10,720 --> 00:17:14,079 If there's if there's nothing if there's no car items. 284 00:17:14,079 --> 00:17:25,089 So we can do that by setting the disabled attribute to an expression of cart items dot length. 285 00:17:25,119 --> 00:17:29,630 If that is equal to zero, then we want this to be disabled. 286 00:17:29,650 --> 00:17:31,270 So let's save that. 287 00:17:31,270 --> 00:17:34,030 And now we have our proceed to checkout. 288 00:17:34,570 --> 00:17:34,810 Okay. 289 00:17:34,840 --> 00:17:37,720 If we click that, that's not going to do anything at the moment. 290 00:17:38,110 --> 00:17:39,820 We'll handle that later. 291 00:17:39,820 --> 00:17:43,180 But I just want to get everything displayed here. 292 00:17:43,510 --> 00:17:46,330 Now the quantity will display, right? 293 00:17:46,330 --> 00:17:51,010 If we go somewhere else, like if we go to the page and we change the quantity. 294 00:17:51,170 --> 00:17:52,750 If I change it to three. 295 00:17:54,410 --> 00:17:55,730 Then it shows here. 296 00:17:55,730 --> 00:18:00,550 But if I change it here to two, you can see it's not even changing. 297 00:18:00,560 --> 00:18:07,160 So what I want to happen is when I select a quantity from here, I want it to actually call add to cart 298 00:18:07,160 --> 00:18:10,010 and then change the quantity to whatever I choose. 299 00:18:10,010 --> 00:18:16,220 So the way that we can do that is by just adding on to where we have our quantity control. 300 00:18:16,220 --> 00:18:17,450 So right here. 301 00:18:18,820 --> 00:18:19,540 Let's see. 302 00:18:19,540 --> 00:18:24,880 So on the form control element, where we have the on change. 303 00:18:26,160 --> 00:18:30,540 Let's let's have this call. 304 00:18:30,540 --> 00:18:31,680 Let's say Add. 305 00:18:32,930 --> 00:18:34,850 Add to cart handler. 306 00:18:35,780 --> 00:18:36,170 All right. 307 00:18:36,170 --> 00:18:38,780 And then that's going to take in. 308 00:18:39,590 --> 00:18:47,210 The item and it's going to take in whatever the value is which we can get with e dot target dot value. 309 00:18:47,210 --> 00:18:49,370 But I just want to make sure that that's a number. 310 00:18:49,370 --> 00:18:51,200 So I'm going to wrap it in number. 311 00:18:51,200 --> 00:18:55,160 So e dot target dot value. 312 00:18:57,030 --> 00:18:57,420 All right. 313 00:18:57,450 --> 00:19:01,470 Now we have to create this add to cart handler. 314 00:19:01,470 --> 00:19:03,090 So let's go up here. 315 00:19:04,200 --> 00:19:06,770 And we'll put this right here. 316 00:19:06,780 --> 00:19:11,550 Let's say const add to cart handler. 317 00:19:15,390 --> 00:19:16,650 Okay. 318 00:19:17,100 --> 00:19:17,790 Actually, I'm sorry. 319 00:19:17,790 --> 00:19:19,830 It's not going to take in the event. 320 00:19:19,860 --> 00:19:27,330 What this is going to take in is going to be the item or we'll say product and then the quantity. 321 00:19:27,330 --> 00:19:30,360 So Q, T, and I'm going to make this async. 322 00:19:31,260 --> 00:19:35,040 And what I want to do is dispatch the add to cart. 323 00:19:35,070 --> 00:19:37,350 Remember in our reducer. 324 00:19:38,780 --> 00:19:40,880 Or I should say in our slice. 325 00:19:41,390 --> 00:19:41,930 Let's see. 326 00:19:41,960 --> 00:19:43,160 Cart, slice. 327 00:19:43,890 --> 00:19:45,540 We have this add to cart. 328 00:19:45,870 --> 00:19:49,180 So I want to use that now in order to use that. 329 00:19:49,200 --> 00:19:50,190 We have to bring it in. 330 00:19:50,190 --> 00:19:54,360 So let's go back to our cart screen and let's say import. 331 00:19:56,240 --> 00:20:00,740 Add to cart and that's going to be from our cart slice. 332 00:20:01,900 --> 00:20:02,320 All right. 333 00:20:02,320 --> 00:20:03,640 And then let's see. 334 00:20:03,640 --> 00:20:05,530 Back in our add to cart handler. 335 00:20:05,530 --> 00:20:07,450 We already have our dispatch. 336 00:20:07,840 --> 00:20:08,200 Okay. 337 00:20:08,200 --> 00:20:10,150 We use to use dispatch hook. 338 00:20:10,150 --> 00:20:14,050 So we're now able to dispatch our action, our add to cart. 339 00:20:14,350 --> 00:20:21,610 So we're going to do that right here, let's say dispatch and we're going to pass in here add to Cart. 340 00:20:22,450 --> 00:20:29,170 And we're just going to pass in an object where we spread across the product that was passed in and 341 00:20:29,170 --> 00:20:31,240 pass in the quantity. 342 00:20:34,120 --> 00:20:36,230 And I think that should do it. 343 00:20:36,260 --> 00:20:37,300 Let's save it. 344 00:20:38,620 --> 00:20:39,190 Okay. 345 00:20:39,190 --> 00:20:43,000 And then now if I change this, let's say to. 346 00:20:43,760 --> 00:20:49,330 See how that changed to two now and it changed my total items to three. 347 00:20:49,340 --> 00:20:53,180 If I change this to one changes my total items to one. 348 00:20:53,180 --> 00:20:55,220 So I'm changing the state. 349 00:20:56,180 --> 00:20:56,510 Right. 350 00:20:56,510 --> 00:20:58,580 And we can see that down here. 351 00:20:58,580 --> 00:21:04,400 If I open up, let's see, let's go to our redux Dev Tools. 352 00:21:05,840 --> 00:21:08,930 And I want to see I want to be able to see this. 353 00:21:09,290 --> 00:21:10,820 So if we look at the cart. 354 00:21:13,680 --> 00:21:15,060 We look at the price right there. 355 00:21:15,060 --> 00:21:17,820 If I change the quantity, let's go back to two. 356 00:21:17,850 --> 00:21:19,920 You can see that the price changed. 357 00:21:21,580 --> 00:21:23,920 Right, if you look at the cart items. 358 00:21:25,970 --> 00:21:28,340 So we should see the quantity here. 359 00:21:29,670 --> 00:21:30,180 Right there. 360 00:21:30,180 --> 00:21:31,230 Quantity too. 361 00:21:31,260 --> 00:21:34,950 If I change this to four it updates in the state. 362 00:21:35,280 --> 00:21:38,100 So that's exactly what we want to happen. 363 00:21:39,330 --> 00:21:39,720 Okay. 364 00:21:39,720 --> 00:21:44,610 Now the next thing that I want to do in the last thing for now when it comes to the card is I want to 365 00:21:44,610 --> 00:21:46,290 be able to remove the item. 366 00:21:46,290 --> 00:21:48,360 So we're going to do that in the next video.