WEBVTT 00:00.000 --> 00:00.210 Okay. 00:00.240 --> 00:05.310 Our next step is to take what we have here and use this to update our product form. 00:05.310 --> 00:10.470 And inside here we're going to create a method to submit what we're doing from our form. 00:10.470 --> 00:14.550 Now we do need to think about caching as per usual with RTK query. 00:14.550 --> 00:22.950 Because once again then when we do create a product inside here in the inventory, if I cancel out of 00:22.950 --> 00:27.480 this and go back to the inventory, then this has been cached by RTK query. 00:27.510 --> 00:31.080 Now caching is local to the user's browser. 00:31.080 --> 00:39.270 And whatever we do from our admin, if we have several users viewing the catalog, then what we do as 00:39.270 --> 00:44.730 admin is not going to affect that, because what we do only affects the admin user's browser. 00:44.760 --> 00:50.250 Now, the default caching behavior for RTK query is to cache for 60s. 00:50.250 --> 00:57.900 So if an admin adds a product, then that's not going to appear in the user's browser other user's browsers 00:57.900 --> 01:03.490 until they've moved away from the catalog component or any component that uses the fence products for 01:03.490 --> 01:09.970 60s, and that's not something I'm going to worry about with this admin functionality. 01:09.970 --> 01:18.880 But what we will do is make sure that the admin inventory is updated after a product has been edited 01:18.880 --> 01:21.340 or been created. 01:21.340 --> 01:24.340 So that's what we'll aim for in this lesson. 01:24.340 --> 01:26.050 So let's go back to our product form. 01:26.050 --> 01:31.780 And in fact, in order to enable that functionality, let's just go up to our inventory page first. 01:32.380 --> 01:37.540 And there's another thing that we can use from our Use Fetch products query that we haven't used yet. 01:37.540 --> 01:41.050 And that is the fetch function. 01:41.050 --> 01:43.900 And this does what you would expect it to do. 01:43.930 --> 01:48.550 It's going to force this query to be refetched from our API. 01:48.580 --> 01:54.760 So it's just an alternative way of ensuring that we're working with the latest data rather than cached 01:54.760 --> 01:55.660 data. 01:55.660 --> 01:59.560 And where we need to use this function is inside our product form. 01:59.560 --> 02:04.850 So let's just move a couple of these things down so I don't go off the edge of the screen and we're 02:04.850 --> 02:07.130 going to pass down to our product form. 02:07.400 --> 02:09.440 Also the Refetch function. 02:09.440 --> 02:13.970 So I'm going to call it Refetch and set it equal to refetch. 02:14.900 --> 02:18.770 So this will be available inside our product form. 02:18.770 --> 02:20.570 And let's head over to the product form. 02:20.570 --> 02:22.940 We'll just add that to our props as well. 02:22.940 --> 02:24.860 So I'll specify refetch. 02:25.670 --> 02:28.460 And this takes no parameters and returns void. 02:28.460 --> 02:29.660 That's its signature. 02:29.660 --> 02:36.920 And then we'll just pass it in as an additional property inside here that we can utilize. 02:36.950 --> 02:41.150 Now another thing that I want to think about doing inside here as well is cleanup. 02:41.150 --> 02:48.950 When we create that preview URL inside here, that stays in memory until we clear it out. 02:48.980 --> 02:55.880 So we can use our Useeffect to add a cleanup function in here as well, so that we remove that created 02:55.910 --> 02:59.750 object URL when our component is no longer mounted. 02:59.780 --> 03:08.130 So below the if statement here then in order to use a cleanup function, we specify return and we provide 03:08.130 --> 03:09.300 this with a function. 03:09.300 --> 03:12.720 What do we want to happen when this component is disposed of? 03:12.810 --> 03:16.260 Well, we'll check to see if we have the watch file. 03:16.260 --> 03:23.370 And if we do then we'll use URL and revoke object's URL. 03:23.370 --> 03:27.000 And we'll pass in the watch file dot preview. 03:28.260 --> 03:32.790 And then we've got something else to add to our dependencies here which is the watch file. 03:32.790 --> 03:34.770 So we'll just add this as well. 03:34.800 --> 03:38.100 And then we can update our Onsubmit method. 03:38.100 --> 03:39.810 So we'll make this async. 03:39.840 --> 03:46.350 And then instead of console dot logging the data we'll add a try catch block inside here. 03:48.360 --> 03:51.000 And we'll check to see if we have the product. 03:51.000 --> 03:54.000 If we do have the product that means we're updating. 03:54.030 --> 03:58.680 So we need to use our hooks that we get from our admin API. 03:58.710 --> 04:09.260 So I'm going to have const in square brackets create products equals And we'll use the use create product 04:09.290 --> 04:10.460 mutation. 04:11.480 --> 04:13.190 And I'll just copy this down. 04:13.190 --> 04:17.570 And the second one can be update products. 04:17.570 --> 04:22.190 And the hook we use for this will be the use update product mutation. 04:22.190 --> 04:25.970 And then inside our try block we can check to see if we have the product. 04:25.970 --> 04:27.980 And if we do then we're updating a product. 04:27.980 --> 04:32.840 So we'll specify a weight and then update product in parentheses. 04:32.840 --> 04:40.730 And then we'll pass this as an object because we need the ID and also the data here as well that's inside 04:40.730 --> 04:41.270 our form. 04:41.270 --> 04:45.590 So we'll specify ID and set that to be the product.id. 04:45.950 --> 04:49.520 And then we'll pass it the data as the second parameter there. 04:49.520 --> 04:52.520 If we don't have a product we'll add an else statement. 04:52.520 --> 04:54.050 That means we're creating a product. 04:54.050 --> 05:00.320 And we can just use await create products and pass data in as the second parameter. 05:00.650 --> 05:07.200 Now, because we're inside our product form after we have submitted, then we will cancel the edit mode, 05:07.200 --> 05:12.120 so we'll set the edit mode to be false. 05:14.040 --> 05:21.810 And then we can use the Refetch function, which is going to go out and get the updated list of products 05:21.810 --> 05:22.980 from our API. 05:23.910 --> 05:28.740 And if we do have an error, let's just console dot log any error. 05:28.770 --> 05:35.040 So what we can also get from react hook form is something that we can use for a loading indicator if 05:35.040 --> 05:36.390 something is being submitted. 05:36.780 --> 05:41.460 So we'll actually use a loading button in here even though it is using our own API. 05:41.460 --> 05:44.340 Which means we're going to see the loading indicator at the top anyway. 05:44.340 --> 05:49.440 But just for a demonstration of this as well, because I don't think we've used it yet from our form 05:49.440 --> 05:49.740 state. 05:49.770 --> 05:56.580 We can also get the is submitting flag and we can utilize this for a loading button for instance. 05:56.580 --> 06:02.010 So let's come down to our buttons inside our form. 06:03.630 --> 06:11.170 And for this one we're going to change it to a loading button that we get from Mui lab and just make 06:11.200 --> 06:12.670 sure that has been brought in. 06:12.670 --> 06:13.240 It has not. 06:13.240 --> 06:17.680 So I'm going to add that import and let's move some of this stuff down. 06:19.930 --> 06:26.320 And I will give it the loading property and set it equal to is submitting. 06:26.320 --> 06:27.910 So is it that easy. 06:27.940 --> 06:30.040 Have we now enabled this functionality. 06:30.040 --> 06:32.080 Well we're going to have some issues. 06:32.080 --> 06:34.720 And let's go and take a look at what the issues are. 06:34.720 --> 06:38.410 And then in the next lesson we'll look at addressing those issues. 06:38.560 --> 06:40.660 And what could go wrong with this. 06:40.660 --> 06:41.830 Well let's take a look. 06:41.830 --> 06:43.990 And I'll just pick on the update one. 06:43.990 --> 06:49.090 Because obviously I don't need to fill out the entire form if I do take a look at that one. 06:49.240 --> 06:57.130 And if I edit the product and I just make a small change to angular blue boots, I set it to one and 06:57.130 --> 07:00.070 I come down here, don't change anything else, but then I click submit. 07:00.100 --> 07:01.600 What's going to happen here? 07:01.810 --> 07:04.570 Well, it looks like something happened. 07:04.600 --> 07:10.200 I got redirected back to the inventory, but my angular blue boots hasn't updated. 07:10.200 --> 07:12.960 If I refresh the page, is it just a caching issue? 07:13.710 --> 07:14.580 It appears not. 07:14.580 --> 07:17.010 That's the data that's coming back from our API. 07:17.040 --> 07:20.310 So what happened here is we failed silently. 07:21.060 --> 07:25.950 We gave the admin user the impression that something happened, but nothing really did happen. 07:25.950 --> 07:29.820 And let's go and take a closer look at exactly what happened there. 07:29.820 --> 07:33.510 So we need to open up our Chrome DevTools to get the information here. 07:33.540 --> 07:37.200 And if I click on edit again I'll just repeat what I did before. 07:37.230 --> 07:42.990 I'll change this to angular two this time just in case there's an issue with the number one. 07:42.990 --> 07:46.890 There isn't of course I'll click submit and then we'll see what happens. 07:46.920 --> 07:51.570 Okay, so what happened is we failed validation on the API. 07:51.870 --> 07:52.350 Huh. 07:52.470 --> 07:54.450 Well, how did we fail? 07:54.480 --> 07:55.140 Validation. 07:55.140 --> 07:58.200 Maybe we didn't send up the information in our request. 07:58.200 --> 07:59.220 So we've got the error. 07:59.220 --> 08:00.630 We've got the validation errors. 08:00.630 --> 08:02.160 They're all coming into our console. 08:02.160 --> 08:08.370 We're not displaying them on our form is the behavior we need to do to get validation appearing on our 08:08.370 --> 08:09.000 form. 08:09.000 --> 08:12.880 But if we want to take a closer look at the request, then we can click on this link here. 08:12.880 --> 08:15.010 And it takes us to our network tab. 08:15.010 --> 08:20.140 And then we've got our request, the failing request the one with the 400. 08:20.140 --> 08:23.800 And if we click on this then we get the full details about the request. 08:23.800 --> 08:29.860 Incredibly useful information when you're troubleshooting because the browser if we don't look at Chrome 08:29.860 --> 08:31.960 DevTools the browser doesn't tell us anything. 08:31.960 --> 08:35.950 So we absolutely need to come into here and take a look at what happened. 08:35.980 --> 08:39.760 Now we know this functionality worked in postman. 08:39.760 --> 08:42.040 We know that we've seen it working. 08:42.070 --> 08:47.170 So really what we're looking for is what's the difference between this request and a postman request. 08:47.170 --> 08:52.990 And if I take a look at the payload here, well we can see that we're sending up the brand, the description, 08:52.990 --> 08:57.880 all of the properties that we require in our update product, DTO. 08:57.910 --> 09:00.580 Yet we've still got a validation error. 09:00.580 --> 09:06.940 And if we take a look at the preview and the errors, then we can see all of the different errors inside 09:06.940 --> 09:07.180 here. 09:07.180 --> 09:08.110 Validation errors. 09:08.140 --> 09:12.190 It looks like we haven't sent anything up to our API at all. 09:12.610 --> 09:15.370 But there's a difference between what we're doing here. 09:15.400 --> 09:17.470 Versus what's happening in postman. 09:17.470 --> 09:19.960 If I go back to the headers and I take a look. 09:19.990 --> 09:25.180 At the request headers, then I'm sending up this content as application JSON. 09:25.180 --> 09:27.580 We can see that there in the content type. 09:27.580 --> 09:30.670 That's the default behavior for what we're doing. 09:31.450 --> 09:37.630 If we go back and take a look at postman and we take a look at editing a product with a file, we're 09:37.660 --> 09:40.270 sending this data up as form data. 09:40.270 --> 09:42.880 It's not going up as application JSON. 09:42.880 --> 09:49.990 And if I take a look at the console and do I have an edit inside here I've got this post request. 09:50.020 --> 09:51.460 This should suffice. 09:51.910 --> 09:58.480 And if we take a look at the content type for this one, then we can see it's multipart form data. 09:58.480 --> 10:03.130 So there's a difference between what we're doing in postman versus what we're doing in our browser. 10:03.160 --> 10:08.680 And what we'll take a look at next is how we can address that difference and ensure we send up the data 10:08.680 --> 10:11.830 from our browser using the correct format. 10:11.830 --> 10:13.450 And that's coming up next.