WEBVTT 00:00.020 --> 00:03.020 Okay, time to turn our attention back to the client now. 00:03.020 --> 00:05.180 And we're going to create a type for our order. 00:05.180 --> 00:11.360 So we might as well copy the order DTO that we get back from our API into our clipboard. 00:11.360 --> 00:18.140 And we'll head across to the browser and let's go to one of those JSON to TS type sites. 00:18.140 --> 00:28.070 And I'll just search for JSON to TTS and just pick the one I used before and paste in my order. 00:28.070 --> 00:31.640 And this will give us our interfaces on the right hand side. 00:31.640 --> 00:38.390 So I'll just copy that into my clipboard and head back to VS code and clear the stuff at the top and 00:38.390 --> 00:40.790 inside the File Explorer. 00:40.790 --> 00:50.330 Let's go and create inside the app folder and inside the models folder I'll create a new file and I'll 00:50.330 --> 00:52.010 call it order TS. 00:52.010 --> 00:58.280 And inside this file I'll just paste in what I have from my clipboard, and we'll just take a look at 00:58.280 --> 01:03.320 what we've been given here from that site, so we can use an interface or a type. 01:03.320 --> 01:04.600 I'm just not going to change it. 01:04.600 --> 01:05.470 On this occasion. 01:05.470 --> 01:09.220 I'll just use an interface for a change because why not? 01:09.250 --> 01:14.380 It's going to do the same thing for us anyway, and just take a look at the properties we've been given. 01:14.380 --> 01:16.060 This one looks fine. 01:16.060 --> 01:18.160 The shipping address for line two. 01:18.190 --> 01:23.590 We're going to make this optional and specify that this is a string. 01:24.970 --> 01:31.390 The order item looks fine and the payment summary also looks fine as well. 01:31.420 --> 01:32.800 Okay so that's our type. 01:32.800 --> 01:35.500 And we'll create another type inside here. 01:35.500 --> 01:37.600 And I'll stick with interface in this file. 01:37.600 --> 01:46.210 And we'll call it create order as this is what we're going to use to send up our order to the API. 01:46.210 --> 01:49.060 And we'll have a property for shipping address. 01:49.060 --> 01:51.790 And that's going to be a type of shipping address. 01:52.150 --> 01:59.350 And we'll also have a payment summary which is going to be a type of payment summary of course. 01:59.350 --> 02:02.230 So we're going to create a new feature for our orders. 02:02.230 --> 02:10.020 And inside the features folder let's create or right click and say new file and say orders forward slash. 02:10.020 --> 02:14.070 And we're going to have an order API RTS. 02:14.400 --> 02:18.270 So similar system to what we've used in our other features. 02:18.540 --> 02:24.120 Each feature has its own little Redux RTK query type store. 02:24.150 --> 02:32.430 And in here we will specify export const and use order API equals. 02:32.430 --> 02:40.410 Create API and open parentheses and curly brackets will give it a reducer path of order API. 02:41.640 --> 02:48.870 We'll use our base query and say base query with error handling, and we'll specify our endpoints and 02:48.870 --> 02:54.480 in brackets we'll use builder and add the arrow open parentheses open curly brackets. 02:54.480 --> 02:57.210 And then we can add our different endpoints. 02:57.210 --> 02:59.940 So one of them will be to fetch the orders. 02:59.940 --> 03:02.970 And we'll use Builder and Query. 03:02.970 --> 03:05.820 And this is going to return to us an order. 03:05.820 --> 03:07.770 And do be careful where you get this from. 03:07.770 --> 03:14.210 We need to get this from the app models order because this is coming back from our own API and not stripe. 03:14.210 --> 03:16.460 And that's going to be an order array. 03:16.760 --> 03:22.970 And we're going to specify void for any query arguments which we do not need for this query. 03:22.970 --> 03:27.290 And we'll open up parentheses curly brackets and we'll add query. 03:27.290 --> 03:28.820 And this one's super simple. 03:28.820 --> 03:33.650 All we need to do is specify orders as the API endpoints. 03:33.740 --> 03:45.680 We'll also have a fetch order details and we'll use Builder and Query. 03:46.160 --> 03:49.640 And inside here this is going to return to us an order. 03:49.640 --> 03:54.350 And we do send up an argument which is going to be of type number for the order ID. 03:54.800 --> 03:57.500 And then in here we can use query. 03:57.530 --> 04:04.040 And in the arguments we'll use the ID and the arrow open parentheses, open curly brackets and then 04:04.040 --> 04:05.780 just specify the URL. 04:05.930 --> 04:16.020 And in backticks we'll specify orders forward slash dollar and then in curly brackets the id and then 04:16.020 --> 04:19.470 we'll have the create order method. 04:19.500 --> 04:20.760 So we'll use builder. 04:20.790 --> 04:22.680 This is going to be a mutation. 04:22.680 --> 04:27.450 And it's going to return to us an order. 04:27.900 --> 04:34.770 And we're going to use the create order that we created as the query arguments. 04:34.770 --> 04:37.200 And that will open up parentheses curly brackets. 04:37.200 --> 04:45.780 And inside here we'll create our query which will take in the order as an argument. 04:45.780 --> 04:50.040 We don't give it a type because we specified the type above just here. 04:50.040 --> 04:54.030 And then we can use the URL of orders. 04:55.260 --> 05:01.620 The method is going to be a post and the body is going to be the order. 05:01.650 --> 05:04.080 So pretty straightforward this one. 05:04.080 --> 05:06.540 There's nothing special we need to do here. 05:06.540 --> 05:13.920 It's really just a case of defining our queries without any special updating or invalidation of cache. 05:14.010 --> 05:20.240 And then below this we're just going to export Exports const and we'll have our usefetch. 05:20.270 --> 05:25.790 And I'm not getting autocomplete here because I need to specify equals order API. 05:25.790 --> 05:29.330 And then I should be able to use the autocomplete stuff. 05:29.330 --> 05:39.110 And we're going to have a Usefetch orders query, a usefetch order detail query and a use create order 05:39.110 --> 05:42.860 mutation from our order API. 05:43.340 --> 05:46.070 And then we can go to our store and update that. 05:46.070 --> 05:48.740 So our next step is the store TS. 05:51.950 --> 05:57.020 And inside here we'll just add it underneath our other API like reducers. 05:57.020 --> 06:04.190 We'll have our order API dot reducer, path colon and order API dot reducer. 06:04.790 --> 06:07.070 And we'll just add it to the middleware. 06:07.070 --> 06:08.570 So nothing new here really. 06:08.570 --> 06:14.960 Just the process of setting up our store for what we are going to do. 06:14.960 --> 06:21.440 And next we'll take a look at making use of this so that we can create the order in our checkout.