1 00:00:01,530 --> 00:00:03,720 Let's continue working on this ticket show component. 2 00:00:04,080 --> 00:00:09,060 So instead of here, we need to implement a get initial props function so we can load up some information 3 00:00:09,090 --> 00:00:11,010 about the ticket that we're trying to display to the user. 4 00:00:11,730 --> 00:00:14,190 So we'll add in a ticket, show it. 5 00:00:14,400 --> 00:00:17,640 Initial props will be an async function. 6 00:00:19,520 --> 00:00:24,450 Now we're going to receive the first two arguments of context and client. 7 00:00:25,940 --> 00:00:28,760 So context is going to be a very important argument in this case. 8 00:00:28,880 --> 00:00:32,630 The reason for that is that whenever we navigate to this ticket show component, we're going to have 9 00:00:32,630 --> 00:00:34,330 that I.D. inside the euro. 10 00:00:34,680 --> 00:00:39,290 I mean, to extract that I.D. so we can understand exactly what ticket we're trying to fetch information 11 00:00:39,290 --> 00:00:41,480 about to extract that I.D.. 12 00:00:42,860 --> 00:00:47,030 We're going to take ticket I.D. from context, dot query. 13 00:00:48,580 --> 00:00:53,020 We are specifically pulling out a property called ticket I.D. because that is what we named this file. 14 00:00:53,340 --> 00:00:55,570 So whatever you name the file inside those square brackets. 15 00:00:55,810 --> 00:00:59,290 That is the query or part of the query that is going to be extracted. 16 00:01:00,890 --> 00:01:04,700 Now that ticket I.D., we can take it and use it to make a request off to our API. 17 00:01:04,760 --> 00:01:06,380 Specifically the ticket service. 18 00:01:07,360 --> 00:01:10,840 The end point that we're going to try to reach out to, we take a look at our ticket service really 19 00:01:10,840 --> 00:01:12,870 quickly, is the show route. 20 00:01:13,300 --> 00:01:16,010 So we need to make a get request to API tickets. 21 00:01:16,090 --> 00:01:17,260 And then the actual I.D.. 22 00:01:21,800 --> 00:01:23,750 So I am going to extract data. 23 00:01:24,910 --> 00:01:31,190 From a weight line target, we'll use a template string here, so make sure you got the back ticks, 24 00:01:31,720 --> 00:01:34,660 API tickets, ticket I.D.. 25 00:01:36,620 --> 00:01:39,200 And then we can return a object here. 26 00:01:40,130 --> 00:01:43,520 I'm going to assign that data to the ticket property. 27 00:01:43,700 --> 00:01:45,120 So very similar to what we just shot. 28 00:01:45,140 --> 00:01:48,170 Saw it inside of our index J.S. file or the landing page. 29 00:01:48,590 --> 00:01:53,330 This object right here is now going to be merged into all the different props that are provided to ticket 30 00:01:53,330 --> 00:01:53,690 show. 31 00:01:54,320 --> 00:01:57,650 So we can d structure out just ticket. 32 00:01:57,710 --> 00:01:58,340 And that's gonna be it. 33 00:01:58,340 --> 00:01:58,730 Whatever. 34 00:01:58,730 --> 00:02:00,380 We just got back from our API. 35 00:02:01,650 --> 00:02:04,740 So then inside the component, we can start to show information from that ticket. 36 00:02:06,220 --> 00:02:07,450 Let's empty out active. 37 00:02:08,670 --> 00:02:10,290 I'm going to replace it with an H1. 38 00:02:12,540 --> 00:02:15,810 Inside the H1, let's put into some information about the ticket. 39 00:02:15,900 --> 00:02:16,920 So how about. 40 00:02:17,990 --> 00:02:19,190 The ticket's title. 41 00:02:21,570 --> 00:02:23,820 Maybe I will also show an age for. 42 00:02:25,070 --> 00:02:27,940 With the price we'll put in ticket price. 43 00:02:29,490 --> 00:02:31,920 And I should be at least enough for us to get started with. 44 00:02:32,590 --> 00:02:33,420 So I got to save this. 45 00:02:34,060 --> 00:02:34,800 I'll flip back over. 46 00:02:35,850 --> 00:02:36,450 And there we go. 47 00:02:36,510 --> 00:02:38,370 I've got my title and my price. 48 00:02:40,460 --> 00:02:40,680 OK. 49 00:02:40,880 --> 00:02:41,630 That was easy enough. 50 00:02:41,900 --> 00:02:43,820 So what is the real goal of this component? 51 00:02:44,300 --> 00:02:49,760 Remember, the real goal of ticket show is to present a button to the user that they can click to purchase 52 00:02:49,790 --> 00:02:50,420 this ticket. 53 00:02:51,140 --> 00:02:55,400 Now, when we say purchase a ticket, what we're really talking about here is creating an order. 54 00:02:55,490 --> 00:02:58,960 Remember, that is how a user expresses the intent to purchase the ticket inside of rap. 55 00:02:59,690 --> 00:03:03,660 So we need to show a button that says something like purchase whenever a user clicks that we're going 56 00:03:03,670 --> 00:03:04,960 make a request to our back end. 57 00:03:05,000 --> 00:03:10,340 Specifically, the orders, service and attempt to create an order referencing this ticket. 58 00:03:10,970 --> 00:03:11,810 So let's get to it. 59 00:03:12,440 --> 00:03:16,160 The first thing we probably need inside of here is a button element, something for the user to click 60 00:03:16,160 --> 00:03:16,370 on. 61 00:03:17,820 --> 00:03:22,330 They'll put in a button with the glass name of BGN ETN primary. 62 00:03:24,290 --> 00:03:28,520 And inside the button, arguments and text of purchase, just like we saw it in the Mark-Up. 63 00:03:30,200 --> 00:03:34,530 Now, we need to make sure that whenever user clicks on this thing, we make requests to our order service. 64 00:03:35,010 --> 00:03:39,630 Once again, let's get a quick reminder on how we create an order by taking a quick glance at that order 65 00:03:39,630 --> 00:03:46,020 service, trying to find order service, SIRC routes and then new dot t. 66 00:03:46,030 --> 00:03:46,430 S. 67 00:03:47,340 --> 00:03:51,930 So to create a new order, we're going to make a post request to API slash orders and all we really 68 00:03:51,930 --> 00:03:54,120 have to do here is include the ticket I.D.. 69 00:03:54,450 --> 00:03:55,260 That's pretty much it. 70 00:03:56,190 --> 00:03:57,480 Well, this should be pretty straightforward. 71 00:03:58,850 --> 00:04:02,270 Back inside of our components, we're going to once again import that U.S. 72 00:04:02,330 --> 00:04:04,340 Request hook that we had previously created. 73 00:04:05,150 --> 00:04:07,220 We will make use of the hook at the top of the component. 74 00:04:07,340 --> 00:04:11,750 Remember, that's in give us that do request function that we can then call at any future point time 75 00:04:11,750 --> 00:04:12,890 to run the request. 76 00:04:14,970 --> 00:04:17,440 At the top, I'm going to import U.S. 77 00:04:17,530 --> 00:04:18,130 Request. 78 00:04:20,550 --> 00:04:24,780 From up to directories, folks use request. 79 00:04:27,370 --> 00:04:28,690 Then inside of a component. 80 00:04:29,750 --> 00:04:33,020 I'll get my due request function, Andy. 81 00:04:33,140 --> 00:04:34,460 Possible heirs object. 82 00:04:35,930 --> 00:04:37,310 From calling it use request. 83 00:04:39,410 --> 00:04:45,420 And then remember, to use request, we have to pass in the URL, the body, the method and on success. 84 00:04:45,990 --> 00:04:47,400 So our Eurail in this case. 85 00:04:48,470 --> 00:04:50,060 We'll be API orders. 86 00:04:51,230 --> 00:04:52,970 The method will be simply post. 87 00:04:54,330 --> 00:05:00,550 Our body is going to be the idea of the ticket that we want to purchase, so ticket I.D. is ticket dot 88 00:05:00,720 --> 00:05:01,120 I.D.. 89 00:05:03,290 --> 00:05:04,790 And then finally on success. 90 00:05:06,150 --> 00:05:11,430 Right now, we'll take the actual order that gets sent back to us to remember on success is going to 91 00:05:11,430 --> 00:05:13,920 be invoked with whatever response we get back on the request. 92 00:05:14,370 --> 00:05:17,220 So in this case, hopefully it will be the order that was created. 93 00:05:17,880 --> 00:05:20,730 And then right now, we'll just do a simple console log of that order. 94 00:05:23,300 --> 00:05:28,690 And finally, right above this button will display the ears, J.S. X. 95 00:05:28,760 --> 00:05:32,570 So again, that's only if there is something wrong or something went wrong with the request. 96 00:05:33,230 --> 00:05:36,950 And then on the button itself, we'll put on an on click. 97 00:05:38,580 --> 00:05:42,240 So any time someone clicks this button, we will invoke do request. 98 00:05:43,730 --> 00:05:46,070 I will call do request. 99 00:05:46,300 --> 00:05:50,360 They're really important here, remember, we are providing a reference to the do request function so 100 00:05:50,360 --> 00:05:52,400 that it can be called at some future point in time. 101 00:05:52,970 --> 00:05:55,610 So we do not want to have any parentheses on this thing. 102 00:05:56,030 --> 00:06:00,680 If you put parentheses on this, then do request to be called the instant this component is first rendered. 103 00:06:00,850 --> 00:06:03,890 The no parentheses just do request by itself. 104 00:06:05,970 --> 00:06:06,240 All right. 105 00:06:06,420 --> 00:06:07,230 I think this looks good. 106 00:06:07,530 --> 00:06:09,000 I think we're ready for another test. 107 00:06:10,080 --> 00:06:10,750 I'm going to save it. 108 00:06:11,380 --> 00:06:12,040 Flip back over. 109 00:06:14,800 --> 00:06:15,580 So there's my button. 110 00:06:16,320 --> 00:06:18,430 I'm going to pull open my network request log. 111 00:06:19,710 --> 00:06:20,970 And I'll hit purchase. 112 00:06:21,990 --> 00:06:23,430 Well, it looks like the request went off. 113 00:06:23,970 --> 00:06:27,270 I got back a status to a one which indicates that an order was created. 114 00:06:27,660 --> 00:06:31,470 And if I take a look at my console as well, we'll see the order printed out right here. 115 00:06:32,190 --> 00:06:32,760 This looks great. 116 00:06:33,880 --> 00:06:38,890 Now, do keep in mind that the tickets corresponding to this has now been reserved, in theory at least, 117 00:06:38,890 --> 00:06:40,780 hopefully everything on the back end is actually working. 118 00:06:41,410 --> 00:06:46,000 So if I now tried to create another order right away, I should probably see an error message. 119 00:06:46,390 --> 00:06:48,400 Something says that the ticket is already reserved. 120 00:06:49,180 --> 00:06:53,050 So if we want to now create another order around this ticket, we're going to have to wait for the first 121 00:06:53,080 --> 00:06:57,490 order to time out, which right now we have encoded as being about 60 seconds. 122 00:06:57,970 --> 00:07:02,590 So if I were to wait around for another 30 seconds or so, I should build a hit purchase again and see 123 00:07:02,590 --> 00:07:06,070 a second order created because the first one will have had expired. 124 00:07:07,420 --> 00:07:08,650 All right, well, I'd say it looks pretty good. 125 00:07:08,920 --> 00:07:10,880 Good progress or tick? 126 00:07:10,960 --> 00:07:12,760 Going to take another pause right here when we come back. 127 00:07:12,790 --> 00:07:17,560 Next video, we'll make sure that after we successfully create the order, we can navigate the user 128 00:07:17,590 --> 00:07:21,520 over to a page that's going to show details about the order until the user. 129 00:07:21,550 --> 00:07:23,710 How much longer they have to actually pay the order.