All right.
So now we want to show the orders and the order list screen.
And we don't have we have our back end route and controller function created, but it's not doing what
we want.
So let's go into back end order controller.
And we have this get orders.
So this is what we want to add to and it's going to be very, very simple.
All we want to do is get the orders using find, right?
So we're getting all of them.
So we pass in an empty object.
We also want to populate from the user collection, the ID and the name, and then we can just do res
dot status 200 and Jason pass in the order.
So very, very simple.
Now we can go to our front end and let's go to the slice, the orders API slice and we're going to add
a get orders.
Action creator down here.
So get orders.
It's going to be a query and inside that we'll say query and the URL is just going to be the orders
URL and it's going to be a get request.
And then I'm just going to add keep unused data for five and then we can export that with use get orders
query because it's called get orders.
So you just want to add use at the beginning and query at the end.
So that's all set.
Now we'll go into our order screen.
So admin order, I'm sorry, order list screen.
Those are the two different things and we want to import a few things from here or into here.
So we want the link container.
Link container and that's going to be from React router bootstrap.
And then we want the table and button from React Bootstrap.
I want the far times icon so far times and that's going to be from react icons far we want the message.
Component and also the loader component.
And then we want to import the query that we just created.
So use get orders, query from our slice and make sure you do 2.. slash because now we're in the admin
folder in the screens folder.
Now to get the data from this query is very simple.
We can just go right here and we'll say const, open up some curly braces, get the data, we're going
to rename it to orders.
And then we also get is loading an error.
And just to test this out, we can go ahead and console log the orders just to make sure we're getting
them.
And down here you'll see we have an array with two orders.
Okay?
Because we only have two in the database.
You might have more or less.
So next thing.
Is to do the output.
So we have quite a bit to do here.
I'm going to just make this a fragment and then we're going to.
Put an H one in here and we want to check to see if loading.
So basically, if it's loading, we want to show the loader and if there's an error, we want to show
the message.
And if neither one of those are true, then we're going to go on to have our table.
So let's just end that.
And let's see, we need to make sure we have our ending curly brace.
So I just want to make sure there's no errors or anything good.
Now in the table, let's do the table head.
So we'll add the beginning and ending tag, and then we're going to have a tr with a t h ID user date,
total paid delivered, and then just an empty t h.
So it should look like that.
Actually, I don't think I don't want the border.
Good.
Now we need to map through the orders and output a table row for each one with these columns.
So under the t head, let's do a T body.
And in the body we're going to map through.
I'm just going to type this out.
So orders, dot, map.
And then for each one we'll call order.
And then we're going to set that to parentheses and each one is going to have a table row.
Okay with the key?
The key will be the ID, Then we'll have our first column with the ID, Then we want the user name,
but we want to make sure that the user is there first and then we'll have the created at with the date.
The total price.
And let's just check that out for now.
Okay, that looks good.
Now for paid and delivered, we want to have a conditional to make sure that if it's paid then it will
show the paid at field.
If it's not, we'll show an X.
So I'm going to say if the order dot is paid, then that else that.
Okay, so if it is paid, then let's put actually, you know what, we want to put a TD around this
whole thing.
Like that.
And then if it is paid, we're going to show the paid at.
So yeah order dot paid at.
Else If it's not, then we're going to show the the x and make it red.
So both of these are paid.
Now we're going to do the same thing for delivered.
So I'll just copy that and then we can just change is paid to, is delivered and we want delivered at
here.
And same thing.
We just want to show the X and neither are delivered.
So it's going to show that x mark.
All right.
So whenever someone makes an order, you can log in as an admin and you can come here and you can see
all the orders.
And actually, one more thing we want to add is a details button to go to the order, the actual order
page.
So let's add another TD.
Close that and then inside that TD, we're going to have a link container that's going to go to the
order page.
Close that and then inside that will have a button say details.
Save that.
Now, if I click on the details, it takes us to the page.
So in the next video, what I want to do is as an admin, we should be able to mark it as delivered.
So we'll do that next.