1 00:00:01,930 --> 00:00:04,240 So what do we do with the user after they create a ticket? 2 00:00:04,600 --> 00:00:06,820 Well, I think we don't have to really overthink this. 3 00:00:07,090 --> 00:00:12,010 Let's say that after a user successfully creates a new ticket on our ticket creation form, let's just 4 00:00:12,010 --> 00:00:14,320 redirect them back to the list of all tickets. 5 00:00:14,500 --> 00:00:16,420 So, in other words, send it back to the root root. 6 00:00:17,050 --> 00:00:20,570 We could definitely also send them to the ticket detail page if you wanted to. 7 00:00:20,890 --> 00:00:22,900 But again, let's just keep it really simple and straightforward. 8 00:00:23,110 --> 00:00:25,210 We'll send the back to the root root of our application. 9 00:00:26,120 --> 00:00:31,370 So to do so, we really want to run some programatic or automatic navigation on the user. 10 00:00:31,430 --> 00:00:34,460 We want to redirect them forcibly over to another page. 11 00:00:35,210 --> 00:00:36,680 We've already done that once before. 12 00:00:36,770 --> 00:00:42,800 I think on our sign out route or the sign out page inside of our client project Dones, if we take a 13 00:00:42,800 --> 00:00:46,790 look at sign outs, you might recall that we can import Rueter from next router. 14 00:00:47,330 --> 00:00:52,490 And then if we ever want to forcibly navigate a user around, we'll call Radack's push and provide the 15 00:00:52,550 --> 00:00:54,200 new route that we want to navigate them to. 16 00:00:54,640 --> 00:00:55,530 Well, simple enough. 17 00:00:56,440 --> 00:00:58,570 The inside of our new ticket component at the very top. 18 00:00:59,900 --> 00:01:03,060 I will import Rueter from next Rueter. 19 00:01:05,430 --> 00:01:10,980 Then inside of on success, I don't need that ticket argument anymore, so I will delete it and replace 20 00:01:10,980 --> 00:01:12,920 the console log with router. 21 00:01:13,200 --> 00:01:14,880 Push forward slash. 22 00:01:18,390 --> 00:01:19,200 Let's save this. 23 00:01:20,230 --> 00:01:22,420 I'm gonna try to create a another ticket really quickly. 24 00:01:23,510 --> 00:01:26,000 They'll say about redirect ticket. 25 00:01:27,030 --> 00:01:28,160 With the price of 50. 26 00:01:30,010 --> 00:01:30,700 Submit it. 27 00:01:31,420 --> 00:01:31,990 And there we go. 28 00:01:32,140 --> 00:01:32,920 I get redirected. 29 00:01:33,580 --> 00:01:34,100 Simple enough. 30 00:01:35,510 --> 00:01:39,840 Well, as long as we are here, let's get started working on this root root. 31 00:01:40,410 --> 00:01:44,510 I remember I had said that we really want to show a list of all the tickets that are available right 32 00:01:44,510 --> 00:01:44,780 now. 33 00:01:45,470 --> 00:01:50,540 So this really means that inside of our landing page component, we need to add in some data fetching 34 00:01:50,600 --> 00:01:55,280 to our get initial props function, because this list of all tickets is some data that is required when 35 00:01:55,280 --> 00:01:57,380 we first displayed this component to the user. 36 00:01:58,290 --> 00:02:01,190 So inside of that landing pages get initial props function. 37 00:02:01,280 --> 00:02:06,440 We're going to add in a request to our ticket service effects to all the different tickets that a user 38 00:02:06,440 --> 00:02:07,080 can purchase. 39 00:02:09,020 --> 00:02:10,670 I gonna find that index, not just file. 40 00:02:10,730 --> 00:02:11,840 So here's our landing page. 41 00:02:12,650 --> 00:02:14,180 Got to find the get initial props function. 42 00:02:14,500 --> 00:02:18,620 And you might recall something we just discussed a couple of videos go this function that has access 43 00:02:18,620 --> 00:02:23,390 to the client, which we are using to make requests during the initial rendering process. 44 00:02:25,310 --> 00:02:29,960 I'm going to remove that return empty object right there and I'm going to replace it with a little bit 45 00:02:29,960 --> 00:02:32,900 of code as guests to just fetch our list of tickets. 46 00:02:34,050 --> 00:02:34,710 We're going to say. 47 00:02:36,690 --> 00:02:42,510 Data is a weight blind Duckett API slash tickets. 48 00:02:45,020 --> 00:02:49,400 Remember that whenever we make use of Axios to fetch some data, which is what this client really is 49 00:02:49,400 --> 00:02:52,820 right here, we get back a big rez or response object. 50 00:02:53,270 --> 00:02:56,240 The actual data that we care about is nested on the data property. 51 00:02:56,330 --> 00:02:57,860 So that's why we are doing the D structuring. 52 00:02:59,420 --> 00:03:05,090 After that, I'm then going to return an object with the key of tickets and it will refer to that data. 53 00:03:05,960 --> 00:03:07,520 Now, this object right here. 54 00:03:07,910 --> 00:03:12,320 Everything inside of here is going to be merged into the props that are being passed to the landing 55 00:03:12,320 --> 00:03:12,830 page. 56 00:03:13,430 --> 00:03:19,400 So because this object has a key of tickets, we can now receive that prop as tickets inside of the 57 00:03:19,400 --> 00:03:20,500 actual component. 58 00:03:21,410 --> 00:03:25,370 And so tickets should be an array of all the tickets that we just fetch from our API. 59 00:03:26,360 --> 00:03:29,120 Just to test that out inside the landing page component. 60 00:03:29,420 --> 00:03:31,730 Let's do a console log of tickets. 61 00:03:34,510 --> 00:03:35,060 I'll save that. 62 00:03:35,080 --> 00:03:35,740 Flip back over. 63 00:03:37,930 --> 00:03:41,970 Now, if you just flip back over, you might see immediately a console log of undefined. 64 00:03:42,000 --> 00:03:47,130 But remember, sometimes when Next is doing reloads here doesn't quite work the way you would expect. 65 00:03:47,190 --> 00:03:49,080 So we're going to reload the page. 66 00:03:50,300 --> 00:03:52,280 And then you should see a console log right here. 67 00:03:52,370 --> 00:03:53,660 Of all the tickets we have created. 68 00:03:54,020 --> 00:03:59,450 If you do not, you will probably see them back inside of your terminal in the window that is running 69 00:03:59,480 --> 00:04:00,500 your scaffold stuff. 70 00:04:01,310 --> 00:04:04,970 So that console log will probably have been executed on the server side. 71 00:04:05,260 --> 00:04:07,040 And you should see the list of all the tickets over there. 72 00:04:08,350 --> 00:04:12,640 Alternatively, you can always click on that logo, which will force a reload of this component. 73 00:04:12,970 --> 00:04:16,060 And we should see the array of tickets right there as well. 74 00:04:17,650 --> 00:04:18,630 Well, we've got our tickets. 75 00:04:18,810 --> 00:04:21,090 Now we just need to render them out as a list. 76 00:04:21,790 --> 00:04:22,850 We actually show these tickets. 77 00:04:22,860 --> 00:04:24,780 We're going to read to them actually as a table. 78 00:04:24,930 --> 00:04:25,680 Pretty much a list. 79 00:04:26,370 --> 00:04:30,540 Right now, this table is just really good to have the title and the price of each individual ticket. 80 00:04:30,700 --> 00:04:33,360 And we'll eventually add in a couple of columns to it over time. 81 00:04:35,710 --> 00:04:39,280 So inside of landing page, I'm going to remove everything inside of the component. 82 00:04:39,350 --> 00:04:39,820 Right now. 83 00:04:40,960 --> 00:04:41,920 Am I going to replace it? 84 00:04:42,860 --> 00:04:47,240 With some J.S. acts to display a table first put in a div. 85 00:04:49,260 --> 00:04:51,920 With an H1 of tickets. 86 00:04:53,510 --> 00:04:56,720 Then I'll put in my table with the class name of table. 87 00:04:59,810 --> 00:05:02,510 I'm gonna give the table a head or a tee head. 88 00:05:07,250 --> 00:05:09,440 Inside the head, it we'll put in a t r. 89 00:05:10,640 --> 00:05:13,460 And then we will give this thing two separate columns right now. 90 00:05:15,160 --> 00:05:16,120 A title column. 91 00:05:17,660 --> 00:05:18,980 And a price column. 92 00:05:20,030 --> 00:05:25,740 Now, do double check, make sure you've got table T, had tr t h t h and then all the appropriate closing 93 00:05:25,740 --> 00:05:26,220 tax. 94 00:05:27,690 --> 00:05:31,110 Then right after the tea had gone to put in a tea body. 95 00:05:33,500 --> 00:05:38,530 And we definitely could right in a loop right here inside the tea body to loop over all of our different 96 00:05:38,530 --> 00:05:40,720 tickets and build a little row for each one. 97 00:05:41,130 --> 00:05:45,130 But just to keep this big blossom block of J.S. X right here, a little bit easier to read. 98 00:05:45,400 --> 00:05:50,170 I'm going to instead create a little helper variable up here at the top where I will loop over my array 99 00:05:50,170 --> 00:05:53,230 of tickets and build up a separate row for each ticket. 100 00:05:54,390 --> 00:05:55,860 So above DA return statement. 101 00:05:57,230 --> 00:05:58,910 I'm going to add in ticket lists. 102 00:06:00,930 --> 00:06:03,660 This will be the result of mapping over our list of tickets. 103 00:06:05,500 --> 00:06:07,660 And for each ticket, I'm going to return. 104 00:06:10,410 --> 00:06:11,190 A TR. 105 00:06:14,380 --> 00:06:19,690 Whenever we build up a array of different elements, keep in mind that react once us to provide a key 106 00:06:19,690 --> 00:06:20,260 property. 107 00:06:20,830 --> 00:06:25,960 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. 108 00:06:28,220 --> 00:06:31,100 Then inside the TR will place one TDE. 109 00:06:32,300 --> 00:06:34,200 To print out the tickets title. 110 00:06:35,770 --> 00:06:36,500 And a second one. 111 00:06:38,930 --> 00:06:39,710 Or the tickets? 112 00:06:39,850 --> 00:06:40,370 Rice. 113 00:06:42,830 --> 00:06:45,220 And finally, I'm going to show ticket list. 114 00:06:46,740 --> 00:06:48,090 Down inside of my t body. 115 00:06:52,960 --> 00:06:53,230 All right. 116 00:06:53,780 --> 00:06:56,080 So lot of TSX here do double check. 117 00:06:56,110 --> 00:06:58,060 Make sure you don't have any typos or anything like that. 118 00:06:58,480 --> 00:06:59,890 Once you're sure everything is good to go. 119 00:07:00,160 --> 00:07:01,000 We'll save this file. 120 00:07:02,410 --> 00:07:05,620 Look back over and we should see our list of tickets. 121 00:07:06,910 --> 00:07:10,090 Again, if you don't see this appeal right away, you can always refresh the page and hopefully you'll 122 00:07:10,090 --> 00:07:10,780 then see it appear. 123 00:07:11,830 --> 00:07:15,120 OK, let's say this is good progress forward to now. 124 00:07:15,910 --> 00:07:17,850 We're going to take a quick pause right here, naturally. 125 00:07:17,910 --> 00:07:22,170 And after that, we're going to make sure that we create some page to show details about a specific 126 00:07:22,170 --> 00:07:22,480 ticket. 127 00:07:23,200 --> 00:07:25,350 And that's really going to look something like. 128 00:07:26,550 --> 00:07:27,360 This right here. 129 00:07:27,550 --> 00:07:30,000 So it will be pretty simple and straightforward in nature. 130 00:07:30,880 --> 00:07:33,570 We're going to make sure we show the title The Price. 131 00:07:33,660 --> 00:07:34,500 Maybe a status. 132 00:07:34,530 --> 00:07:35,070 Who knows? 133 00:07:35,430 --> 00:07:37,440 And then a button to actually purchase the tickets. 134 00:07:38,010 --> 00:07:38,790 So quick pause here. 135 00:07:38,940 --> 00:07:41,010 Get started on that next page in just a moment.