1 00:00:00,890 --> 00:00:06,520 All right my friends we now have the ability to list out streams create them edit them and delete them. 2 00:00:06,650 --> 00:00:11,840 So in this video we're going to start working on the last big page of our application the show stream 3 00:00:11,900 --> 00:00:13,040 page. 4 00:00:13,040 --> 00:00:18,200 Now whenever a user comes to the path of streams slash three we're going to want to show this page right 5 00:00:18,200 --> 00:00:22,790 here that has some details about the stream and eventually that video player as well. 6 00:00:22,790 --> 00:00:27,170 Remember we're not going to really worry about the video player or the actual streaming of video until 7 00:00:27,170 --> 00:00:32,200 the very end of the application because the real idea behind us app was to show you crud operations 8 00:00:32,210 --> 00:00:36,880 remember create replays update destroy Razmi create read update destroy. 9 00:00:37,220 --> 00:00:41,390 So we're going to first focus on just making sure that we can load up this particular stream and show 10 00:00:41,390 --> 00:00:44,060 some details about it on the page. 11 00:00:44,060 --> 00:00:48,350 That entire process is going to be just about identical to what we've now gone through with edits and 12 00:00:48,350 --> 00:00:49,100 delete. 13 00:00:49,100 --> 00:00:54,020 So we're going to want to make a class based component that's going to attempt to look at the your l 14 00:00:54,440 --> 00:01:00,080 find the ID inside there fetch that stream get the stream out of our redux store and then show it inside 15 00:01:00,080 --> 00:01:03,620 the render method pretty much the same thing we've now done twice over. 16 00:01:03,770 --> 00:01:06,140 So let's get to it to get started. 17 00:01:06,200 --> 00:01:10,300 Going to first open up my apt J.S. file inside of aptest. 18 00:01:10,370 --> 00:01:16,010 Yes I'm going to make sure that I update my route right here from streams slash show because remember 19 00:01:16,010 --> 00:01:23,850 that was kind of like a stand in route to instead be streams slash colon Id like so. 20 00:01:23,880 --> 00:01:30,620 So then I'll save this and now the next thing we want to do is make sure that on our stream list so 21 00:01:30,620 --> 00:01:35,300 the stream list over here any time that we click on like this header right here I want to navigate over 22 00:01:35,300 --> 00:01:40,070 to the appropriate component like I want to navigate over two streams slash. 23 00:01:40,070 --> 00:01:42,970 The idea that stream I had just clicked on. 24 00:01:43,040 --> 00:01:50,920 So in order to do so I'm going to open up my stream list file stream list I'm going to scroll down a 25 00:01:50,920 --> 00:01:53,870 little bit and I'll find render list right here. 26 00:01:54,680 --> 00:01:59,690 So inside of render list we've got the div that contains the stream's title. 27 00:01:59,690 --> 00:02:04,910 So we're going to want to wrap that with a link element from re-act Rotterdam so that whenever user 28 00:02:04,910 --> 00:02:09,590 clicks on that title right there we attempt to navigate the user over to the appropriate page. 29 00:02:09,590 --> 00:02:15,380 So I going to first make sure that we have imported the link tag or the link component from re-act Rotterdam. 30 00:02:15,380 --> 00:02:16,940 So go up to the top here really quickly. 31 00:02:16,980 --> 00:02:19,330 Yep we've got that import right there. 32 00:02:19,400 --> 00:02:28,630 So go back down to render list and I'm going to wrap that stream title with link. 33 00:02:28,730 --> 00:02:31,140 It's now going to pass this thing a prop. 34 00:02:31,330 --> 00:02:33,210 Now just as we've seen many times before. 35 00:02:33,250 --> 00:02:38,440 We're going to want to customize the path that this attempt to navigate to only when this thing gets 36 00:02:38,440 --> 00:02:43,100 rendered because we essentially want to take the idea off the stream and customize that path. 37 00:02:43,120 --> 00:02:48,220 So inside of a set of curly braces I'm going to place back ticks as usual not single quotes here we're 38 00:02:48,220 --> 00:02:49,620 making use of tactics. 39 00:02:49,850 --> 00:02:56,120 And I'll say slash dreams slash dollar sign Crilley brace stream dot ID. 40 00:02:56,400 --> 00:03:00,810 So that's going to generate a path very much like the one that we want it will be streamed slash in 41 00:03:00,820 --> 00:03:03,640 on the idea of the stream that we're trying to visit. 42 00:03:03,640 --> 00:03:07,890 I'm also going to add on a class name to this link element of Hetter. 43 00:03:08,080 --> 00:03:11,190 Like so. 44 00:03:11,260 --> 00:03:11,510 All right. 45 00:03:11,530 --> 00:03:14,550 Let's now save this and we'll flip back over. 46 00:03:14,830 --> 00:03:19,490 And it looks like I now have links on the title of each of those different streams. 47 00:03:19,720 --> 00:03:22,540 So let's now try clicking on one of these and just see what happens. 48 00:03:23,350 --> 00:03:23,580 OK. 49 00:03:23,620 --> 00:03:26,940 So I come over here and I see it streams show up on the screen. 50 00:03:27,040 --> 00:03:29,700 I can go back and go to other stream. 51 00:03:29,710 --> 00:03:32,180 Notice how I'm now at stream's slashed too. 52 00:03:32,350 --> 00:03:35,330 And if I go back to the original one I meant streams slash 1. 53 00:03:35,410 --> 00:03:35,720 OK. 54 00:03:35,740 --> 00:03:37,240 That looks pretty darn good. 55 00:03:37,240 --> 00:03:38,660 Now let's take a quick pause right here. 56 00:03:38,680 --> 00:03:42,730 When we come back the next section will start working on our stream show component.