So what do we do with the user after they create a ticket?
Well, I think we don't have to really overthink this.
Let's say that after a user successfully creates a new ticket on our ticket creation form, let's just
redirect them back to the list of all tickets.
So, in other words, send it back to the root root.
We could definitely also send them to the ticket detail page if you wanted to.
But again, let's just keep it really simple and straightforward.
We'll send the back to the root root of our application.
So to do so, we really want to run some programatic or automatic navigation on the user.
We want to redirect them forcibly over to another page.
We've already done that once before.
I think on our sign out route or the sign out page inside of our client project Dones, if we take a
look at sign outs, you might recall that we can import Rueter from next router.
And then if we ever want to forcibly navigate a user around, we'll call Radack's push and provide the
new route that we want to navigate them to.
Well, simple enough.
The inside of our new ticket component at the very top.
I will import Rueter from next Rueter.
Then inside of on success, I don't need that ticket argument anymore, so I will delete it and replace
the console log with router.
Push forward slash.
Let's save this.
I'm gonna try to create a another ticket really quickly.
They'll say about redirect ticket.
With the price of 50.
Submit it.
And there we go.
I get redirected.
Simple enough.
Well, as long as we are here, let's get started working on this root root.
I remember I had said that we really want to show a list of all the tickets that are available right
now.
So this really means that inside of our landing page component, we need to add in some data fetching
to our get initial props function, because this list of all tickets is some data that is required when
we first displayed this component to the user.
So inside of that landing pages get initial props function.
We're going to add in a request to our ticket service effects to all the different tickets that a user
can purchase.
I gonna find that index, not just file.
So here's our landing page.
Got to find the get initial props function.
And you might recall something we just discussed a couple of videos go this function that has access
to the client, which we are using to make requests during the initial rendering process.
I'm going to remove that return empty object right there and I'm going to replace it with a little bit
of code as guests to just fetch our list of tickets.
We're going to say.
Data is a weight blind Duckett API slash tickets.
Remember that whenever we make use of Axios to fetch some data, which is what this client really is
right here, we get back a big rez or response object.
The actual data that we care about is nested on the data property.
So that's why we are doing the D structuring.
After that, I'm then going to return an object with the key of tickets and it will refer to that data.
Now, this object right here.
Everything inside of here is going to be merged into the props that are being passed to the landing
page.
So because this object has a key of tickets, we can now receive that prop as tickets inside of the
actual component.
And so tickets should be an array of all the tickets that we just fetch from our API.
Just to test that out inside the landing page component.
Let's do a console log of tickets.
I'll save that.
Flip back over.
Now, if you just flip back over, you might see immediately a console log of undefined.
But remember, sometimes when Next is doing reloads here doesn't quite work the way you would expect.
So we're going to reload the page.
And then you should see a console log right here.
Of all the tickets we have created.
If you do not, you will probably see them back inside of your terminal in the window that is running
your scaffold stuff.
So that console log will probably have been executed on the server side.
And you should see the list of all the tickets over there.
Alternatively, you can always click on that logo, which will force a reload of this component.
And we should see the array of tickets right there as well.
Well, we've got our tickets.
Now we just need to render them out as a list.
We actually show these tickets.
We're going to read to them actually as a table.
Pretty much a list.
Right now, this table is just really good to have the title and the price of each individual ticket.
And we'll eventually add in a couple of columns to it over time.
So inside of landing page, I'm going to remove everything inside of the component.
Right now.
Am I going to replace it?
With some J.S. acts to display a table first put in a div.
With an H1 of tickets.
Then I'll put in my table with the class name of table.
I'm gonna give the table a head or a tee head.
Inside the head, it we'll put in a t r.
And then we will give this thing two separate columns right now.
A title column.
And a price column.
Now, do double check, make sure you've got table T, had tr t h t h and then all the appropriate closing
tax.
Then right after the tea had gone to put in a tea body.
And we definitely could right in a loop right here inside the tea body to loop over all of our different
tickets and build a little row for each one.
But just to keep this big blossom block of J.S. X right here, a little bit easier to read.
I'm going to instead create a little helper variable up here at the top where I will loop over my array
of tickets and build up a separate row for each ticket.
So above DA return statement.
I'm going to add in ticket lists.
This will be the result of mapping over our list of tickets.
And for each ticket, I'm going to return.
A TR.
Whenever we build up a array of different elements, keep in mind that react once us to provide a key
property.
So on the TIAR itself, I can put on a key prop and for the key, I will provide the I.D. of the tickets.
Then inside the TR will place one TDE.
To print out the tickets title.
And a second one.
Or the tickets?
Rice.
And finally, I'm going to show ticket list.
Down inside of my t body.
All right.
So lot of TSX here do double check.
Make sure you don't have any typos or anything like that.
Once you're sure everything is good to go.
We'll save this file.
Look back over and we should see our list of tickets.
Again, if you don't see this appeal right away, you can always refresh the page and hopefully you'll
then see it appear.
OK, let's say this is good progress forward to now.
We're going to take a quick pause right here, naturally.
And after that, we're going to make sure that we create some page to show details about a specific
ticket.
And that's really going to look something like.
This right here.
So it will be pretty simple and straightforward in nature.
We're going to make sure we show the title The Price.
Maybe a status.
Who knows?
And then a button to actually purchase the tickets.
So quick pause here.
Get started on that next page in just a moment.