WEBVTT 00:00.000 --> 00:05.490 Okay, now that we've got our create and edit form created, we can now look at hooking this up to our 00:05.520 --> 00:05.820 API. 00:05.850 --> 00:07.050 We've still got stuff to clean up. 00:07.050 --> 00:09.690 If you come into the create and you see preview of image. 00:09.720 --> 00:10.290 Sure. 00:10.320 --> 00:14.790 That's something that needs to be corrected inside here because that's a hangover from what we've done. 00:14.790 --> 00:21.720 But we haven't finished our work yet, so we'll clean this up as well as we take a look at what we're 00:21.720 --> 00:22.800 going to do next. 00:22.800 --> 00:29.910 So we need the ability to query our API so that we can either update or create. 00:30.270 --> 00:35.310 And we'll need to think about deleting a product from our API back end. 00:35.340 --> 00:36.930 So we'll head back to VS code. 00:36.930 --> 00:39.720 And this clean things up at the top. 00:39.720 --> 00:48.030 And inside our admin folder in the features folder we'll create a new file and we'll call it admin API 00:48.270 --> 00:49.260 ts. 00:49.260 --> 00:55.170 And inside here we'll follow a similar path that we did for other RK query stores as well. 00:55.170 --> 01:05.230 So we'll specify export const and we'll call it admin API equals create API, which we get from Redux, 01:05.230 --> 01:12.280 toolkit, query, react, and then we open parentheses and then curly brackets. 01:12.280 --> 01:17.170 And we'll specify the reducer path in here as admin API. 01:17.530 --> 01:19.360 We'll have a base query. 01:19.390 --> 01:22.600 Again we'll use our base query with error handling. 01:23.050 --> 01:25.570 And we'll create our endpoints. 01:25.570 --> 01:28.360 And in parentheses we specify builder. 01:30.160 --> 01:32.200 And to the right we'll add the arrow. 01:32.230 --> 01:34.480 Open parentheses open curly brackets. 01:34.480 --> 01:37.930 And then inside here we can specify our endpoints. 01:37.930 --> 01:40.540 So I'm going to have one for creating a product. 01:40.540 --> 01:45.340 So create product and we'll use builder and mutation. 01:45.610 --> 01:48.370 And we'll use products. 01:48.940 --> 01:54.970 And we'll use our create product schema as what we're passing as parameters for lists. 01:55.450 --> 01:57.670 And then we specify the query. 01:57.670 --> 02:02.410 And we'll specify data as a type of create product schema. 02:02.530 --> 02:08.520 And the arrow and open curly brackets, and then we will return more curly brackets. 02:08.520 --> 02:11.580 And the URL is going to be products. 02:12.450 --> 02:21.240 The method will be a post and the body will specify the data inside there. 02:21.240 --> 02:26.070 And below this one we will have an update product. 02:28.470 --> 02:31.740 And for this we'll use builder dot mutation. 02:32.100 --> 02:34.980 And the square brackets will specify void. 02:35.430 --> 02:41.400 And then for the parameters for this one for the void is for what we're getting back the result type. 02:41.400 --> 02:46.140 And of course for an update we don't get anything back for the parameters for this. 02:46.140 --> 02:53.070 This needs the ID as well as the data from the form as well. 02:53.070 --> 02:56.730 So we're going to specify ID as a number. 02:57.450 --> 03:02.100 And then the data is going to be the create product schema. 03:02.280 --> 03:07.910 And then we'll open parentheses after the angle bracket curly brackets. 03:07.910 --> 03:14.390 And then we'll have our query and in parentheses more curly brackets will destructure the ID and the 03:14.390 --> 03:15.230 data. 03:15.290 --> 03:20.300 And we'll add an arrow, open more curly brackets and we will return. 03:20.870 --> 03:24.410 And for the URL this is going to be products as well. 03:24.740 --> 03:28.160 And the method is going to be a puts. 03:28.160 --> 03:35.330 And then for the body we need both the data which is coming back from our create product schema. 03:35.330 --> 03:37.910 We're not using a different schema for the update. 03:37.910 --> 03:43.160 And our create product schema contains the name, description, price, so on and so forth. 03:43.160 --> 03:50.150 But we also need to include the ID with this, because that's how we're telling our API that we're going 03:50.180 --> 03:53.420 to receive this data with an ID inside here as well. 03:53.420 --> 03:56.210 So for the body we'll just send this up as an object. 03:56.210 --> 03:58.790 But we'll combine the data and the ID. 03:58.790 --> 04:02.390 So we'll use the spread operator and specify data. 04:02.390 --> 04:08.180 And then we'll append on effectively the ID as well for the body of this Request. 04:08.180 --> 04:11.090 And then we can export our two methods here. 04:11.090 --> 04:15.530 So I'm going to say export const and we'll have use create. 04:16.610 --> 04:21.530 And I'll just use the equals admin API first. 04:21.530 --> 04:29.360 So I get some autocompletion help and we'll use the use create product mutation and the use update product 04:29.360 --> 04:31.010 mutation here as well. 04:31.010 --> 04:36.110 And then we can head over to our stores as we need to update that. 04:37.370 --> 04:43.430 And inside here we'll just add another one of these API type reducers. 04:43.430 --> 04:47.030 And I'll use admin API dot reducer path. 04:47.270 --> 04:52.730 And to the right of the square brackets I'll specify admin API dot reducer. 04:52.730 --> 04:58.430 And then because it's an API type of redux thing, we also need to add the middleware as well. 04:58.460 --> 05:02.030 So I'll just say admin API dot middleware. 05:02.030 --> 05:08.780 And while it's fresh in my mind, let's go and take a look at the issue with the picture inside our 05:08.780 --> 05:13.900 form as well, because we've got this preview of an image when there's clearly not an image available. 05:13.900 --> 05:16.360 Hence the reason we're not seeing the image. 05:16.360 --> 05:21.130 And if we go back and take a look at our product form, let's address this right now. 05:21.160 --> 05:23.080 Otherwise I'm prone to forget. 05:23.080 --> 05:30.730 And inside here where we've got our watch file, this is the reason for displaying something even when 05:30.730 --> 05:32.560 nothing is available. 05:32.590 --> 05:37.450 Now I'm going to apply the fix to this, but you might want to pause the video and see if you can resolve 05:37.450 --> 05:39.880 this particular problem yourselves. 05:39.880 --> 05:43.360 Or I'm just going to demonstrate the fix for this myself now. 05:43.390 --> 05:49.630 Now the problem is the reason for this is we're just checking to see if the watch file exists, and 05:49.630 --> 05:51.460 if it does, we showed a preview. 05:51.490 --> 05:55.060 And if it doesn't, then we've got the image tag here. 05:55.690 --> 05:58.870 And we're optionally displaying the picture URL. 05:58.900 --> 06:03.190 So if we don't have the watch file then this code is executed. 06:03.190 --> 06:08.140 But if we don't have a picture URL either we're not not displaying the image tag. 06:08.140 --> 06:09.310 We still are. 06:09.310 --> 06:15.780 But the problem is that there isn't a picture to show, so we just see the what appears like an error 06:15.810 --> 06:18.210 loading the image in our browser. 06:18.210 --> 06:19.620 So two correct lists. 06:19.620 --> 06:22.500 Then we just need an additional check. 06:22.500 --> 06:27.120 So for this watch file I'm specifically going to look for the preview. 06:27.360 --> 06:31.080 And if it is available then we display this image tag. 06:31.350 --> 06:34.590 And to the right of this colon we'll do another check. 06:34.590 --> 06:39.150 And we're going to check for the products dot picture URL. 06:39.630 --> 06:41.580 Add another question mark. 06:41.580 --> 06:46.050 And if we do have the product picture URL then we display this image tag. 06:46.050 --> 06:52.410 And if we have neither then we're just going to return null instead of displaying an image tag at all. 06:52.410 --> 06:57.180 And this should have the correct result of fixing that particular problem. 06:57.180 --> 07:03.390 Now we don't see the error inside our browser and that solves that little problem. 07:03.390 --> 07:06.570 So now we have our admin API set up. 07:06.570 --> 07:13.590 Next we'll take a look at how we hook all of this in with our form submission and sending this data 07:13.620 --> 07:14.430 up to the API.