1 00:00:00,770 --> 00:00:04,580 The last thing we have to do with our stream delete modal is make sure that these two buttons right 2 00:00:04,580 --> 00:00:07,320 here delete and cancel actually do something. 3 00:00:07,370 --> 00:00:11,170 So the cancel button is going to be pretty easy with the cancel button if a user clicks on it. 4 00:00:11,180 --> 00:00:15,060 We probably want to have the same behavior as a user clicking in the background. 5 00:00:15,110 --> 00:00:19,920 So if a user clicks on cancel we probably want to just take the user back to the stream's list page 6 00:00:20,250 --> 00:00:22,510 sort of wired that up it's going be pretty straightforward. 7 00:00:22,550 --> 00:00:28,400 We can either do some programmatic navigation with a click event on the cancel button or we can just 8 00:00:28,400 --> 00:00:33,210 turn this cancel button into re-act router Dom link tag instead. 9 00:00:33,500 --> 00:00:37,550 I think that we should probably make it that link tag because that's the real purpose of the link element. 10 00:00:37,550 --> 00:00:42,900 It's supposed to show some clickable thing that the user can click on to navigate around her application. 11 00:00:43,010 --> 00:00:45,640 So back inside of stream delete at the very top. 12 00:00:45,680 --> 00:00:51,390 I'm going to import link from re-act router. 13 00:00:51,470 --> 00:00:52,240 Damn. 14 00:00:52,270 --> 00:00:54,540 Now remember get the dash bomb inside of your. 15 00:00:54,550 --> 00:00:57,510 And don't forget to put in curly braces around link as well. 16 00:00:58,580 --> 00:01:03,960 So now down inside of render actions instead of showing the button with the text cancel all instead 17 00:01:03,960 --> 00:01:05,710 show a link. 18 00:01:06,030 --> 00:01:11,940 So update both those tags and then will assign the to property and will say anyone that anytime someone 19 00:01:11,940 --> 00:01:18,530 clicks on this will take them back to the root route which is our list of streams. 20 00:01:18,570 --> 00:01:24,790 So now save that we can flip back over and try clicking on cancell when I click on it. 21 00:01:24,790 --> 00:01:26,650 I go back to my list of streams. 22 00:01:26,750 --> 00:01:33,130 Now I can click on delete and cancel back and forth and toggle the presence of that motile perfect. 23 00:01:33,190 --> 00:01:37,700 So now the next thing we need to do is make sure we have the ability to delete the stream as well. 24 00:01:37,930 --> 00:01:40,610 So we're going to flip back over again. 25 00:01:40,770 --> 00:01:46,140 Again look at my render actions method right here and find the button with the text delete. 26 00:01:46,180 --> 00:01:51,700 So in this case we do not want to make a link elmet because link is for navigation with this button 27 00:01:51,700 --> 00:01:52,200 right here. 28 00:01:52,210 --> 00:01:56,200 We want to make sure that any time a user clicks on this thing we call an action creator. 29 00:01:56,210 --> 00:02:01,690 That's going to attempt to reach out to our API and delete that very particular stream. 30 00:02:01,690 --> 00:02:07,600 Now let's very quickly flip on over to the action creators file and side of actions indexed us and just 31 00:02:07,600 --> 00:02:13,200 get a quick reminder of how the delete stream action creator works sit down at the bottom of that file. 32 00:02:13,220 --> 00:02:15,070 We have delete Stream right here. 33 00:02:15,140 --> 00:02:20,170 Remember any time that we call delete stream we just pass in the idea the stream that we want to delete. 34 00:02:20,390 --> 00:02:21,780 And that's pretty much it. 35 00:02:21,800 --> 00:02:24,790 The redux side of our application will take it from there. 36 00:02:24,800 --> 00:02:27,630 There is one thing we are going to have to do inside this section creator. 37 00:02:27,730 --> 00:02:29,690 Remember inside of edit Stream. 38 00:02:29,810 --> 00:02:32,090 And I think create stream as well. 39 00:02:32,090 --> 00:02:37,940 We had eventually decided that after a user successfully deletes or creates or edits or whatever a stream 40 00:02:38,150 --> 00:02:41,770 we wanted to automatically navigate them back to the root route of our application. 41 00:02:41,870 --> 00:02:44,770 So we probably want to do that on delete stream as well. 42 00:02:45,110 --> 00:02:49,520 Let's first make sure that we can get this action creedo work in and will out in the history push. 43 00:02:49,520 --> 00:02:53,690 After that in case we need to do a little bit of trouble shooting we probably don't want to automatically 44 00:02:53,900 --> 00:02:55,700 navigate back. 45 00:02:55,700 --> 00:02:57,320 All right so back inside of stream delete. 46 00:02:57,500 --> 00:03:02,300 I'm going to go up to the top of the file and I'm going to make sure that I add in my action creator 47 00:03:02,300 --> 00:03:08,410 of delete stream then down at the very bottom of the file. 48 00:03:10,150 --> 00:03:17,120 I'm going to make sure that I add an delete stream to the connect function right next to fetch Stream. 49 00:03:17,270 --> 00:03:24,230 And then finally if I go back up to render actions I can find my button right here and I can add on 50 00:03:24,260 --> 00:03:31,350 and on click handler so to this function I'm going to pass an arrow function I'm passing an arrow function 51 00:03:31,350 --> 00:03:37,380 here because I want to be able to call delete stream with the particular ID if we just put in something 52 00:03:37,380 --> 00:03:43,400 like this not Propst dot delete stream we're passing in a reference to that function which is correct. 53 00:03:43,410 --> 00:03:46,300 But in this case it would not be called with the appropriate ID. 54 00:03:46,440 --> 00:03:51,450 If we put in the idea right away like so then the action creator would be invoked the instant render 55 00:03:51,450 --> 00:03:55,050 actions was Kalt and neither of those things is what we want. 56 00:03:55,080 --> 00:03:57,280 So that's why we're using the arrow function here. 57 00:03:57,510 --> 00:04:02,850 We can pass off the arrow function that allows us to only call delete stream at some point in the future 58 00:04:02,880 --> 00:04:07,860 because we are passing a reference to a function off to unclick and we can also pasand the idea of the 59 00:04:07,860 --> 00:04:08,860 stream that want to delete. 60 00:04:08,880 --> 00:04:10,720 At that point as well. 61 00:04:10,830 --> 00:04:15,120 Now this line right here that we're going to pass off to unclick is going to be a little bit long because 62 00:04:15,120 --> 00:04:21,210 we want to call this dot Propst dot delete stream and we want to pass in the idea of the stream that 63 00:04:21,210 --> 00:04:22,100 we want to delete. 64 00:04:22,290 --> 00:04:27,960 And that's essentially the idea up there remember it's this prop's prams or match BRAMs ID so rather 65 00:04:27,960 --> 00:04:34,160 than referencing that really long thing right there I think we should instead do a little bit of re-assignment 66 00:04:34,200 --> 00:04:34,890 up here. 67 00:04:34,890 --> 00:04:41,700 So above return's render or see above the return statement I'm going to say Konst ID is this stop prop's 68 00:04:42,150 --> 00:04:49,970 match Puranas ID and then we could pass an ID much more easily like so. 69 00:04:49,970 --> 00:04:51,720 So there's my ID. 70 00:04:51,760 --> 00:04:56,680 Now if you wanted to we could clean up this Asuna right here with a little bit of yes 2015 so we could 71 00:04:56,680 --> 00:05:02,740 actually just structure out the ID property by placing curly braces right there and then deleting dot 72 00:05:02,770 --> 00:05:03,970 ID off the end. 73 00:05:04,180 --> 00:05:11,880 So now it's just this prop's match prams get the ID pass the ID off to delete stream. 74 00:05:11,910 --> 00:05:13,610 Ok so it looks pretty good. 75 00:05:14,100 --> 00:05:15,150 Let's save this. 76 00:05:15,150 --> 00:05:20,460 When I save it the button element right here is probably going to get refactored a little bit or reformatted 77 00:05:20,490 --> 00:05:21,330 I suppose. 78 00:05:21,720 --> 00:05:23,960 And that's what we end up with right there. 79 00:05:26,120 --> 00:05:27,820 All right so now is the moment of truth. 80 00:05:27,960 --> 00:05:29,310 I'm going to flip back over. 81 00:05:29,390 --> 00:05:32,160 I'm going to refresh the page just to make sure I got my update. 82 00:05:32,210 --> 00:05:36,740 I'm going to open up my network request log right here and then we're going to click on delete and when 83 00:05:36,740 --> 00:05:42,650 we do I'm going to make sure that I see a delete request over to my API attempting to delete the stream 84 00:05:42,650 --> 00:05:44,060 with ID of 3. 85 00:05:44,270 --> 00:05:47,840 So I click on delete and now I see two requests right here. 86 00:05:47,870 --> 00:05:51,730 The first one is options remember options is related to core's requests. 87 00:05:51,740 --> 00:05:56,210 If you've ever heard about that not super important for what we are doing right now but the second request 88 00:05:56,240 --> 00:05:59,380 is the delete request and it looks like it was successful. 89 00:06:00,340 --> 00:06:01,180 So I got to 200. 90 00:06:01,180 --> 00:06:06,640 OK in response and remember whenever we make a delete request if we are following restful conventions 91 00:06:06,640 --> 00:06:11,960 which are based on API server is we get no response so we got nothing back. 92 00:06:11,960 --> 00:06:16,230 Technically technically we did get response here I think it's just an empty object but the empty object 93 00:06:16,240 --> 00:06:17,830 contains no properties whatsoever. 94 00:06:17,830 --> 00:06:20,670 So essentially it's an empty response. 95 00:06:20,680 --> 00:06:26,770 All right so now if I click on cancel right here and go back to my list of streams I no longer see the 96 00:06:26,770 --> 00:06:28,210 stream on my list. 97 00:06:28,330 --> 00:06:29,880 And if I refresh the page. 98 00:06:29,980 --> 00:06:32,350 Yep that stream is still gone. 99 00:06:32,350 --> 00:06:34,090 OK so this looks fantastic. 100 00:06:34,120 --> 00:06:35,510 Now SE1 do very quickly. 101 00:06:35,530 --> 00:06:40,240 Let's take care of making sure that we navigate the user back over to the list of streams after the 102 00:06:40,240 --> 00:06:41,710 stream is deleted. 103 00:06:41,740 --> 00:06:45,090 So I can go back over to my actions index not just file. 104 00:06:45,430 --> 00:06:52,780 So the action Kreator file I'll go down to the bottom where at the delete stream action creator and 105 00:06:52,780 --> 00:06:55,150 we'll just out in history push. 106 00:06:55,420 --> 00:07:01,240 So now after a user deletes the stream we're going to automatically navigate them back to our big list 107 00:07:01,240 --> 00:07:02,740 of streams. 108 00:07:02,740 --> 00:07:07,390 All right so I'll save this and we'll flip back over and do one last quick test here. 109 00:07:07,540 --> 00:07:11,560 Now I don't have any more streams that I can delete so I'm going to create one very quickly. 110 00:07:11,740 --> 00:07:18,280 I'll make a stream with the title of I don't know delete me delete me as the description. 111 00:07:18,280 --> 00:07:19,160 I'll submit it. 112 00:07:19,940 --> 00:07:26,130 Now click on Delete delete again and I get returned back to my big list of streams. 113 00:07:26,150 --> 00:07:26,540 All right. 114 00:07:26,540 --> 00:07:27,440 That's pretty much it. 115 00:07:27,440 --> 00:07:28,500 Not bad. 116 00:07:28,520 --> 00:07:34,070 So we've now got some major Pinnacle's of creating streams listing them editing deleting them all that 117 00:07:34,070 --> 00:07:35,120 kind of good stuff. 118 00:07:35,120 --> 00:07:39,650 I think the last big thing we need to work on is having the ability to actually show a stream to a user 119 00:07:40,070 --> 00:07:41,720 and play some video. 120 00:07:41,720 --> 00:07:45,140 So this is of course going to be a pretty interesting little part. 121 00:07:45,140 --> 00:07:48,830 Let's take a pause right here and we'll start to tackle this part in the next video.