1 00:00:00,350 --> 00:00:06,200 Okay, so now we want to use the add to cart function that we just created in the slice and we want 2 00:00:06,200 --> 00:00:08,280 to use it from our product screen, right? 3 00:00:08,330 --> 00:00:11,510 Because that's where we have the add to cart button. 4 00:00:11,510 --> 00:00:13,240 Now there's a few things we need to do. 5 00:00:13,250 --> 00:00:16,490 We need to bring in that add to cart action. 6 00:00:16,490 --> 00:00:21,590 We also have to add a quantity select because right now we don't have one. 7 00:00:21,920 --> 00:00:24,380 So let's, let's deal with that first. 8 00:00:24,380 --> 00:00:28,400 So the quantity is going to be kept in in component state. 9 00:00:28,400 --> 00:00:32,390 So let's say import use state. 10 00:00:32,930 --> 00:00:35,420 And we'll create down here. 11 00:00:35,420 --> 00:00:35,990 Let's see. 12 00:00:35,990 --> 00:00:36,920 We'll go. 13 00:00:38,430 --> 00:00:46,920 Let's go right under here and let's add our const and she will be the state and then set. 14 00:00:47,010 --> 00:00:51,360 She will be the function to change that state. 15 00:00:51,390 --> 00:00:53,430 We want to set that to use state. 16 00:00:53,430 --> 00:00:58,140 And the default the default for that is going to be one. 17 00:00:58,890 --> 00:00:59,250 Okay. 18 00:00:59,250 --> 00:01:01,770 Now we need to have the output, the quantity. 19 00:01:01,800 --> 00:01:02,670 Select output. 20 00:01:02,670 --> 00:01:04,379 So let's come down here. 21 00:01:05,400 --> 00:01:07,980 And where are we going to put this? 22 00:01:09,630 --> 00:01:11,100 Let's go. 23 00:01:14,570 --> 00:01:19,190 I don't have a placeholder for it, so I need to figure out exactly where this goes. 24 00:01:20,480 --> 00:01:22,430 Um, so we have status in stock. 25 00:01:22,430 --> 00:01:24,230 Probably right above the button. 26 00:01:24,260 --> 00:01:24,740 Yeah. 27 00:01:24,740 --> 00:01:28,280 So where we have this button inside the list, group item. 28 00:01:28,280 --> 00:01:29,690 Let's put it right there. 29 00:01:29,960 --> 00:01:30,980 Now. 30 00:01:32,190 --> 00:01:36,650 We only want this to show if the product is in stock. 31 00:01:36,660 --> 00:01:40,410 So let's open up some curly braces here. 32 00:01:40,410 --> 00:01:56,130 And let's say if the product dot count count in stock is greater than zero, then we want to show this. 33 00:01:56,130 --> 00:02:01,470 So open up some parentheses and then in our parentheses we'll do a list group. 34 00:02:02,420 --> 00:02:05,720 So let's say list group and then dot item. 35 00:02:07,700 --> 00:02:11,120 And then in the list item, let's do row. 36 00:02:12,230 --> 00:02:18,500 And in the row we'll have our first column, which will just have like the label or whatever, the heading. 37 00:02:18,500 --> 00:02:23,960 So we'll say qty for the quantity and then we'll do another call. 38 00:02:24,620 --> 00:02:30,410 And then inside that call is where we want the the actual form control. 39 00:02:30,410 --> 00:02:32,360 So we'll say form dot. 40 00:02:33,120 --> 00:02:37,290 Control, and this is going to have a few attributes on it. 41 00:02:37,320 --> 00:02:38,100 Few props. 42 00:02:38,100 --> 00:02:41,520 First is going to be as and we want this to be a select list. 43 00:02:41,520 --> 00:02:47,910 So we're going to say as select and then the value is going to be the quantity and the state, which 44 00:02:47,910 --> 00:02:49,110 is qty. 45 00:02:50,590 --> 00:02:51,040 Okay. 46 00:02:51,040 --> 00:02:53,830 And then we want to have an on change. 47 00:02:54,900 --> 00:02:56,430 So on change. 48 00:02:56,430 --> 00:02:58,470 We're going to set that to. 49 00:02:59,430 --> 00:03:03,930 Uh, function pass in our event parameter here. 50 00:03:03,930 --> 00:03:11,130 And then what we want that to do is call set qty because we're going to update the quantity and we want 51 00:03:11,130 --> 00:03:12,510 to make sure it's a number. 52 00:03:12,510 --> 00:03:15,390 So let's use number. 53 00:03:15,970 --> 00:03:20,410 And then pass in our E dot target dot value. 54 00:03:20,410 --> 00:03:22,840 So that will be whatever we select. 55 00:03:23,850 --> 00:03:26,640 So that's the form control open. 56 00:03:26,640 --> 00:03:30,540 And then inside the form control or I should say it's a select list. 57 00:03:30,540 --> 00:03:37,140 Since we have as select, we want to have a select list of numbers, but we only want the numbers to 58 00:03:37,140 --> 00:03:39,410 go up to whatever the quantity is, right? 59 00:03:39,420 --> 00:03:44,640 So let's say we have five in stock, we have a quantity of or we have five in stock. 60 00:03:44,670 --> 00:03:52,290 If we're if we allow the user to select ten quantity and go through the process and pay for ten, that's 61 00:03:52,290 --> 00:03:53,430 going to be a problem, right? 62 00:03:53,430 --> 00:03:55,440 Because we don't have ten in stock. 63 00:03:55,440 --> 00:04:02,100 So you don't want to just make the quantity, just an input value where they can put anything unless 64 00:04:02,130 --> 00:04:06,780 of course, you're a huge company and you can just provide as many as someone orders. 65 00:04:07,020 --> 00:04:07,830 But we're not. 66 00:04:07,860 --> 00:04:11,220 This is this is made to be like a small shop. 67 00:04:11,220 --> 00:04:17,310 So what we can do is open up some curly braces and we're going to have we're going to create an array. 68 00:04:17,310 --> 00:04:23,100 So in the in the curly braces, we're going to have some brackets and then I'm going to use the spread 69 00:04:23,200 --> 00:04:25,660 operator and the array constructor. 70 00:04:25,660 --> 00:04:31,060 And then inside that we want the product. 71 00:04:31,240 --> 00:04:35,140 So we'll say product dot and then the count in stock. 72 00:04:35,170 --> 00:04:37,240 Let me just close that sidebar up. 73 00:04:37,240 --> 00:04:43,540 So the count in stock and then outside of the parentheses we're going to use the dot keys method. 74 00:04:43,900 --> 00:04:44,260 All right. 75 00:04:44,260 --> 00:04:53,740 So what this is doing is this this array is creating an array with the length of the however many products 76 00:04:53,740 --> 00:04:54,970 are in stock. 77 00:04:55,120 --> 00:04:59,170 And the Keys method is used to create an array of indexes. 78 00:04:59,200 --> 00:05:01,270 Now the indexes start at zero. 79 00:05:01,270 --> 00:05:08,020 So we want to make sure that when we have the options we use, we add one to that because we don't want 80 00:05:08,470 --> 00:05:10,870 zero as an option for quantity. 81 00:05:11,110 --> 00:05:11,470 All right. 82 00:05:11,500 --> 00:05:15,670 Now this everything in brackets, like I said, this creates the array. 83 00:05:15,670 --> 00:05:18,040 In fact, we could probably just. 84 00:05:19,690 --> 00:05:23,370 Um, I just want to show you what this actually gives us. 85 00:05:23,380 --> 00:05:25,480 So if I were to just. 86 00:05:26,550 --> 00:05:27,720 Come up here. 87 00:05:28,850 --> 00:05:29,870 And let's. 88 00:05:30,960 --> 00:05:32,220 Go right above the return. 89 00:05:32,220 --> 00:05:36,840 I just want to do a console log of that so you can see exactly what that gives us. 90 00:05:36,840 --> 00:05:38,430 Form is not defined. 91 00:05:38,460 --> 00:05:41,430 We just need to bring form in from React Bootstrap. 92 00:05:43,300 --> 00:05:43,660 All right. 93 00:05:43,660 --> 00:05:47,520 And then let's let's open up the console to see what we get here. 94 00:05:47,530 --> 00:05:49,330 So we have an array. 95 00:05:49,940 --> 00:05:52,690 That is zero through nine. 96 00:05:52,700 --> 00:05:54,050 It has ten in it. 97 00:05:54,050 --> 00:05:54,680 Right. 98 00:05:54,800 --> 00:05:57,950 So I'm guessing this has a quantity of ten. 99 00:05:58,280 --> 00:05:59,630 I'm sorry, not a quantity. 100 00:05:59,660 --> 00:06:03,370 A product in stock of ten for the headphones. 101 00:06:03,380 --> 00:06:10,130 So to check that, I don't think we have that output here, but we could check just by going to our. 102 00:06:11,090 --> 00:06:12,950 Back in data products. 103 00:06:12,950 --> 00:06:15,140 And if we look at the headphones. 104 00:06:18,310 --> 00:06:18,970 Oh, that's not it. 105 00:06:18,970 --> 00:06:19,600 Right here. 106 00:06:19,600 --> 00:06:19,990 Yeah. 107 00:06:20,020 --> 00:06:21,160 Count in stock ten. 108 00:06:21,160 --> 00:06:25,870 So you can see we're getting now in a ten item array, although it starts at zero. 109 00:06:25,870 --> 00:06:28,360 So remember, we do have to add one on to that. 110 00:06:28,750 --> 00:06:29,080 Okay. 111 00:06:29,080 --> 00:06:34,870 Now, I just wanted to show you what that expression gives us, because it's kind of it's kind of tough 112 00:06:34,870 --> 00:06:37,120 to really understand what's going on here. 113 00:06:37,120 --> 00:06:43,900 So that gives us an array of zero through 10 or 0 through nine in the case where there's ten in stock. 114 00:06:43,900 --> 00:06:49,510 So what we want to do is map through this array that I just showed you. 115 00:06:49,510 --> 00:06:56,260 So dot map and we'll say for each we'll call it X and then what? 116 00:06:56,260 --> 00:06:57,670 We want to return. 117 00:06:59,770 --> 00:07:03,790 Um, is going to be the option tags. 118 00:07:04,440 --> 00:07:05,970 So option. 119 00:07:08,610 --> 00:07:10,820 And we need to add a key to this. 120 00:07:10,830 --> 00:07:16,950 Let's say key equals and we're going to use X, but we're going to add one because remember, it starts 121 00:07:16,950 --> 00:07:20,640 at zero and then we'll do the same for the value. 122 00:07:20,640 --> 00:07:26,730 Let's say value of the option is going to be X plus one. 123 00:07:28,870 --> 00:07:29,290 Okay. 124 00:07:29,290 --> 00:07:34,930 And then inside the option, which is going to be the text that's shown, is also going to be. 125 00:07:35,640 --> 00:07:38,270 I don't like how this is aligning, but whatever. 126 00:07:38,280 --> 00:07:39,660 X plus one. 127 00:07:40,260 --> 00:07:41,730 All right, so let's save that. 128 00:07:41,730 --> 00:07:45,000 And if we come over here, we see one. 129 00:07:45,000 --> 00:07:48,150 And then if I click in there, we see one through ten. 130 00:07:49,160 --> 00:07:49,540 Okay. 131 00:07:49,550 --> 00:07:54,770 Again, make sure you put the plus one because if you just put X, then it's going to be zero through 132 00:07:54,770 --> 00:07:58,670 nine because that's what that that's what this array that we created gives us. 133 00:07:58,970 --> 00:08:01,200 So make sure you have that plus one. 134 00:08:01,220 --> 00:08:07,550 Now, if I go to another product, like let's say this camera, now we have the quantity options of 135 00:08:07,550 --> 00:08:10,250 one through five because there's only five in stock. 136 00:08:10,430 --> 00:08:16,310 This echo dot has no it's out of stock, so we don't even show the quantity. 137 00:08:16,670 --> 00:08:22,640 So you have to think of a lot of different situations when you're creating an application like this. 138 00:08:22,850 --> 00:08:28,970 So now that we have that, we have this, the quantity select, and when we actually select one, it 139 00:08:28,970 --> 00:08:32,500 should go into the component state, right? 140 00:08:32,510 --> 00:08:39,020 And we can check that if we use the react, not the redux, but the react. 141 00:08:39,840 --> 00:08:41,070 Extension here. 142 00:08:42,120 --> 00:08:43,650 And let's see. 143 00:08:46,460 --> 00:08:47,240 Right here. 144 00:08:47,900 --> 00:08:49,370 That's the props. 145 00:08:53,560 --> 00:08:54,460 Where would that be? 146 00:08:54,460 --> 00:08:55,810 That would be in. 147 00:08:59,230 --> 00:09:00,970 What component is that? 148 00:09:01,630 --> 00:09:02,470 Oh, it's just the. 149 00:09:02,730 --> 00:09:03,610 The screen. 150 00:09:03,610 --> 00:09:05,980 So where is this product screen? 151 00:09:07,840 --> 00:09:10,030 Right here, product screen and there it is. 152 00:09:10,030 --> 00:09:12,160 So in the state we have five. 153 00:09:12,160 --> 00:09:16,990 If I change that to seven, then that changes to seven as well. 154 00:09:17,020 --> 00:09:17,560 Good. 155 00:09:17,560 --> 00:09:20,380 So now we need to have our handler. 156 00:09:20,380 --> 00:09:23,050 So let's go down to the button. 157 00:09:23,780 --> 00:09:26,150 And let's add a handler to this. 158 00:09:26,150 --> 00:09:36,710 So we're going to say on click, then we want to call, let's say add to cart handler, which we haven't 159 00:09:36,710 --> 00:09:37,460 created yet. 160 00:09:37,460 --> 00:09:38,780 So we'll do that now. 161 00:09:38,780 --> 00:09:40,940 So up up at the top here. 162 00:09:43,630 --> 00:09:43,950 Let's see. 163 00:09:43,960 --> 00:09:45,100 What do we want to put this in? 164 00:09:45,100 --> 00:09:47,260 Let's go right under the quantity here. 165 00:09:48,160 --> 00:09:48,550 Uh, no. 166 00:09:48,550 --> 00:09:49,390 We'll go. 167 00:09:49,570 --> 00:09:51,280 Yeah, right under the quantity. 168 00:09:52,010 --> 00:09:55,070 And let's say const ad. 169 00:09:55,740 --> 00:09:58,020 Two cart handler. 170 00:10:01,460 --> 00:10:01,970 Okay. 171 00:10:01,970 --> 00:10:08,900 And then what we're going to want to do in our handler is call the add to cart action that we created 172 00:10:08,900 --> 00:10:10,760 in the last video. 173 00:10:10,760 --> 00:10:12,830 So we need to bring that in. 174 00:10:12,950 --> 00:10:15,680 So let's say import. 175 00:10:16,740 --> 00:10:20,220 Add to Cart. 176 00:10:21,000 --> 00:10:21,600 Actually. 177 00:10:21,600 --> 00:10:23,250 Where do we bring this in from? 178 00:10:23,250 --> 00:10:24,660 Its slices. 179 00:10:26,130 --> 00:10:26,580 What is it? 180 00:10:26,580 --> 00:10:32,760 Slices slash and the cart slice so import add to cart from. 181 00:10:33,670 --> 00:10:36,150 Dot, dot slash slices. 182 00:10:36,160 --> 00:10:38,050 Slash cart. 183 00:10:38,050 --> 00:10:38,860 Slice. 184 00:10:40,430 --> 00:10:41,280 I'm going to bring that in. 185 00:10:41,290 --> 00:10:43,480 We also want to bring in. 186 00:10:44,620 --> 00:10:47,320 Um use navigate from the router. 187 00:10:47,320 --> 00:10:50,980 So along with use params let's bring in use navigate. 188 00:10:53,470 --> 00:10:56,500 And then let's initialize that. 189 00:10:57,040 --> 00:11:01,810 We also need use dispatch because we can't call add to Cart directly. 190 00:11:02,260 --> 00:11:02,620 Okay. 191 00:11:02,620 --> 00:11:06,730 We actually have to we have to call dispatch it. 192 00:11:06,730 --> 00:11:09,250 So dispatch is from React Redux. 193 00:11:09,250 --> 00:11:10,960 So we need to bring that in as well. 194 00:11:10,970 --> 00:11:13,510 Let's see, Do we bring anything in from that yet? 195 00:11:13,540 --> 00:11:14,590 No, we didn't. 196 00:11:14,590 --> 00:11:21,070 So we'll go right here and say import and we want to bring in use dispatch. 197 00:11:22,180 --> 00:11:24,610 And that's going to be from React Redux. 198 00:11:24,970 --> 00:11:31,060 And then we'll go right under where we create, where we get the ID from the URL and let's say const 199 00:11:31,060 --> 00:11:36,370 dispatch equals use dispatch. 200 00:11:36,370 --> 00:11:39,040 And then we also need to initialize the navigate. 201 00:11:39,040 --> 00:11:41,080 So const, navigate. 202 00:11:41,860 --> 00:11:43,330 Equals use. 203 00:11:43,750 --> 00:11:44,860 Navigate. 204 00:11:47,020 --> 00:11:47,350 All right. 205 00:11:47,350 --> 00:11:52,810 So now in the add to cart handler, I want to dispatch that add to cart action. 206 00:11:52,810 --> 00:11:54,580 So let's say dispatch. 207 00:11:55,620 --> 00:11:58,110 And then we can pass in here. 208 00:11:58,850 --> 00:12:00,350 An object. 209 00:12:00,970 --> 00:12:05,260 And I'm sorry, not an object I'm going to pass in. 210 00:12:06,810 --> 00:12:07,830 Add to Cart. 211 00:12:09,450 --> 00:12:15,330 And then pass an object into that because what we want to send is the product. 212 00:12:15,330 --> 00:12:19,920 So we're going to use a spread operator and the product. 213 00:12:20,970 --> 00:12:24,810 Okay, which we're getting from our query. 214 00:12:24,810 --> 00:12:26,520 We should probably put this below that. 215 00:12:26,520 --> 00:12:27,420 Actually. 216 00:12:27,420 --> 00:12:29,850 Let's take the handler and let's put it. 217 00:12:31,180 --> 00:12:33,520 Right above the return like that. 218 00:12:34,350 --> 00:12:34,830 All right. 219 00:12:34,830 --> 00:12:36,110 So we're passing the product. 220 00:12:36,120 --> 00:12:38,280 We also want to pass in the quantity. 221 00:12:38,280 --> 00:12:39,510 So q t. 222 00:12:42,310 --> 00:12:49,540 And yeah, and then we just want to navigate to the cart, which we don't have that route or that page 223 00:12:49,540 --> 00:12:52,530 yet, but we'll just, we'll navigate to it anyways. 224 00:12:52,540 --> 00:12:53,650 So navigate. 225 00:12:53,650 --> 00:12:56,290 And we want to go to slash cart. 226 00:12:57,940 --> 00:12:58,600 And. 227 00:13:00,470 --> 00:13:02,180 And I think that should do it. 228 00:13:02,180 --> 00:13:10,130 So if we come back over here and let's say we want to add to Cart, so it brings us to slash cart, 229 00:13:10,130 --> 00:13:11,450 which is fine. 230 00:13:11,450 --> 00:13:16,070 This isn't showing because we haven't created it yet, but let's open up our redux state. 231 00:13:19,840 --> 00:13:22,480 And if we look in our cart. 232 00:13:24,050 --> 00:13:29,330 And you look in cart items you should have well, if you depends on what you did. 233 00:13:29,360 --> 00:13:32,480 But I have one item here. 234 00:13:33,930 --> 00:13:35,880 And let's see, I. 235 00:13:36,650 --> 00:13:37,760 Chose to. 236 00:13:37,790 --> 00:13:40,100 So I should have the price of two. 237 00:13:40,400 --> 00:13:41,090 Items. 238 00:13:41,090 --> 00:13:42,590 Price 179. 239 00:13:42,590 --> 00:13:43,850 How much is this? 240 00:13:44,860 --> 00:13:45,640 89. 241 00:13:45,640 --> 00:13:46,330 So I have. 242 00:13:46,380 --> 00:13:46,690 Yeah. 243 00:13:46,870 --> 00:13:47,970 So I have to. 244 00:13:47,980 --> 00:13:48,880 In here. 245 00:13:49,660 --> 00:13:53,230 And then we have the tax price, which is 15%. 246 00:13:53,260 --> 00:13:56,620 The shipping price is zero because it's over 100. 247 00:13:56,740 --> 00:13:59,650 So the total price is 206 98. 248 00:14:01,850 --> 00:14:02,180 All right. 249 00:14:02,210 --> 00:14:08,570 Now, if I go to another product, let's say this phone right here, and I add. 250 00:14:08,600 --> 00:14:09,980 You'll see now. 251 00:14:10,670 --> 00:14:14,420 We have two products or two items in our state. 252 00:14:14,540 --> 00:14:20,060 And not only should this be in our state, but it should be in our local storage as well. 253 00:14:20,060 --> 00:14:26,120 So if we go to local storage here, you can see key cart and we can see it better down here. 254 00:14:26,820 --> 00:14:31,770 So we have two items in our cart and it has all the pricing info as well. 255 00:14:33,500 --> 00:14:33,860 All right. 256 00:14:33,860 --> 00:14:37,070 So it's working perfectly as far as I can tell. 257 00:14:37,790 --> 00:14:45,380 And just to kind of reiterate, when we click this button in our product screen, we're calling the 258 00:14:45,380 --> 00:14:53,420 add to cart handler and then we're dispatching the add to cart action, which is being exported right 259 00:14:53,420 --> 00:14:55,280 here from our slice. 260 00:14:55,280 --> 00:14:59,540 And that's going to go ahead and just calculate everything up. 261 00:14:59,540 --> 00:15:04,160 It's going to get our items and then it's going to put everything in local storage. 262 00:15:04,160 --> 00:15:08,920 And if we reload the page, it's still going to stay in our state, right? 263 00:15:08,960 --> 00:15:10,820 Our cart items are still there. 264 00:15:10,820 --> 00:15:16,370 And that's because at the beginning here, we're checking to see if there's anything in local storage. 265 00:15:16,370 --> 00:15:21,920 If it is, then it gets put in our initial state and that gets passed into our slice. 266 00:15:22,040 --> 00:15:22,370 All right. 267 00:15:22,370 --> 00:15:23,630 So hopefully that makes sense. 268 00:15:23,630 --> 00:15:30,170 And if some some of this stuff is confusing still, I think that as we move along, it will become more 269 00:15:30,170 --> 00:15:30,860 clear. 270 00:15:31,040 --> 00:15:31,430 All right. 271 00:15:31,430 --> 00:15:37,770 So what I want to do next is kind of clean up the the add to cart because there's quite a bit of code 272 00:15:37,770 --> 00:15:38,010 here. 273 00:15:38,010 --> 00:15:43,320 And I like to keep this clean, these reducer actions here. 274 00:15:43,320 --> 00:15:50,580 So we're going to create a utility file where we can do this, the calculation stuff, because some 275 00:15:50,580 --> 00:15:53,850 of this we're going to be doing in other actions as well. 276 00:15:53,850 --> 00:15:56,700 So I want to just I don't want to repeat ourselves. 277 00:15:56,700 --> 00:15:58,890 So we'll do a little bit of cleanup next.