WEBVTT 00:00.020 --> 00:04.160 And before we deal with form submission, actually we're going to deal with the editing of a form. 00:04.190 --> 00:06.680 First of all, I was getting ahead of myself. 00:06.680 --> 00:10.310 So we also want to go back to our inventory. 00:10.310 --> 00:12.440 And I don't have a way to cancel this at the moment. 00:12.440 --> 00:14.390 So that's something else that we need to do. 00:14.630 --> 00:18.110 And let's see I'm back in the inventory. 00:18.110 --> 00:21.410 So we need to deal with this edit functionality. 00:21.410 --> 00:25.850 So we'll head back to VS code to deal with this inside our product form. 00:25.850 --> 00:28.580 And we'll store the selected product. 00:28.580 --> 00:34.370 When they click on the edit button we'll store the selected product inside local state. 00:34.370 --> 00:38.330 And then we can simply use that in our product form. 00:38.330 --> 00:40.850 So we need to do that from the inventory page. 00:40.850 --> 00:43.760 So let's open up the inventory page. 00:43.760 --> 00:46.790 And inside here we'll add some more local state. 00:46.820 --> 00:56.630 So I'll say const and selected products and set selected products equals use state. 00:56.660 --> 00:59.930 And we'll just give it an initial value of null. 01:00.050 --> 01:10.100 And we will give it a type of products or null, and we'll create a helper function here and say const 01:10.130 --> 01:16.280 handle selects products equals. 01:16.280 --> 01:20.960 And we'll pass in a product as a parameter, which is going to be a type of product. 01:21.290 --> 01:28.070 And we'll add the arrow, open curly brackets and we'll say set selected product and pass in the product. 01:28.070 --> 01:30.980 And then we're going to enable the edit mode here as well. 01:30.980 --> 01:35.330 So we'll specify set edit mode and set that to be true. 01:35.360 --> 01:42.470 And then for our product form we will pass down both the setting of the edit mode and also the product 01:42.470 --> 01:43.220 as well. 01:43.220 --> 01:49.100 And we'll pass the set edit mode function down so that we can enable our cancel button to take us back 01:49.100 --> 01:50.270 to the inventory. 01:50.270 --> 01:53.870 So we'll have set edit mode as a prop that we pass down. 01:53.870 --> 01:58.040 And we'll set that equal to set edit mode. 01:58.130 --> 02:04.130 And we'll also pass the product down and set that to be the selected Products. 02:04.880 --> 02:10.160 And then we can head over to our product form and we'll pass these in as props. 02:10.190 --> 02:17.390 So I'll say type props equals and we'll have our set edit mode. 02:18.290 --> 02:21.860 And the signature of this function is going to be the value. 02:22.280 --> 02:25.160 What are we going to set this to which is a boolean. 02:25.790 --> 02:27.770 And it returns void. 02:27.800 --> 02:33.290 And we've also got the products which is going to be a type of product. 02:33.620 --> 02:36.980 Or it's going to be null. 02:37.010 --> 02:39.620 And sometimes you'll see me adding semicolons here. 02:39.620 --> 02:42.830 But whether I add them or not is not important. 02:42.830 --> 02:43.730 It doesn't matter. 02:43.730 --> 02:44.720 We don't get any complaints. 02:44.720 --> 02:48.050 If we miss them off, we don't get any complaints if we put them in. 02:48.350 --> 02:49.940 And it's just habits really. 02:49.970 --> 02:55.280 With C sharp where you'll sometimes see me adding these even though I know they're not needed there. 02:56.030 --> 03:00.980 Then inside our product form we can specify the type we're using. 03:00.980 --> 03:08.300 So I'm going to say props and then destructure the set edit mode and the product inside here. 03:09.050 --> 03:12.290 And let's just deal with the set edit mode first of all. 03:12.290 --> 03:21.530 So down in our cancel button we'll just give this an on click and add empty parentheses and say set 03:21.530 --> 03:24.500 edit mode and set that to false. 03:24.500 --> 03:27.710 And that will take us back to the inventory of course. 03:27.830 --> 03:30.770 So we need to get our product inside here if we have it. 03:30.770 --> 03:33.860 So inside the product form. 03:33.860 --> 03:37.310 And we'll use a use effect for this effectively a side effect. 03:37.310 --> 03:40.610 When we load up our product form we'll check to see if we have the product. 03:40.610 --> 03:44.570 If we have then we're going to reset our form to use the product fields. 03:44.570 --> 03:51.410 So we'll also add another thing that we need from react hook form is the reset function. 03:51.470 --> 03:55.100 And just above the onsubmit I'm going to add the use effect. 03:55.100 --> 03:56.030 Here. 03:56.150 --> 04:00.860 We'll add its callback function and add its dependency array. 04:02.120 --> 04:04.550 And we'll check to see if we have the product. 04:04.550 --> 04:13.640 And if we do we're going to reset our form effectively to that product and for our dependencies, if 04:13.640 --> 04:17.540 we just double check what we need, we need the product and the reset here. 04:17.540 --> 04:20.030 So I'll specify product and reset. 04:20.060 --> 04:22.520 Now something else we need to think about as well. 04:22.550 --> 04:28.160 Because our products, if we go and take a look at the product type, it's not going to quite match 04:28.190 --> 04:36.050 our create product definition inside our schema because we have inside here we have the picture URL. 04:36.530 --> 04:42.620 If we take a look at our schema, we do not have a picture URL, but we do have a file. 04:42.950 --> 04:47.960 So there's a bit of a mismatch between what we're going to reset our form to and what we currently have 04:47.960 --> 04:48.950 inside our schema. 04:48.950 --> 04:51.800 So we need to make some more adjustments inside here. 04:52.190 --> 05:00.530 And not only do we need a file property, but we also need the picture URL property to help us reset 05:00.530 --> 05:01.010 the form. 05:01.010 --> 05:06.110 So I'm going to add an additional property inside here for the picture URL. 05:07.170 --> 05:10.710 And this is going to be a type of Zod string. 05:11.400 --> 05:16.710 And we're going to make it optional because we cannot make this required because there's no way that 05:16.710 --> 05:23.550 we can specify the picture URL before we've uploaded a photo when we're using the create option. 05:24.360 --> 05:28.680 But also we don't want the file to be required when we're editing the form. 05:28.680 --> 05:30.540 So we need to make a few tweaks inside here. 05:30.540 --> 05:34.650 So the file schema again I'm going to use optional for this one as well. 05:34.650 --> 05:40.650 But we still do want the validation to take place when they're creating a product. 05:41.730 --> 05:43.110 So how does that work then. 05:43.140 --> 05:46.980 Well we can refine our schema here as well. 05:46.980 --> 05:50.280 And there's a refined method that we can use to help us do this. 05:50.280 --> 05:56.100 And we can pass in our refine method as an argument, some data or the data which is going to be our 05:56.100 --> 05:57.210 form fields. 05:57.810 --> 06:04.200 And we can check and I need to put data in extra parentheses here. 06:04.200 --> 06:13.170 We'll add the arrow and then we're going to check data dot picture URL or data dot file and then add 06:13.170 --> 06:14.970 a comma, open curly brackets. 06:14.970 --> 06:26.010 And if either we do not have the picture URL or the file, then we'll provide a message and say please 06:26.670 --> 06:37.890 provide an image and we'll specify path as file as this is the field that we want them to complete. 06:38.130 --> 06:44.490 If either of these are missing, if we have the file we don't want to validate because we've met validation. 06:44.490 --> 06:50.070 If we have the picture URL, that means we're editing a product and we don't have to supply the file. 06:50.070 --> 06:53.100 So that's the idea of what we're doing inside there. 06:53.100 --> 06:59.760 And it also means because we're refining it here, we can make both of these optional above. 06:59.760 --> 07:03.930 And this is going to be the only validator for the file field. 07:04.110 --> 07:06.750 So I've still got a warning on my inventory page. 07:06.750 --> 07:14.400 And that's because I haven't used the handle select product yet and that needs to go where our edit 07:14.400 --> 07:15.570 button is. 07:15.570 --> 07:24.930 So let's go down to our buttons and the edit one will give this an onclick and we'll add the parentheses. 07:24.960 --> 07:31.050 Add the arrow and we'll say handle select products and we'll pass in the product. 07:31.950 --> 07:36.030 And the inventory page should be clean now of any errors. 07:36.030 --> 07:37.500 And it is great okay. 07:37.530 --> 07:38.880 So let's go and test. 07:38.880 --> 07:41.190 And let's just refresh this page. 07:41.190 --> 07:44.040 And what we should be able to do now is edit products. 07:44.040 --> 07:49.020 And if I click on the angular blue boots we get taken to our product details page. 07:49.020 --> 07:56.160 And I can see that I've got the details populated inside here, but I don't see the preview of the image. 07:56.160 --> 08:01.650 So we need to make a further adjustment to our form as well, so that we do display the preview of the 08:01.650 --> 08:05.640 product if we have it on the right hand side. 08:05.640 --> 08:11.370 So let's go back to our product form and select the product form inside here come down to where we're 08:11.370 --> 08:13.440 using the watch file. 08:13.440 --> 08:17.640 And inside here we'll just use a ternary instead of double ampersand. 08:17.670 --> 08:21.780 So if we have the watch file then we're going to display this image. 08:21.780 --> 08:23.730 And I'll just copy this into my clipboard. 08:23.730 --> 08:31.050 The image tag I'll add the colon, open more parentheses and paste in the image there. 08:31.590 --> 08:39.630 But instead of the watch file preview I'll specify the product dot picture URL. 08:39.630 --> 08:45.480 And what that should mean is that we see the current image of whatever product it is we're editing. 08:45.480 --> 08:46.830 So I'll click on this one. 08:46.830 --> 08:48.450 And sure enough, we do. 08:48.510 --> 08:50.700 And we'll still be able to drop an image in there. 08:50.700 --> 08:52.530 And that's going to update the preview. 08:52.530 --> 08:57.570 And then if we do submit the form, once we've hooked this up to our API, obviously the new image is 08:57.570 --> 08:58.650 going to go up then. 08:58.650 --> 09:03.810 So that's our form now complete fully editing and creation. 09:04.050 --> 09:09.720 And next we'll take a look at hooking all of this up to our API so that we can actually submit this 09:09.720 --> 09:11.370 to our back end server. 09:11.370 --> 09:12.960 And that's coming up next.