So now we want to show the orders on the profile and we already have the back end route for this.
If you remember in our controller we have where is it?
So this right here get logged in users orders.
So we just have to make a request to this to the endpoint that this controller function is hooked to
and it will find all the users orders and return them.
So let's go into the slice, the order slice, we can close up back end and we'll go into the orders
API slice.
And let's see, we'll put this.
We'll just put this right at the bottom here after the PayPal one.
And let's say get my orders and it's going to be a query.
So in this query, we want the URL, which is going to be.
It's actually going to be.
Let's see.
We want to use Backticks here.
So it's going to be.
The order's URL.
Orders underscore URL.
And then let's do slash and then my orders or mine.
I'm sorry.
So just make sure if you go in your backend order routes.
So I use mine.
But if you use my orders, then you can use that as well.
Whatever you put here is what you want to put here and let's make sure that we close that off.
And then right here we're going to say keep unused for five and then simply export it with use.
Get my orders query.
Okay, now we can go into our profile screen and we can use that.
So let's import it.
So import.
Use?
Yep.
Use get order.
No, it should be get.
Wait a minute.
I name that right?
Yeah.
Get my orders.
So get my orders.
Query from the orders API slice.
And let's see.
Let's go right under where we did the mutation here and we'll say const.
From Get My Orders query and we're going to pull out.
Actually, it's going to be curly braces and we're going to pull the data.
And call that orders.
And we also want is loading.
And we also want error.
Okay.
And then what we can do is go down to the next column.
The empty column here.
And we want to construct our orders.
So let's put an H two, and then I'm going to check to see if they're loading.
So we'll say if is loading.
Then.
Do something.
Uh, else then we want to also check for an error.
And if there's an error, then we're going to show our message.
So let's put in message.
We'll do variant a variant of danger.
And inside the message we're going to.
Say error and just to be safe, we'll do our question marks.
So just like that.
All right.
And then so that ends there.
So after the error, we want to say else, then we're going to go ahead and show our table and everything
else.
So for the table.
What's use as far as attributes here?
Striped.
Do I want?
I don't want bordered.
We'll do striped.
Hover responsive and stable.
Small for the class name.
And let's see, why are we getting an error here?
So if it's loading, I actually want to show.
The loader.
There we go.
So let's save that.
And we should just we don't see anything because it's showing this just the table.
Right.
If I reload, you can see the loader pops in there real quick because that's when it's loading.
So inside the table, let's add a table heading so t head and we'll end that.
And then inside the head.
Let's do tr and and that.
And we're going to have some table headings such as the ID, the date, the total paid delivered, and
then I'm just going to have an empty for the for the buttons.
All right.
So that's the heading.
And if we save, we should see that.
Good.
Now, under the let's see, under the t head.
Let's add the table body.
And inside the table body.
We're going to we're going to loop through or map through the orders.
So orders, dot, map and pass in a function here and let's say for each order.
And let's return our JSX in parentheses.
So we'll have the TR with the key.
And then we'll end that.
And inside that we're going to have a TD with the order ID.
Then we want the date.
So we're going to use the created app, but we're going to format it with substring.
And then let's do the total price.
Is that right?
Yeah.
So we have ID date total.
Then we want if it's paid or not.
So for this.
If it's paid, then we want to show that.
Basically we'll show.
Yeah, we'll show the date it's paid.
But if not, then we're going to show an icon, an X icon.
So I'm actually going to bring in up top.
I feel like we haven't brought in any icons in a while.
So we're going to bring in a Times which is an x mark.
So we're going to bring that in from React icon slash for.
So now what we can do is put in our TD.
Okay.
And then we're going to put in some curly braces and we're going to say if the order Dot is paid.
Then.
We'll do something else.
Do something else.
So if it's paid, then we're just going to say order dot paid at.
Okay.
We're going to show the paid at and we'll format it with substring and then else if it's not paid,
then we're going to show the far times icon and we're going to color it red.
All right.
So as you can see, both of these have been paid.
So it just shows the date.
And then we're going to do the same for delivered.
So I'll copy this last TD.
And let's say order is delivered.
And if it is, then we want to show delivered at.
If not, then we'll show an X And neither one of these have been set to delivered because an admin has
to do that and we haven't added that functionality yet.
All right.
And then in the last TD.
Is going to be our buttons.
So basically we want to be able to to see the details of the order.
So I guess it's just one button.
It's just one link.
So we're going to have a link container.
And in there we'll add our button.
Close that and say details.
Okay.
I think that that's correct.
Yeah.
So if we click details, it takes us to the order page.
All right.
So users can log in, they can go to their profile, they can update their details, see their orders,
see the details of the orders, such as the items, the price they paid.
So, yeah, I think that this is this is pretty good.
All right.
So, yeah, I think that we're ready now to start on the admin functionality.
So basically I want to have a new menu item for admins or a new dropdown for admins to basically manage
users products and orders.
So we'll get to that in the next section.