WEBVTT 00:00.000 --> 00:06.510 Okay, now that we've got the ability to create an order, let's use this to display the orders in our 00:06.510 --> 00:07.320 application. 00:07.350 --> 00:17.280 So back to VS code and inside the orders folder for the orders feature, let's create a new file and 00:17.280 --> 00:20.100 we'll just call it orders page dot TSX. 00:20.100 --> 00:25.050 And inside here let's create a boilerplate for this component using the snippet. 00:25.080 --> 00:27.000 And what do we need for this. 00:27.030 --> 00:29.550 Well we've got a fetch orders query. 00:29.550 --> 00:37.020 If we take a look at our orders API dot that we created, then we've got our use fetch orders query, 00:37.020 --> 00:39.690 which of course will go out and get those orders. 00:39.690 --> 00:43.110 And then we can use that to display them in our orders page. 00:43.110 --> 00:48.690 So pretty straightforward stuff we're going to look at in this lesson a bit of practice on the things 00:48.690 --> 00:51.180 that we've been using thus far. 00:51.210 --> 00:57.000 So we'll have a const and we'll specify data and call it orders. 00:57.000 --> 01:01.590 So use the colon there and we'll use our fetch orders query. 01:03.060 --> 01:08.550 And we'll also bring in navigator as well, so that they can click on a specific order and be taken 01:08.550 --> 01:10.560 to the order detail page. 01:10.560 --> 01:14.250 So we'll use const navigator and say Use navigator. 01:14.280 --> 01:16.530 So we'll check to make sure that we have the orders. 01:16.530 --> 01:28.890 So if not orders then we will return typography and just say no orders available. 01:31.290 --> 01:35.730 And we'll just give it a variant of H5. 01:36.030 --> 01:42.390 And in the return we will use a container once again from UI material. 01:42.450 --> 01:45.300 We'll give it a max width of MD. 01:46.050 --> 01:52.830 Inside the container we'll use typography and we'll give it a variant of H5. 01:54.270 --> 01:57.150 We'll align it centrally. 01:57.150 --> 02:03.100 So align center and we'll give it a gutter bottom as well for margin at the bottom, and we'll just 02:03.100 --> 02:05.860 specify my orders as the heading. 02:06.070 --> 02:14.350 Below this we'll make use of paper from Mui material, and we'll give it a border radius to give it 02:14.350 --> 02:19.030 some slightly rounded corners, and set that to be three. 02:19.060 --> 02:22.090 Inside the paper we'll use a table for list. 02:22.090 --> 02:26.440 Just a very simple table and we'll have a table head. 02:28.600 --> 02:31.990 And inside the table head we'll have a table row. 02:33.460 --> 02:37.570 And inside our table row we'll have table cells. 02:38.710 --> 02:41.710 Quite verbose these material UI tables. 02:41.710 --> 02:47.410 But that is fairly standard for any styling framework that I've seen. 02:47.410 --> 02:52.060 So for the first table cell we'll align this to center. 02:52.390 --> 02:56.140 And we'll specify inside the table cell. 02:56.140 --> 02:57.490 This is going to be for our header row. 02:57.490 --> 03:01.820 So we'll just specify order and copy this one down. 03:01.820 --> 03:08.030 We don't need the align center for the next one and we'll have the dates. 03:09.410 --> 03:15.140 We'll copy this down two more times and we'll have the total. 03:15.440 --> 03:19.130 And then in the final one we'll have the status. 03:19.520 --> 03:22.940 And below the table head comes a table body. 03:26.900 --> 03:29.600 And inside here we'll loop over our orders. 03:29.600 --> 03:34.820 So we'll use orders dot map and specify order as the argument name. 03:34.820 --> 03:38.240 And then add the arrow open parentheses. 03:38.240 --> 03:41.120 And then we'll have a table row. 03:43.820 --> 03:50.210 And inside the table row let's give this some properties. 03:50.720 --> 03:53.330 So we'll give it a key because we're looping over things. 03:53.330 --> 03:58.250 And that's going to be the order ID we'll have a hover property. 03:58.770 --> 04:05.790 So as the mouse cursor is hovering over each row, then it's going to appear to be clickable. 04:08.400 --> 04:11.010 And we'll give it an onClick event. 04:13.980 --> 04:17.340 Which is not coming up in my autocomplete here. 04:18.420 --> 04:20.400 onClick should be available. 04:20.400 --> 04:23.550 I'm going to use it anyway because I'm pretty sure this is available. 04:23.670 --> 04:30.030 We'll give it an onClick event, and we'll use navigate to take them to the Order detail page. 04:30.030 --> 04:34.200 So we'll bring in const navigate equals use navigate. 04:34.230 --> 04:36.120 We get from React Router Dom. 04:36.120 --> 04:40.380 And inside here we'll give it the function of navigate. 04:41.280 --> 04:47.790 And we'll use Backticks here and say forward slash orders forward slash dollar. 04:47.790 --> 04:49.740 And then order.id. 04:51.420 --> 04:57.300 And we'll give it a style of cursor and pointer. 04:58.980 --> 05:02.370 So the user is fully aware that it is a clickable row. 05:02.370 --> 05:05.940 And then we'll have our table cells inside here. 05:06.570 --> 05:12.630 This one the first one will align center to match the corresponding header cell. 05:12.630 --> 05:14.580 And we'll use hash. 05:14.580 --> 05:18.720 And then in curly brackets we'll have the order ID. 05:20.910 --> 05:24.060 We'll have another table cell below this. 05:24.060 --> 05:27.510 And we're going to specify our order date inside here. 05:27.540 --> 05:34.050 Now it's probably time to start formatting these dates in a better format than we currently are doing. 05:34.050 --> 05:36.630 And we'll use a package to help us do this. 05:36.630 --> 05:42.120 Just a little utility date formatting package called date fns. 05:42.150 --> 05:44.820 And we'll add that into our application. 05:44.820 --> 05:52.230 So we'll go on to the third tab that I'm using to install things, and we'll use npm install datefns. 05:52.380 --> 05:55.620 And will I get the error in this one? 05:55.620 --> 05:56.610 I'm pretty sure I will. 05:56.610 --> 06:03.130 So I'm just going to preempt that and say legacy peer deps for this because I'm using the release candidate 06:03.160 --> 06:04.480 of react 19. 06:04.510 --> 06:05.710 I'll mention it again. 06:05.710 --> 06:11.260 You probably won't need to do this, or you will not need to do this if you're using a released stable 06:11.260 --> 06:13.210 version of react 19. 06:13.270 --> 06:20.320 So that's now been added, and we can use that to format our dates into a more presentable format. 06:20.350 --> 06:23.680 So I'll open curly brackets and we'll use formats. 06:25.660 --> 06:30.010 And my VSCode is really not playing nicely at the moment or it's just a bit slow. 06:30.040 --> 06:30.640 Okay. 06:30.640 --> 06:32.770 So we need the format from date FNS. 06:32.770 --> 06:33.850 Let's bring that in. 06:33.850 --> 06:36.070 And then this takes two parameters. 06:36.070 --> 06:37.780 The thing the dates property. 06:37.780 --> 06:41.590 So that's going to be the order dot order date. 06:41.590 --> 06:43.420 And then we give it a format string. 06:43.420 --> 06:45.280 So how do we want this to look. 06:45.280 --> 06:49.270 And we'll use dd m in uppercase. 06:49.270 --> 06:54.190 And then y y y y to give us our order dates. 06:54.190 --> 07:00.530 And below this table cell we'll have another table cell, so I'll just copy this down. 07:00.530 --> 07:09.110 And in place of the order date, we'll use currency format and pass in our order dot total. 07:09.860 --> 07:15.560 And one more and we'll have the status of the order. 07:15.560 --> 07:20.720 So this inside this curly brackets is going to be the order dot order status. 07:20.840 --> 07:26.300 And that should be sufficient for a simple but functional orders page. 07:26.300 --> 07:34.940 So we'll head across to our routes and we'll add inside our authenticated routes. 07:34.940 --> 07:37.010 We'll also have a route for our orders. 07:37.010 --> 07:39.170 So I'll just copy the checkout success down. 07:39.170 --> 07:40.490 Specify orders. 07:40.490 --> 07:44.390 And this can be for our orders page. 07:44.390 --> 07:50.480 And if we go across to our browser and check our progress, what we should be able to do is not view 07:50.480 --> 07:53.480 the order because we don't have the order detail page yet. 07:53.480 --> 07:56.510 And do we have a route inside here for my orders? 07:56.540 --> 07:57.050 No. 07:57.050 --> 07:59.970 We'll need to go to our user menu as well to configure that. 07:59.970 --> 08:03.780 So back to VSCode and we'll open up our user menu. 08:03.780 --> 08:14.700 And where we've got our different menu items we'll specify components equals and we'll use link from 08:14.700 --> 08:18.420 React Router Dom and say two equals. 08:18.420 --> 08:20.760 And then just forward slash orders. 08:21.030 --> 08:28.050 And if we go across to our browser then we should be able to use our user menu and go to my orders. 08:28.320 --> 08:30.540 And we see no orders available. 08:30.540 --> 08:35.700 That's not great, but we do see our list of orders inside here that are clickable. 08:35.700 --> 08:40.650 And clicking on one of these should take us to our orders page, but we do not have that yet. 08:40.650 --> 08:44.970 So we get taken directly to a not found, but we can see our list of orders. 08:45.030 --> 08:50.220 I've created several in various troubleshooting efforts inside here, and we can see that they're all 08:50.220 --> 08:56.700 pending, which means we do not have currently stripe telling our API that the payment was successful, 08:56.710 --> 09:03.100 but that's what we'd expect to see at this moment in time and I'd rather not see. 09:03.820 --> 09:05.530 No orders available there. 09:05.530 --> 09:11.320 I would actually prefer to see that something is loading before we get to the no orders available. 09:11.320 --> 09:18.670 So just inside the orders component or the orders page, let's come back inside here and we'll use the 09:18.700 --> 09:21.850 is loading property inside here. 09:21.850 --> 09:24.100 So we'll use the is loading. 09:24.100 --> 09:31.180 And before we get to the if no orders we'll check to see if is loading. 09:31.240 --> 09:41.410 And if it is we'll return typography and we'll give it a variance of H5 and just say loading orders 09:41.440 --> 09:42.400 dot dot dot. 09:42.400 --> 09:50.890 And if we go back what we should see is a better user interface experience as the orders come in. 09:50.920 --> 09:51.940 Perfect. 09:51.940 --> 09:57.190 So next on our list is to deal with the Order Detail page, and we'll take a look at that next.