WEBVTT 00:00.000 --> 00:06.270 Okay, now let's see how we can actually send up our data as form data from our form rather than as 00:06.270 --> 00:06.870 JSON. 00:06.870 --> 00:08.730 So let's head back to our code. 00:08.730 --> 00:13.380 And inside here we're getting our data in from our form. 00:13.380 --> 00:19.530 And then we're just passing it pretty much directly to our update product method or create product method. 00:19.530 --> 00:22.770 But I want to send this as form data instead. 00:22.770 --> 00:24.030 So slightly different. 00:24.030 --> 00:30.300 And in order to send this as form data, let's create a helper function just above the onsubmit and 00:30.300 --> 00:40.170 I'll say const create form data equals and we'll pass in the items, which is going to be a type of 00:40.170 --> 00:41.700 create product schema. 00:41.700 --> 00:50.670 And we'll add the arrow open curly brackets and we'll specify const form data equals new form data a 00:50.670 --> 00:53.850 type that we get natively in JavaScript. 00:54.420 --> 01:01.110 And then we need to populate the form data fields with what we get from this items list. 01:01.110 --> 01:06.220 So we'll use a for loop and say const key in item. 01:06.880 --> 01:10.030 And then we'll use form data dot append. 01:10.660 --> 01:14.080 And we'll pass in the key and the item. 01:14.080 --> 01:16.570 And then in square brackets the key. 01:16.570 --> 01:21.520 And that needs to be items not item there. 01:21.520 --> 01:23.290 And we've got a complaint. 01:23.290 --> 01:26.950 And the complaint is element implicitly has an any type. 01:26.950 --> 01:33.610 Because expression of type string can't be used to index type name string description, string price 01:33.610 --> 01:34.750 number etc.. 01:34.780 --> 01:40.180 And okay so this is going to get tricky using our create product schema. 01:40.180 --> 01:44.560 Let's just try using field values and see if that solves the problem. 01:44.560 --> 01:45.580 And it does. 01:45.580 --> 01:51.160 So now that we have create form data let's try and use it inside here. 01:51.160 --> 01:54.550 So I'll say const form data inside here equals. 01:54.550 --> 01:58.990 And I'll use our create form data function and pass in the data. 01:58.990 --> 02:00.610 And it's okay with that. 02:00.610 --> 02:08.920 And let's just swap the data inside here for form data and I'll need to specify data colon form data. 02:09.490 --> 02:15.940 And we've got a type issue here because our base API is expecting this to be a type of create product 02:15.940 --> 02:16.300 schema. 02:16.300 --> 02:18.370 But it's not now it's a type of form data. 02:18.370 --> 02:18.940 That's fine. 02:18.940 --> 02:22.450 We'll fix that soon and we'll do the same for the create product. 02:22.480 --> 02:25.030 We'll just pass in form data as the parameter. 02:25.030 --> 02:27.610 And again we've got the same type issue there. 02:27.610 --> 02:30.280 So let's go across to our admin API. 02:30.310 --> 02:33.670 And we'll just change the type of the data. 02:33.940 --> 02:37.900 And instead of create product schema we'll just use form data. 02:38.170 --> 02:43.150 And we will do the same here as well and specify it form data. 02:43.900 --> 02:47.230 And one is happy one is unhappy. 02:47.230 --> 02:53.140 And the one that's unhappy is of course I've given this a type of product schema there. 02:53.170 --> 02:56.860 I just need to change that to form data as well. 02:56.860 --> 03:02.920 And also inside here we need to look at the update product because I'm using the spread operator here 03:02.920 --> 03:06.790 to append on effectively the ID to the data we're sending up. 03:06.820 --> 03:08.950 That's not going to send it up as form data. 03:08.950 --> 03:11.860 That's going to go up as something else if I use it that way. 03:11.860 --> 03:18.160 And inside here before the return statement I'll use data dot append. 03:18.220 --> 03:23.560 And I'll specify the name of ID and I'm going to set that to the id. 03:24.070 --> 03:27.310 But the ID when it's form data this has to be a string. 03:27.310 --> 03:28.780 And this is a type of number. 03:28.780 --> 03:36.250 So we'll need to use the two string here to convert the ID property to be a type of string. 03:36.250 --> 03:44.080 And then instead of the spread operator usage here, we can just send up the data for the body of this 03:44.080 --> 03:45.040 request. 03:45.040 --> 03:48.250 And we've got an unused import here that can go. 03:48.730 --> 03:51.820 And it looks like we've still got a problem inside our product form. 03:51.820 --> 03:52.990 So let's go here next. 03:52.990 --> 03:57.790 And inside the product form we've got a complaint still about the data. 03:57.790 --> 04:02.530 And of course it's telling us that type void is not assignable to type form data. 04:02.530 --> 04:06.780 And when you see this, the first thing you want to look at is where's this data coming from? 04:06.810 --> 04:09.720 If I take a look at form data, it's got voids. 04:09.750 --> 04:11.490 Why does this have void? 04:11.520 --> 04:16.230 Well, I've forgotten to return it from the method that I've created it in. 04:16.260 --> 04:18.630 So we need to return the form data. 04:18.660 --> 04:20.580 Otherwise it will return void. 04:20.580 --> 04:23.370 And then all of the errors go away. 04:23.460 --> 04:24.210 Okay. 04:24.210 --> 04:28.710 So now with that in place, because this is now a type of form data that we're passing. 04:28.740 --> 04:32.100 This is how it should be sent up to the API. 04:32.340 --> 04:33.840 Let's take a look. 04:33.870 --> 04:35.910 So we'll head back to our browser. 04:35.910 --> 04:39.840 And let's once again try and update these angular blue boots. 04:39.840 --> 04:42.060 And I'll click on the edit button. 04:42.090 --> 04:46.890 I'll change this to Angular Blue Boots one and I'll click on submit. 04:46.920 --> 04:49.380 We get a loading, we see more loading. 04:49.380 --> 04:53.220 And we can see finally we've got an update to our product. 04:53.250 --> 04:54.120 Wahoo! 04:54.150 --> 04:58.230 So a bit of an effort to get there, but let's just try and create a new product as well. 04:58.320 --> 05:04.280 And while that highlights another problem that we need to deal with because we've still got the selected 05:04.280 --> 05:07.790 products inside our component as well. 05:07.790 --> 05:15.350 So whenever quick change, we need to make where we've got our update products, or in fact we can just 05:15.350 --> 05:19.970 clear the selected products after we're successful anyway. 05:19.970 --> 05:24.080 So after the set edit mode, we'll just say set selected. 05:25.100 --> 05:27.050 Do I even have access to that here? 05:27.050 --> 05:27.620 I do not. 05:27.620 --> 05:32.990 So that's something else that we need to pass down from our inventory to our form as well. 05:32.990 --> 05:38.840 So let's see on the inventory page we've got our set selected product method. 05:38.840 --> 05:41.990 We'll need to also pass that down to our product form. 05:41.990 --> 05:46.010 So I'll use the set selected product method. 05:46.670 --> 05:51.590 And I'll set that equal to the set selected products. 05:53.090 --> 05:56.570 And then inside our product form we can make use of that. 05:56.570 --> 06:00.680 So I'll just add it as an additional thing in the props. 06:00.680 --> 06:03.770 And that takes no parameters and returns void. 06:03.770 --> 06:12.850 And then inside our submit method after the set edit mode is false, we'll set the selected and I need 06:12.850 --> 06:15.970 to bring that into my props or de-structured props as well. 06:15.970 --> 06:23.170 So I'll just add that set selected products, and then I'll use that in the on submit. 06:23.950 --> 06:25.960 And I'll set that to be null. 06:26.530 --> 06:30.190 And it does take a parameter of course. 06:31.090 --> 06:36.130 So inside here we'll set the value that's going to be a type of product. 06:36.130 --> 06:37.930 Or it's going to be null. 06:38.350 --> 06:43.000 And that will allow us to use that in our Onsubmit method. 06:43.090 --> 06:44.320 So another small change. 06:44.320 --> 06:46.780 Let's just check that is working as well. 06:46.780 --> 06:50.800 So I'll update the angular blue boots once again. 06:50.830 --> 06:53.920 I'll just change the number for simplicity to two. 06:54.250 --> 06:59.350 I'll click submit and that gets updated in our inventory. 06:59.350 --> 07:00.490 Then I'll click create. 07:00.490 --> 07:04.000 And this time we have a clean product form to work with. 07:04.000 --> 07:10.780 So I'll just say test products and select a brand and the type and the price. 07:10.780 --> 07:15.550 I'll just say 2000 and the quantity I'll just set to 100. 07:15.580 --> 07:23.860 And the description will just be this is a test product which should meet the required ten character 07:23.860 --> 07:24.280 limits. 07:24.280 --> 07:29.260 And then I'll just drop in a image for this as well. 07:29.350 --> 07:35.140 And I'll click submit and we get the final field is required. 07:35.140 --> 07:37.990 So a bit more work to do here as well. 07:38.800 --> 07:41.080 And where is that coming from as well. 07:41.080 --> 07:46.120 So if we open up our Chrome DevTools let's see if we can get access to the validation error. 07:46.210 --> 07:48.670 And we've got the objects and the message. 07:48.670 --> 07:52.180 But it's a 400 coming back from our API server. 07:52.180 --> 07:58.240 So if we take a look at this object and in the datas, then we can see that this is a validation error 07:58.270 --> 08:00.190 coming back from our API server. 08:00.190 --> 08:04.390 It's not coming back from our client side validation. 08:04.390 --> 08:11.550 So when we're converting our fields into form data, we also need to take care of this as well. 08:11.580 --> 08:15.990 So another small change we'll need to make inside here inside the Onsubmit. 08:16.410 --> 08:23.100 When we're getting our form data, then we need to get the file from our watch file and not the field 08:23.100 --> 08:25.440 values that we have inside here. 08:25.470 --> 08:32.160 So below the form data variable I'll check to see if we have a watch file. 08:32.160 --> 08:42.210 And if we do I'll use form data dot append and specify file and pass watch file as the thing that we're 08:42.210 --> 08:43.800 sending up for that. 08:43.800 --> 08:46.860 And that should solve that particular problem as well. 08:46.890 --> 08:49.020 So let's go back to the browser and take a look. 08:49.020 --> 08:53.400 We'll click on create and give this another go test products. 08:54.480 --> 09:03.090 And just pick any old brand and any old type and give it a random price and a quantity and say this 09:03.090 --> 09:04.410 is a test. 09:04.410 --> 09:05.730 Products. 09:05.730 --> 09:05.760 It's. 09:06.720 --> 09:14.040 And then I'll just drop an image in once again and I'll click submit and see what happens this time. 09:14.700 --> 09:17.100 And this time we do get success. 09:17.100 --> 09:19.860 So we should have a new product inside our inventory now. 09:19.860 --> 09:21.180 And I've called it test product. 09:21.180 --> 09:23.370 So will it be on page two. 09:23.400 --> 09:23.850 Nope. 09:23.880 --> 09:26.610 It should be on page number three. 09:26.610 --> 09:32.820 And we can see our test product is indeed available now inside our inventory. 09:32.820 --> 09:37.740 And we should be able to edit this and say Test product one and click submit. 09:37.830 --> 09:42.660 And great that is working as I would want it to. 09:42.900 --> 09:44.010 So a bit of an effort. 09:44.010 --> 09:46.860 But now we've got the ability to create and update products. 09:46.860 --> 09:49.380 The next thing on our list is the delete method. 09:49.380 --> 09:53.400 And please feel free to give this a go on your own. 09:53.400 --> 09:56.790 So pause the video and see if you can get that functionality to work. 09:56.820 --> 10:02.910 It means updating our Redux or RTK query, of course, and it means enabling that functionality in the 10:02.910 --> 10:03.390 component. 10:03.390 --> 10:07.530 So give that a go and I'll demonstrate the solution to that in the next lesson.