1 00:00:00,290 --> 00:00:00,590 All right. 2 00:00:00,590 --> 00:00:06,190 So now that we're able to add a new product with sample data, now we want to be able to edit. 3 00:00:06,200 --> 00:00:10,310 Okay, So we're going to start with the back end. 4 00:00:11,000 --> 00:00:11,390 Okay. 5 00:00:11,390 --> 00:00:15,380 And there's going to be quite a bit that goes into this, including image upload. 6 00:00:15,740 --> 00:00:24,220 So the next few videos will be all about editing the product and uploading the image and so on. 7 00:00:24,230 --> 00:00:28,160 So let's go to our back end and go to controllers. 8 00:00:28,160 --> 00:00:32,240 We want to go to our product controller and we're going to create a new route. 9 00:00:32,420 --> 00:00:35,960 So let's just let's see, what should we do here? 10 00:00:35,960 --> 00:00:38,150 We'll just grab the first. 11 00:00:39,040 --> 00:00:40,360 First one here. 12 00:00:40,810 --> 00:00:42,040 Let's go under the. 13 00:00:42,830 --> 00:00:45,080 The function we created in the last video. 14 00:00:45,080 --> 00:00:52,250 And this one is going to be to update a product and it's going to be a put request. 15 00:00:53,960 --> 00:01:01,160 So let's say put and then it's going to be API slash products slash and then whatever the ID, it's 16 00:01:01,160 --> 00:01:07,880 going to be private and admin and let's call it update product. 17 00:01:10,160 --> 00:01:10,580 Okay. 18 00:01:10,580 --> 00:01:14,480 And then we can get rid of these these lines here. 19 00:01:14,480 --> 00:01:19,040 And we want to first get the the data that's coming in from the body. 20 00:01:19,040 --> 00:01:24,860 So I'm going to destructure it from request dot body and we're going to want to get the name of the 21 00:01:24,860 --> 00:01:29,120 product, the price, the description. 22 00:01:29,860 --> 00:01:36,160 The image brand category. 23 00:01:36,940 --> 00:01:40,750 And let's get count in stock. 24 00:01:40,870 --> 00:01:43,370 Okay, So those are the things you want to get from the body. 25 00:01:43,390 --> 00:01:49,810 Then we're going to find the product that we're updating. 26 00:01:49,810 --> 00:01:55,780 So find by ID, pass in request, params ID, then check for the product. 27 00:01:55,960 --> 00:02:01,120 And if it's there, then we're going to go ahead and update the fields. 28 00:02:01,120 --> 00:02:03,280 So I'm just going to go ahead and add this in. 29 00:02:03,280 --> 00:02:10,240 So product dot name is going to equal the name from the form coming in from the body, the price description, 30 00:02:10,240 --> 00:02:18,760 image brand category and the count and stock, and then we're going to save it and then respond with 31 00:02:18,760 --> 00:02:20,470 that updated product. 32 00:02:20,800 --> 00:02:21,250 Okay. 33 00:02:21,280 --> 00:02:22,210 Else. 34 00:02:22,850 --> 00:02:28,610 So if the product isn't found, then we're just going to do a 404 and say resource not found. 35 00:02:30,090 --> 00:02:30,510 All right. 36 00:02:30,510 --> 00:02:33,360 So and then let's make sure we export it. 37 00:02:33,360 --> 00:02:35,160 So update product. 38 00:02:36,130 --> 00:02:36,550 Good. 39 00:02:36,550 --> 00:02:38,230 Now we need to create a route for it. 40 00:02:38,230 --> 00:02:40,660 So let's go into our product routes. 41 00:02:42,390 --> 00:02:46,320 So product routes and let's add. 42 00:02:48,000 --> 00:02:48,510 Let's see. 43 00:02:48,510 --> 00:02:53,190 We already have a route for slash colon ID and we have a get request. 44 00:02:53,220 --> 00:02:55,110 Now let's add a put. 45 00:02:55,350 --> 00:02:59,700 So if we have a put request to that route, we want to add in the protect middleware. 46 00:02:59,730 --> 00:03:01,170 The admin middleware. 47 00:03:01,170 --> 00:03:06,090 And then the function is update product, which we also want to bring in here. 48 00:03:07,050 --> 00:03:09,360 And that should do it for the back end. 49 00:03:09,930 --> 00:03:10,230 All right. 50 00:03:10,230 --> 00:03:12,630 And that doesn't include uploading the image. 51 00:03:12,630 --> 00:03:14,220 We're going to do that in the next video. 52 00:03:14,220 --> 00:03:18,840 But let's go to our front end slice. 53 00:03:19,810 --> 00:03:22,930 So we can collapse that and let's go. 54 00:03:23,970 --> 00:03:24,900 Product. 55 00:03:24,930 --> 00:03:25,600 Products. 56 00:03:25,620 --> 00:03:27,330 API Slice. 57 00:03:28,350 --> 00:03:35,880 We'll go under our Create product and let's say update product that's going to be a mutation. 58 00:03:36,180 --> 00:03:39,630 And let's see, we're going to have a query. 59 00:03:40,830 --> 00:03:46,170 And the query is actually going to take in not just the ID but all the data. 60 00:03:46,200 --> 00:03:53,400 So let's say data and then the URL is going to have the ID in it. 61 00:03:54,120 --> 00:03:55,350 So data. 62 00:03:56,170 --> 00:03:57,670 Dot underscore ID. 63 00:03:59,230 --> 00:04:04,240 And then we have the method which is going to be put the body, which is going to be data. 64 00:04:05,790 --> 00:04:11,220 And underneath that we're going to invalidate product tags just so we clear the cache. 65 00:04:12,150 --> 00:04:15,210 Then we're going to export it. 66 00:04:15,690 --> 00:04:19,380 So let's say use update product mutation. 67 00:04:21,290 --> 00:04:22,010 Okay. 68 00:04:22,010 --> 00:04:28,760 And I just want to look at this is defined but never used product list screen. 69 00:04:30,500 --> 00:04:31,900 So let's see. 70 00:04:31,910 --> 00:04:32,500 Product list. 71 00:04:32,510 --> 00:04:33,470 Screen. 72 00:04:36,870 --> 00:04:38,040 Brand category. 73 00:04:38,040 --> 00:04:38,160 Yeah. 74 00:04:38,160 --> 00:04:39,360 I don't think we need this. 75 00:04:39,360 --> 00:04:40,290 Actually. 76 00:04:40,650 --> 00:04:43,590 I don't think we need the F eight times at least. 77 00:04:43,590 --> 00:04:44,610 At least at the moment. 78 00:04:44,610 --> 00:04:47,340 So we can get rid of that just to get rid of that warning. 79 00:04:47,610 --> 00:04:53,040 So now what we want to do is create a product edit screen. 80 00:04:53,040 --> 00:05:03,090 So in screens and then in admin we'll create a new file here called Product Edit Screen Dot JS. 81 00:05:06,360 --> 00:05:08,580 And let's just add the route for it. 82 00:05:09,480 --> 00:05:12,540 So I'm going to go to my Index.js. 83 00:05:13,700 --> 00:05:16,250 And we're going to bring that screen in. 84 00:05:16,610 --> 00:05:19,820 So import product. 85 00:05:20,560 --> 00:05:25,420 Edit screen and that's going to be an admin screen, so be sure that you add it here. 86 00:05:27,750 --> 00:05:32,280 And let's see as far as the path goes. 87 00:05:33,000 --> 00:05:35,760 We're not going to do the page number stuff yet. 88 00:05:36,510 --> 00:05:39,230 Um, that's for when we do pagination. 89 00:05:39,230 --> 00:05:41,060 For now, it's just going to be. 90 00:05:43,160 --> 00:05:46,280 Admin slash and then product. 91 00:05:46,990 --> 00:05:51,310 Slash and then the ID slash and then edit. 92 00:05:52,610 --> 00:05:53,930 Yeah, that should be right. 93 00:05:53,930 --> 00:05:58,760 So let's save that and then these should be going to the correct. 94 00:05:59,970 --> 00:06:02,310 Let's see if we click on one of these. 95 00:06:03,730 --> 00:06:04,120 Uh oh. 96 00:06:04,120 --> 00:06:04,510 You know what? 97 00:06:04,510 --> 00:06:06,220 I need to change. 98 00:06:06,340 --> 00:06:08,320 This shouldn't be product list screen. 99 00:06:08,320 --> 00:06:09,670 It should be product. 100 00:06:11,120 --> 00:06:12,680 Product edit screen. 101 00:06:14,200 --> 00:06:14,620 Yep. 102 00:06:14,620 --> 00:06:17,500 So now if we click on any one of these. 103 00:06:18,620 --> 00:06:19,730 Products. 104 00:06:20,210 --> 00:06:26,810 Any one of these edit buttons, it should take us to slash the ID, slash edit and now we're seeing 105 00:06:26,810 --> 00:06:28,580 our component, our screen. 106 00:06:29,260 --> 00:06:35,110 So from here, let's start off with just bringing in what we need. 107 00:06:37,050 --> 00:06:38,790 So we're going to import. 108 00:06:38,820 --> 00:06:42,480 We need use state and use effect. 109 00:06:43,820 --> 00:06:46,820 We're going to need a couple things from React router. 110 00:06:46,850 --> 00:06:48,320 Dom So yeah. 111 00:06:48,350 --> 00:06:51,050 Link And then let's also get. 112 00:06:52,520 --> 00:06:54,080 Use navigate. 113 00:06:55,030 --> 00:07:02,890 And let's get use params because we do have to get the ID from the URL and then let's bring in. 114 00:07:05,840 --> 00:07:09,200 Let's bring in a few things from React Bootstrap. 115 00:07:10,420 --> 00:07:14,740 So from that, we're going to need form and we're going to need button. 116 00:07:16,060 --> 00:07:19,060 And then let's import our message. 117 00:07:19,940 --> 00:07:20,990 Component. 118 00:07:21,020 --> 00:07:23,340 Let's import our loader component. 119 00:07:23,360 --> 00:07:25,040 Our form container. 120 00:07:25,340 --> 00:07:28,130 And we're going to need the toast. 121 00:07:30,010 --> 00:07:32,950 So react to testify. 122 00:07:33,460 --> 00:07:35,380 And let's bring in. 123 00:07:36,720 --> 00:07:39,450 The mutation that what is going on here? 124 00:07:39,480 --> 00:07:41,400 The mutation that we just created. 125 00:07:41,400 --> 00:07:43,770 So we're going to import use. 126 00:07:44,780 --> 00:07:47,840 Let's see, use update product mutation. 127 00:07:47,840 --> 00:07:49,790 And then I just want to check. 128 00:07:53,060 --> 00:07:54,840 What else do we need here? 129 00:07:54,860 --> 00:07:59,330 Because we're going to have to get the single product. 130 00:07:59,330 --> 00:08:03,260 So we also want the get product details query. 131 00:08:03,410 --> 00:08:05,150 So let's add that as well. 132 00:08:05,160 --> 00:08:10,190 We'll say use product details query. 133 00:08:11,490 --> 00:08:14,880 So that should be everything we need, at least for now. 134 00:08:14,880 --> 00:08:22,230 And then let's see in the component here, we need to get the correct product ID from. 135 00:08:22,230 --> 00:08:24,150 That'll get it from the URL. 136 00:08:24,150 --> 00:08:30,390 I just want to rename it though to product ID and then let's create all of our state. 137 00:08:30,390 --> 00:08:35,370 So we'll say const and we're going to want, let's see name. 138 00:08:36,130 --> 00:08:37,390 Setname. 139 00:08:37,659 --> 00:08:47,290 We're going to want price image brand category count in stock and description. 140 00:08:48,940 --> 00:08:57,880 And then let's get the data for the current product so we can do that with Const and we're going to 141 00:08:57,880 --> 00:09:00,640 use the query that we brought in. 142 00:09:01,230 --> 00:09:03,300 So let's say actually. 143 00:09:04,200 --> 00:09:10,620 Yeah, we're going to use the query, but we need curly braces here and then we'll set that to use product. 144 00:09:11,820 --> 00:09:12,650 Or is it yet. 145 00:09:12,660 --> 00:09:18,540 Yeah it's use get product details query and that's going to get passed in the product ID that we get 146 00:09:18,540 --> 00:09:19,800 from the URL. 147 00:09:19,800 --> 00:09:22,950 And then in here we can then get our data. 148 00:09:23,830 --> 00:09:26,680 Which we're going to call product. 149 00:09:27,780 --> 00:09:30,600 And then we can also get is loading. 150 00:09:33,200 --> 00:09:34,970 Yeah, product is loading. 151 00:09:34,970 --> 00:09:39,710 And then let's get refetch and let's get the error. 152 00:09:41,440 --> 00:09:41,890 Okay. 153 00:09:41,890 --> 00:09:46,600 And we can test that out now by just console logging product. 154 00:09:47,870 --> 00:09:52,940 And if we come over here and we check out our console, you'll see a couple undefined that's just while 155 00:09:52,940 --> 00:09:58,460 it's loading and then we end up with the actual product data. 156 00:09:59,710 --> 00:10:00,490 Good. 157 00:10:01,650 --> 00:10:05,640 So let's also initialize our update. 158 00:10:05,640 --> 00:10:09,450 So it's going to be from use update product mutation. 159 00:10:09,480 --> 00:10:15,480 We have our update product function, which we can call and then also is loading, which I'm going to 160 00:10:15,480 --> 00:10:17,850 rename to loading. 161 00:10:19,860 --> 00:10:21,390 Loading update. 162 00:10:22,080 --> 00:10:25,620 And we also want to initialize our navigate. 163 00:10:26,840 --> 00:10:30,200 And let's see, we want to fill the form. 164 00:10:30,200 --> 00:10:34,430 So basically we're going to have a form that's going to have all the product details. 165 00:10:34,430 --> 00:10:36,890 So we're going to add a use effect here. 166 00:10:39,060 --> 00:10:43,050 I love how copilot knows exactly what I'm about to do. 167 00:10:43,380 --> 00:10:49,890 So And the reason, by the way, the reason it's doing that is because it's looking at the first version 168 00:10:49,890 --> 00:10:52,560 of the course, and a lot of this stuff is the same. 169 00:10:54,090 --> 00:10:56,310 Well, actually, no, we didn't even use. 170 00:10:56,340 --> 00:10:58,820 We didn't even use Redux toolkit. 171 00:10:58,830 --> 00:11:02,760 But it's still knows to, like, give us this stuff, which is pretty cool. 172 00:11:02,790 --> 00:11:08,640 I know a lot of people are scared about AI and, you know, losing their jobs and stuff, which could 173 00:11:08,640 --> 00:11:10,320 be a possibility in the future. 174 00:11:10,320 --> 00:11:15,630 But in the near future, I think it's great to have these tools to work with. 175 00:11:15,630 --> 00:11:19,110 I think it makes it just makes you a more productive developer. 176 00:11:19,380 --> 00:11:22,130 But anyway, that's a that's a whole separate video. 177 00:11:22,140 --> 00:11:28,440 So in our use effect here, we'll just have the product as a dependency and we're going to check. 178 00:11:29,230 --> 00:11:30,730 For the product. 179 00:11:32,640 --> 00:11:36,270 And let's see if let's say if product. 180 00:11:37,280 --> 00:11:43,040 Then we're going to set all the state because we're fetching the product here. 181 00:11:43,190 --> 00:11:51,320 And if there's a product, we're going to then set all of our state fields to the the the fields that 182 00:11:51,320 --> 00:11:54,380 are in that product, in that object. 183 00:11:54,680 --> 00:11:55,040 All right. 184 00:11:55,070 --> 00:12:00,830 Now, down here in the output, let's we'll just make this a fragment. 185 00:12:02,240 --> 00:12:05,180 And then we're going to have a link to go back. 186 00:12:09,240 --> 00:12:13,950 So say go back and it's going to go back to admin slash product list. 187 00:12:13,950 --> 00:12:15,320 And then this. 188 00:12:15,330 --> 00:12:19,350 Yeah, the classes look okay, so we should have a go back. 189 00:12:21,390 --> 00:12:22,320 Okay, good. 190 00:12:23,210 --> 00:12:25,920 Now we're going to have our form container. 191 00:12:25,940 --> 00:12:28,490 Remember, we created that form container component. 192 00:12:28,490 --> 00:12:29,990 We're going to use that. 193 00:12:29,990 --> 00:12:35,870 And let's put an H one here, edit product, and then we're going to check the loading. 194 00:12:35,870 --> 00:12:37,850 Although we don't want is loading. 195 00:12:37,850 --> 00:12:41,930 We want to check for loading update. 196 00:12:42,960 --> 00:12:46,860 And then then we want to check for our is loading. 197 00:12:46,860 --> 00:12:49,920 So in here, let's say is loading. 198 00:12:51,420 --> 00:12:55,110 And then if that's true, then we want to show the loader. 199 00:12:56,610 --> 00:12:57,240 Else. 200 00:12:57,240 --> 00:13:01,620 If there's an error, then we want to show the message. 201 00:13:01,650 --> 00:13:06,270 Else then we want to continue on to show our form. 202 00:13:06,270 --> 00:13:14,070 So we'll have a form with we'll add the handler after let's just add a form tag and we'll have a group 203 00:13:14,070 --> 00:13:17,280 for the name and let's just end that. 204 00:13:19,220 --> 00:13:23,780 Group and then we'll have a label for the name and then our form control, which will have the type 205 00:13:23,780 --> 00:13:30,650 of name, the placeholder, the value, which is the name and the component state, and then the Onchange, 206 00:13:30,650 --> 00:13:32,420 which we'll call set name. 207 00:13:33,020 --> 00:13:36,500 And that should do it for the form control for the name. 208 00:13:36,500 --> 00:13:39,470 And you can see that it's outputting the name. 209 00:13:39,470 --> 00:13:46,340 If I go back and I go to edit, let's say the mouse here, you'll see that that will be in the field. 210 00:13:46,990 --> 00:13:54,310 So now we basically just want to copy the form group and create the rest of our fields. 211 00:13:54,490 --> 00:14:00,870 So let's go under that form group and the next one is going to be the the price. 212 00:14:00,880 --> 00:14:03,520 So we'll just change this. 213 00:14:04,150 --> 00:14:06,970 Price change that. 214 00:14:08,130 --> 00:14:11,400 Type is going to be number for this. 215 00:14:12,910 --> 00:14:14,920 And then placeholder. 216 00:14:17,280 --> 00:14:20,340 And value is going to be price. 217 00:14:20,730 --> 00:14:24,450 And then this is going to call we want this to call set price. 218 00:14:28,040 --> 00:14:28,640 Okay. 219 00:14:28,640 --> 00:14:30,230 If we save that, Take a look. 220 00:14:30,230 --> 00:14:30,800 Good. 221 00:14:32,250 --> 00:14:35,070 And then let's add another form group. 222 00:14:36,210 --> 00:14:37,920 And this one's going to be. 223 00:14:38,570 --> 00:14:40,090 For the brand. 224 00:14:40,100 --> 00:14:40,940 Actually, you know what? 225 00:14:40,940 --> 00:14:47,180 The image input is going to go here, but we're not going to do that just yet because that takes a bunch 226 00:14:47,180 --> 00:14:47,870 of extra work. 227 00:14:47,870 --> 00:14:53,450 So I'm going to put a comment here and say image input, placeholder. 228 00:14:54,460 --> 00:14:57,040 And then this one here is going to be the brand. 229 00:14:58,730 --> 00:15:00,100 So let's see. 230 00:15:00,110 --> 00:15:03,560 Get rid of that brand and the type. 231 00:15:04,470 --> 00:15:06,950 Wait, did I put type name for this one? 232 00:15:06,960 --> 00:15:07,470 I'm sorry. 233 00:15:07,470 --> 00:15:10,680 This should be type text, not name. 234 00:15:12,390 --> 00:15:15,660 And then here, say type text. 235 00:15:16,420 --> 00:15:19,000 And enter brand. 236 00:15:21,470 --> 00:15:24,380 Brand and then set brand. 237 00:15:29,640 --> 00:15:30,380 Okay. 238 00:15:30,390 --> 00:15:32,910 Then the next one is going to be the count in stock. 239 00:15:32,910 --> 00:15:37,890 And I'm just going to recopy this so I don't have the type name. 240 00:15:39,730 --> 00:15:40,000 Okay. 241 00:15:40,000 --> 00:15:42,790 So this group is going to be for account in stock. 242 00:15:42,820 --> 00:15:44,560 So let's change this. 243 00:15:44,590 --> 00:15:45,460 Actually, I'll just. 244 00:15:48,570 --> 00:15:51,600 Say count in stock. 245 00:15:52,020 --> 00:15:52,360 Okay. 246 00:15:52,380 --> 00:15:57,450 I just want to change this, though, to count space in stock. 247 00:15:58,560 --> 00:16:00,180 And then value. 248 00:16:00,180 --> 00:16:01,140 So that's correct. 249 00:16:01,140 --> 00:16:05,310 This we just want to uppercase the C and that should do it. 250 00:16:05,520 --> 00:16:06,660 Let's take a look. 251 00:16:07,320 --> 00:16:08,100 Okay. 252 00:16:10,520 --> 00:16:12,320 These are kind of close together. 253 00:16:14,550 --> 00:16:19,650 Um, maybe we should add a little bit of margin. 254 00:16:19,650 --> 00:16:21,390 So like on the form group. 255 00:16:22,040 --> 00:16:23,690 We say class name. 256 00:16:23,690 --> 00:16:26,210 Let's say MY-3. 257 00:16:26,210 --> 00:16:27,860 Let's see what that looks like. 258 00:16:30,380 --> 00:16:32,270 Or maybe let's do two. 259 00:16:34,580 --> 00:16:36,410 Yeah, so let's add that. 260 00:16:37,530 --> 00:16:39,540 To all the form groups. 261 00:16:41,130 --> 00:16:42,960 Just to give it some space. 262 00:16:48,550 --> 00:16:49,780 Yeah, it looks better. 263 00:16:49,930 --> 00:16:55,210 All right, so now I'll copy this form group again, and then the next thing after count in stock is 264 00:16:55,210 --> 00:16:57,010 going to be our category. 265 00:16:59,290 --> 00:17:03,610 And oh, and by the way, count in stock should be number. 266 00:17:05,290 --> 00:17:07,030 So now this one. 267 00:17:08,119 --> 00:17:09,950 Is going to be category. 268 00:17:11,160 --> 00:17:17,940 Let's change this to category and set category should be uppercase C. 269 00:17:18,210 --> 00:17:20,010 Type is text. 270 00:17:20,040 --> 00:17:20,460 Okay. 271 00:17:20,460 --> 00:17:21,660 That looks good. 272 00:17:21,780 --> 00:17:23,940 Category electronics. 273 00:17:24,270 --> 00:17:27,329 And then the last one is going to be the description. 274 00:17:27,329 --> 00:17:31,290 So let's go under the form group and let's change these. 275 00:17:32,120 --> 00:17:34,010 To description. 276 00:17:34,830 --> 00:17:37,080 And let's see. 277 00:17:37,140 --> 00:17:38,910 We'll get rid of this. 278 00:17:39,580 --> 00:17:40,930 Subscription. 279 00:17:42,020 --> 00:17:43,400 And. 280 00:17:44,660 --> 00:17:46,220 Set description. 281 00:17:46,250 --> 00:17:48,050 Have an uppercase D there. 282 00:17:48,770 --> 00:17:49,100 Cool. 283 00:17:49,100 --> 00:17:51,350 So now we just need the button at the bottom. 284 00:17:51,350 --> 00:17:53,180 So that's going to be under the form group. 285 00:17:53,180 --> 00:17:59,870 We're going to add our button type is going to be submit variant primary and. 286 00:18:00,650 --> 00:18:02,690 Yeah, we can add that class. 287 00:18:03,260 --> 00:18:06,350 And I'm not going to add an onClick here. 288 00:18:06,350 --> 00:18:10,460 So let's end the button and then we'll just say update for the text. 289 00:18:11,700 --> 00:18:13,890 Okay, so now we just want to be able to submit it. 290 00:18:13,890 --> 00:18:16,350 So I'm going to add on to the form. 291 00:18:17,290 --> 00:18:17,860 Let's see. 292 00:18:17,860 --> 00:18:24,520 So we have our opening form tag, we'll say on submit, and we're going to set that to, let's say, 293 00:18:24,520 --> 00:18:25,510 submit. 294 00:18:26,570 --> 00:18:30,200 Handler and we'll put that right up here. 295 00:18:30,350 --> 00:18:32,450 So const submit handler. 296 00:18:34,440 --> 00:18:37,080 And let's see what it gives us. 297 00:18:38,160 --> 00:18:40,650 Yeah, we could go ahead and go with that. 298 00:18:40,650 --> 00:18:49,770 So we're creating this object here, um, setting the underscore ID to the product ID from the URL. 299 00:18:49,980 --> 00:18:53,490 And the reason we're doing that is because in the slice, right? 300 00:18:53,490 --> 00:18:59,760 So we're using the update product from the slice, from the mutation, which is this right here. 301 00:18:59,760 --> 00:19:01,920 And it gets passed in the data. 302 00:19:02,190 --> 00:19:09,840 And here we're passing, we need to pass the ID into the URL. 303 00:19:11,890 --> 00:19:13,570 In fact, we could. 304 00:19:17,590 --> 00:19:24,700 We could just do product ID like that and then instead of underscore ID. 305 00:19:25,790 --> 00:19:28,130 Say product ID? 306 00:19:29,890 --> 00:19:32,200 Yeah, let's just do it that way. 307 00:19:32,740 --> 00:19:33,100 All right. 308 00:19:33,100 --> 00:19:40,120 And then we have our name price, image, brand category count and stock and description. 309 00:19:40,150 --> 00:19:41,440 Then. 310 00:19:43,090 --> 00:19:47,230 Let's see, we're calling update product. 311 00:19:48,760 --> 00:19:51,130 And then we'll check for the error. 312 00:19:52,230 --> 00:19:54,870 If there is, then we'll show a toast. 313 00:19:57,410 --> 00:19:58,100 Uh, else. 314 00:19:58,100 --> 00:20:03,140 Then we're just going to show a success message, and then we're going to navigate to the product list. 315 00:20:05,120 --> 00:20:05,390 Yeah. 316 00:20:05,390 --> 00:20:07,520 So I think that that that should do it. 317 00:20:09,170 --> 00:20:09,580 Um. 318 00:20:11,070 --> 00:20:12,950 Trying to see if there's anything else. 319 00:20:12,960 --> 00:20:17,880 So in the get products in our slice. 320 00:20:19,590 --> 00:20:23,070 So this right here, get products I'm going to add. 321 00:20:23,850 --> 00:20:28,200 Provide provided tags and set that to product. 322 00:20:28,200 --> 00:20:31,320 Otherwise we may have to refresh the page. 323 00:20:32,100 --> 00:20:32,520 All right. 324 00:20:32,520 --> 00:20:38,280 So now we should be able to edit products and of course we want to edit the sample one that we just 325 00:20:38,280 --> 00:20:39,120 created. 326 00:20:39,120 --> 00:20:43,950 So the workflow is you click the button, you say, Yes, I want to create a product. 327 00:20:43,950 --> 00:20:48,870 It adds this, and then you go here and then you'd change this to whatever you want. 328 00:20:48,900 --> 00:21:00,690 Let's say test product, let's say test product one price, say 1999 and brand. 329 00:21:01,050 --> 00:21:01,620 I don't know. 330 00:21:01,620 --> 00:21:06,150 We'll say Sony count and stock ten category. 331 00:21:07,050 --> 00:21:11,280 Electronics and description. 332 00:21:12,370 --> 00:21:15,790 This is the description. 333 00:21:15,790 --> 00:21:16,180 All right. 334 00:21:16,180 --> 00:21:19,780 So if we click update, we get product updated. 335 00:21:19,780 --> 00:21:23,170 And now you can see test product one 1999. 336 00:21:23,170 --> 00:21:25,000 So it updated all of the fields. 337 00:21:25,000 --> 00:21:29,620 Just make sure that they did actually get updated and that's that. 338 00:21:29,800 --> 00:21:33,640 Now we can't do anything with the image yet. 339 00:21:33,670 --> 00:21:35,860 We don't even have an image input. 340 00:21:35,860 --> 00:21:40,600 So there's going to be two steps to adding that functionality. 341 00:21:40,630 --> 00:21:45,430 First, we need a back end endpoint that will actually upload an image to the server. 342 00:21:45,430 --> 00:21:51,430 And then we also need to add the front end so that we actually have an image input, we can select it 343 00:21:51,430 --> 00:21:54,460 and then submit to that back end endpoint. 344 00:21:54,460 --> 00:21:57,370 So we're going to work on that in the next two videos.