Let's continue working on this ticket show component.
So instead of here, we need to implement a get initial props function so we can load up some information
about the ticket that we're trying to display to the user.
So we'll add in a ticket, show it.
Initial props will be an async function.
Now we're going to receive the first two arguments of context and client.
So context is going to be a very important argument in this case.
The reason for that is that whenever we navigate to this ticket show component, we're going to have
that I.D. inside the euro.
I mean, to extract that I.D. so we can understand exactly what ticket we're trying to fetch information
about to extract that I.D..
We're going to take ticket I.D. from context, dot query.
We are specifically pulling out a property called ticket I.D. because that is what we named this file.
So whatever you name the file inside those square brackets.
That is the query or part of the query that is going to be extracted.
Now that ticket I.D., we can take it and use it to make a request off to our API.
Specifically the ticket service.
The end point that we're going to try to reach out to, we take a look at our ticket service really
quickly, is the show route.
So we need to make a get request to API tickets.
And then the actual I.D..
So I am going to extract data.
From a weight line target, we'll use a template string here, so make sure you got the back ticks,
API tickets, ticket I.D..
And then we can return a object here.
I'm going to assign that data to the ticket property.
So very similar to what we just shot.
Saw it inside of our index J.S. file or the landing page.
This object right here is now going to be merged into all the different props that are provided to ticket
show.
So we can d structure out just ticket.
And that's gonna be it.
Whatever.
We just got back from our API.
So then inside the component, we can start to show information from that ticket.
Let's empty out active.
I'm going to replace it with an H1.
Inside the H1, let's put into some information about the ticket.
So how about.
The ticket's title.
Maybe I will also show an age for.
With the price we'll put in ticket price.
And I should be at least enough for us to get started with.
So I got to save this.
I'll flip back over.
And there we go.
I've got my title and my price.
OK.
That was easy enough.
So what is the real goal of this component?
Remember, the real goal of ticket show is to present a button to the user that they can click to purchase
this ticket.
Now, when we say purchase a ticket, what we're really talking about here is creating an order.
Remember, that is how a user expresses the intent to purchase the ticket inside of rap.
So we need to show a button that says something like purchase whenever a user clicks that we're going
make a request to our back end.
Specifically, the orders, service and attempt to create an order referencing this ticket.
So let's get to it.
The first thing we probably need inside of here is a button element, something for the user to click
on.
They'll put in a button with the glass name of BGN ETN primary.
And inside the button, arguments and text of purchase, just like we saw it in the Mark-Up.
Now, we need to make sure that whenever user clicks on this thing, we make requests to our order service.
Once again, let's get a quick reminder on how we create an order by taking a quick glance at that order
service, trying to find order service, SIRC routes and then new dot t.
S.
So to create a new order, we're going to make a post request to API slash orders and all we really
have to do here is include the ticket I.D..
That's pretty much it.
Well, this should be pretty straightforward.
Back inside of our components, we're going to once again import that U.S.
Request hook that we had previously created.
We will make use of the hook at the top of the component.
Remember, that's in give us that do request function that we can then call at any future point time
to run the request.
At the top, I'm going to import U.S.
Request.
From up to directories, folks use request.
Then inside of a component.
I'll get my due request function, Andy.
Possible heirs object.
From calling it use request.
And then remember, to use request, we have to pass in the URL, the body, the method and on success.
So our Eurail in this case.
We'll be API orders.
The method will be simply post.
Our body is going to be the idea of the ticket that we want to purchase, so ticket I.D. is ticket dot
I.D..
And then finally on success.
Right now, we'll take the actual order that gets sent back to us to remember on success is going to
be invoked with whatever response we get back on the request.
So in this case, hopefully it will be the order that was created.
And then right now, we'll just do a simple console log of that order.
And finally, right above this button will display the ears, J.S. X.
So again, that's only if there is something wrong or something went wrong with the request.
And then on the button itself, we'll put on an on click.
So any time someone clicks this button, we will invoke do request.
I will call do request.
They're really important here, remember, we are providing a reference to the do request function so
that it can be called at some future point in time.
So we do not want to have any parentheses on this thing.
If you put parentheses on this, then do request to be called the instant this component is first rendered.
The no parentheses just do request by itself.
All right.
I think this looks good.
I think we're ready for another test.
I'm going to save it.
Flip back over.
So there's my button.
I'm going to pull open my network request log.
And I'll hit purchase.
Well, it looks like the request went off.
I got back a status to a one which indicates that an order was created.
And if I take a look at my console as well, we'll see the order printed out right here.
This looks great.
Now, do keep in mind that the tickets corresponding to this has now been reserved, in theory at least,
hopefully everything on the back end is actually working.
So if I now tried to create another order right away, I should probably see an error message.
Something says that the ticket is already reserved.
So if we want to now create another order around this ticket, we're going to have to wait for the first
order to time out, which right now we have encoded as being about 60 seconds.
So if I were to wait around for another 30 seconds or so, I should build a hit purchase again and see
a second order created because the first one will have had expired.
All right, well, I'd say it looks pretty good.
Good progress or tick?
Going to take another pause right here when we come back.
Next video, we'll make sure that after we successfully create the order, we can navigate the user
over to a page that's going to show details about the order until the user.
How much longer they have to actually pay the order.