1 00:00:00,800 --> 00:00:04,100 In this video we're going to continue working on our stream delete component. 2 00:00:04,140 --> 00:00:06,940 It's still a couple of good things we need to do inside of here. 3 00:00:07,060 --> 00:00:09,250 So we need to make sure that we click on that delete button. 4 00:00:09,250 --> 00:00:12,670 We actually attempt to delete the stream when we click on cancel. 5 00:00:12,700 --> 00:00:14,690 We need to make sure we dismiss the motile. 6 00:00:14,980 --> 00:00:20,280 And finally it would be really helpful if the user understood what stream they were trying to delete. 7 00:00:20,440 --> 00:00:25,330 So it would be really nice if maybe inside of content right here we printed out the title of the stream 8 00:00:25,390 --> 00:00:29,770 that the user was about to delete because otherwise there's really no indication on this when to right 9 00:00:29,770 --> 00:00:32,490 here of which stream is about to get deleted. 10 00:00:32,500 --> 00:00:37,570 So in order to show the title of a given stream we mean need to make sure that we have first loaded 11 00:00:37,600 --> 00:00:39,520 it up into our application. 12 00:00:39,520 --> 00:00:43,600 We've already gone through this entire flow before back on our edit stream page. 13 00:00:43,610 --> 00:00:48,490 So remember if we come over here to edits we spoke at great length about how if a user refreshes the 14 00:00:48,490 --> 00:00:52,230 page while they were here or if they navigated directly to this you are l. 15 00:00:52,360 --> 00:00:57,340 We need to first fetch the stream with idea of three before we could show its title and description 16 00:00:57,490 --> 00:00:59,210 inside of this form right here. 17 00:00:59,260 --> 00:01:03,640 So we're going to go through the entire same process of making sure that we reflect the idea of the 18 00:01:03,640 --> 00:01:06,220 stream that the user is trying to delete inside the OR. 19 00:01:06,370 --> 00:01:10,690 We're going to make sure that we attempt to fetch that stream from our API and then we're going to get 20 00:01:10,690 --> 00:01:15,220 the stream into our component so we can print the title of it inside of the motel itself. 21 00:01:15,220 --> 00:01:20,170 All right so first thing we are going to have to do is make sure that rather than showing that motile 22 00:01:20,230 --> 00:01:26,590 when a user goes to stream's slash delete we instead want to show the motile when a user goes to stream's 23 00:01:26,680 --> 00:01:36,070 slash delete slash and then the idea of some stream like maybe 3 or 52 or one thousand five or ten thousand 24 00:01:36,070 --> 00:01:37,550 five or whatever it might be. 25 00:01:37,900 --> 00:01:42,720 So the first thing we need to do here is make sure we update the route that a user can go to to show 26 00:01:42,790 --> 00:01:44,980 that particular screen. 27 00:01:44,980 --> 00:01:49,000 All right so I'm going to get started inside of my apt J.S. file. 28 00:01:49,060 --> 00:01:52,950 So inside of aptest J.S. Right here we have streams slash delete. 29 00:01:52,990 --> 00:01:57,640 So we want to make sure that the you are l now includes the idea of the stream that the user is trying 30 00:01:57,640 --> 00:01:58,580 to get rid of. 31 00:01:58,640 --> 00:02:01,350 So I can put in slash colon Id like so 32 00:02:05,000 --> 00:02:05,690 OK. 33 00:02:05,840 --> 00:02:10,730 Now the next thing that I want to do at present we are trying to manually navigate to like navigate 34 00:02:10,730 --> 00:02:13,580 to local district thousands slash streams slash delete. 35 00:02:13,610 --> 00:02:18,060 We don't actually have the ability to click on the delete button over here and bring up that motile. 36 00:02:18,200 --> 00:02:21,500 So the next thing I want to do is make sure that ain't some user clicks on this delete button right 37 00:02:21,500 --> 00:02:21,900 here. 38 00:02:21,950 --> 00:02:27,000 We navigate to the appropriate you are all to attempt to delete this very particular stream. 39 00:02:27,110 --> 00:02:34,910 So to do so I'm going to open up my stream list component stream list remember inside of your we have 40 00:02:34,910 --> 00:02:37,770 the render admin helper method right here. 41 00:02:37,880 --> 00:02:40,770 And at present it is showing that simple button element. 42 00:02:40,820 --> 00:02:45,930 So rather than having a button element I want to instead show a link element that a user can click on 43 00:02:45,930 --> 00:02:48,890 it to navigate over to the stream delete page. 44 00:02:48,980 --> 00:02:52,900 So I'm going to replace the button with link instead 45 00:02:57,740 --> 00:03:04,430 I'm going to turn this thing into a multi-line GSX element like so and we're going to add on the two 46 00:03:04,610 --> 00:03:06,350 prop to this as well. 47 00:03:06,350 --> 00:03:11,750 Now just as before we're going to do a little bit of string interpellation here to assign the to property 48 00:03:11,840 --> 00:03:14,910 because we want to get the ID inside of this you are. 49 00:03:14,930 --> 00:03:16,820 Or this path. 50 00:03:16,940 --> 00:03:19,130 So on a two property I'll put on my curly braces. 51 00:03:19,160 --> 00:03:22,090 I'll put in my back ticks again make sure you have back next year. 52 00:03:22,130 --> 00:03:23,960 Not single quotes. 53 00:03:23,960 --> 00:03:29,010 And then I'll do stream's delete and then Dollar Sign Crilley braes. 54 00:03:29,390 --> 00:03:34,420 The idea of the stream that we're trying to delete. 55 00:03:34,460 --> 00:03:36,770 All right so let's save this now. 56 00:03:36,890 --> 00:03:38,060 We'll flip back over. 57 00:03:38,060 --> 00:03:39,790 I'm now at my streamlets component again. 58 00:03:39,800 --> 00:03:43,340 I should now be able to click on delete and see the motile appear. 59 00:03:43,340 --> 00:03:48,050 In addition if I look at the URL or the Pathi or at the top I should see streams delete and then the 60 00:03:48,050 --> 00:03:52,820 idea of the stream that I'm trying to delete for me in this case it is the stream with an ID of three 61 00:03:53,960 --> 00:03:55,190 OK so that looks pretty good. 62 00:03:55,190 --> 00:03:56,320 That's a good improvement. 63 00:03:56,510 --> 00:04:01,010 So now that we know what stream we're trying to delete We need to make sure that we attempt to fetch 64 00:04:01,010 --> 00:04:07,910 the stream from our API so that if a user refreshes this page we will still have fetched that stream 65 00:04:08,030 --> 00:04:13,070 with the idea of 3 so we can show some details about it inside the body or the content area of this 66 00:04:13,070 --> 00:04:14,010 model. 67 00:04:14,030 --> 00:04:15,130 So let's take a pause right here. 68 00:04:15,140 --> 00:04:19,160 When we come back the next section we're going to start working on that inside of our stream delete 69 00:04:19,190 --> 00:04:19,700 component.