Okay, now that we've got the ability to create an order, let's use this to display the orders in our
application.
So back to VS code and inside the orders folder for the orders feature, let's create a new file and
we'll just call it orders page dot TSX.
And inside here let's create a boilerplate for this component using the snippet.
And what do we need for this.
Well we've got a fetch orders query.
If we take a look at our orders API dot that we created, then we've got our use fetch orders query,
which of course will go out and get those orders.
And then we can use that to display them in our orders page.
So pretty straightforward stuff we're going to look at in this lesson a bit of practice on the things
that we've been using thus far.
So we'll have a const and we'll specify data and call it orders.
So use the colon there and we'll use our fetch orders query.
And we'll also bring in navigator as well, so that they can click on a specific order and be taken
to the order detail page.
So we'll use const navigator and say Use navigator.
So we'll check to make sure that we have the orders.
So if not orders then we will return typography and just say no orders available.
And we'll just give it a variant of H5.
And in the return we will use a container once again from UI material.
We'll give it a max width of MD.
Inside the container we'll use typography and we'll give it a variant of H5.
We'll align it centrally.
So align center and we'll give it a gutter bottom as well for margin at the bottom, and we'll just
specify my orders as the heading.
Below this we'll make use of paper from Mui material, and we'll give it a border radius to give it
some slightly rounded corners, and set that to be three.
Inside the paper we'll use a table for list.
Just a very simple table and we'll have a table head.
And inside the table head we'll have a table row.
And inside our table row we'll have table cells.
Quite verbose these material UI tables.
But that is fairly standard for any styling framework that I've seen.
So for the first table cell we'll align this to center.
And we'll specify inside the table cell.
This is going to be for our header row.
So we'll just specify order and copy this one down.
We don't need the align center for the next one and we'll have the dates.
We'll copy this down two more times and we'll have the total.
And then in the final one we'll have the status.
And below the table head comes a table body.
And inside here we'll loop over our orders.
So we'll use orders dot map and specify order as the argument name.
And then add the arrow open parentheses.
And then we'll have a table row.
And inside the table row let's give this some properties.
So we'll give it a key because we're looping over things.
And that's going to be the order ID we'll have a hover property.
So as the mouse cursor is hovering over each row, then it's going to appear to be clickable.
And we'll give it an onClick event.
Which is not coming up in my autocomplete here.
onClick should be available.
I'm going to use it anyway because I'm pretty sure this is available.
We'll give it an onClick event, and we'll use navigate to take them to the Order detail page.
So we'll bring in const navigate equals use navigate.
We get from React Router Dom.
And inside here we'll give it the function of navigate.
And we'll use Backticks here and say forward slash orders forward slash dollar.
And then order.id.
And we'll give it a style of cursor and pointer.
So the user is fully aware that it is a clickable row.
And then we'll have our table cells inside here.
This one the first one will align center to match the corresponding header cell.
And we'll use hash.
And then in curly brackets we'll have the order ID.
We'll have another table cell below this.
And we're going to specify our order date inside here.
Now it's probably time to start formatting these dates in a better format than we currently are doing.
And we'll use a package to help us do this.
Just a little utility date formatting package called date fns.
And we'll add that into our application.
So we'll go on to the third tab that I'm using to install things, and we'll use npm install datefns.
And will I get the error in this one?
I'm pretty sure I will.
So I'm just going to preempt that and say legacy peer deps for this because I'm using the release candidate
of react 19.
I'll mention it again.
You probably won't need to do this, or you will not need to do this if you're using a released stable
version of react 19.
So that's now been added, and we can use that to format our dates into a more presentable format.
So I'll open curly brackets and we'll use formats.
And my VSCode is really not playing nicely at the moment or it's just a bit slow.
Okay.
So we need the format from date FNS.
Let's bring that in.
And then this takes two parameters.
The thing the dates property.
So that's going to be the order dot order date.
And then we give it a format string.
So how do we want this to look.
And we'll use dd m in uppercase.
And then y y y y to give us our order dates.
And below this table cell we'll have another table cell, so I'll just copy this down.
And in place of the order date, we'll use currency format and pass in our order dot total.
And one more and we'll have the status of the order.
So this inside this curly brackets is going to be the order dot order status.
And that should be sufficient for a simple but functional orders page.
So we'll head across to our routes and we'll add inside our authenticated routes.
We'll also have a route for our orders.
So I'll just copy the checkout success down.
Specify orders.
And this can be for our orders page.
And if we go across to our browser and check our progress, what we should be able to do is not view
the order because we don't have the order detail page yet.
And do we have a route inside here for my orders?
No.
We'll need to go to our user menu as well to configure that.
So back to VSCode and we'll open up our user menu.
And where we've got our different menu items we'll specify components equals and we'll use link from
React Router Dom and say two equals.
And then just forward slash orders.
And if we go across to our browser then we should be able to use our user menu and go to my orders.
And we see no orders available.
That's not great, but we do see our list of orders inside here that are clickable.
And clicking on one of these should take us to our orders page, but we do not have that yet.
So we get taken directly to a not found, but we can see our list of orders.
I've created several in various troubleshooting efforts inside here, and we can see that they're all
pending, which means we do not have currently stripe telling our API that the payment was successful,
but that's what we'd expect to see at this moment in time and I'd rather not see.
No orders available there.
I would actually prefer to see that something is loading before we get to the no orders available.
So just inside the orders component or the orders page, let's come back inside here and we'll use the
is loading property inside here.
So we'll use the is loading.
And before we get to the if no orders we'll check to see if is loading.
And if it is we'll return typography and we'll give it a variance of H5 and just say loading orders
dot dot dot.
And if we go back what we should see is a better user interface experience as the orders come in.
Perfect.
So next on our list is to deal with the Order Detail page, and we'll take a look at that next.