The last thing we have to do with our stream delete modal is make sure that these two buttons right
here delete and cancel actually do something.
So the cancel button is going to be pretty easy with the cancel button if a user clicks on it.
We probably want to have the same behavior as a user clicking in the background.
So if a user clicks on cancel we probably want to just take the user back to the stream's list page
sort of wired that up it's going be pretty straightforward.
We can either do some programmatic navigation with a click event on the cancel button or we can just
turn this cancel button into re-act router Dom link tag instead.
I think that we should probably make it that link tag because that's the real purpose of the link element.
It's supposed to show some clickable thing that the user can click on to navigate around her application.
So back inside of stream delete at the very top.
I'm going to import link from re-act router.
Damn.
Now remember get the dash bomb inside of your.
And don't forget to put in curly braces around link as well.
So now down inside of render actions instead of showing the button with the text cancel all instead
show a link.
So update both those tags and then will assign the to property and will say anyone that anytime someone
clicks on this will take them back to the root route which is our list of streams.
So now save that we can flip back over and try clicking on cancell when I click on it.
I go back to my list of streams.
Now I can click on delete and cancel back and forth and toggle the presence of that motile perfect.
So now the next thing we need to do is make sure we have the ability to delete the stream as well.
So we're going to flip back over again.
Again look at my render actions method right here and find the button with the text delete.
So in this case we do not want to make a link elmet because link is for navigation with this button
right here.
We want to make sure that any time a user clicks on this thing we call an action creator.
That's going to attempt to reach out to our API and delete that very particular stream.
Now let's very quickly flip on over to the action creators file and side of actions indexed us and just
get a quick reminder of how the delete stream action creator works sit down at the bottom of that file.
We have delete Stream right here.
Remember any time that we call delete stream we just pass in the idea the stream that we want to delete.
And that's pretty much it.
The redux side of our application will take it from there.
There is one thing we are going to have to do inside this section creator.
Remember inside of edit Stream.
And I think create stream as well.
We had eventually decided that after a user successfully deletes or creates or edits or whatever a stream
we wanted to automatically navigate them back to the root route of our application.
So we probably want to do that on delete stream as well.
Let's first make sure that we can get this action creedo work in and will out in the history push.
After that in case we need to do a little bit of trouble shooting we probably don't want to automatically
navigate back.
All right so back inside of stream delete.
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
of delete stream then down at the very bottom of the file.
I'm going to make sure that I add an delete stream to the connect function right next to fetch Stream.
And then finally if I go back up to render actions I can find my button right here and I can add on
and on click handler so to this function I'm going to pass an arrow function I'm passing an arrow function
here because I want to be able to call delete stream with the particular ID if we just put in something
like this not Propst dot delete stream we're passing in a reference to that function which is correct.
But in this case it would not be called with the appropriate ID.
If we put in the idea right away like so then the action creator would be invoked the instant render
actions was Kalt and neither of those things is what we want.
So that's why we're using the arrow function here.
We can pass off the arrow function that allows us to only call delete stream at some point in the future
because we are passing a reference to a function off to unclick and we can also pasand the idea of the
stream that want to delete.
At that point as well.
Now this line right here that we're going to pass off to unclick is going to be a little bit long because
we want to call this dot Propst dot delete stream and we want to pass in the idea of the stream that
we want to delete.
And that's essentially the idea up there remember it's this prop's prams or match BRAMs ID so rather
than referencing that really long thing right there I think we should instead do a little bit of re-assignment
up here.
So above return's render or see above the return statement I'm going to say Konst ID is this stop prop's
match Puranas ID and then we could pass an ID much more easily like so.
So there's my ID.
Now if you wanted to we could clean up this Asuna right here with a little bit of yes 2015 so we could
actually just structure out the ID property by placing curly braces right there and then deleting dot
ID off the end.
So now it's just this prop's match prams get the ID pass the ID off to delete stream.
Ok so it looks pretty good.
Let's save this.
When I save it the button element right here is probably going to get refactored a little bit or reformatted
I suppose.
And that's what we end up with right there.
All right so now is the moment of truth.
I'm going to flip back over.
I'm going to refresh the page just to make sure I got my update.
I'm going to open up my network request log right here and then we're going to click on delete and when
we do I'm going to make sure that I see a delete request over to my API attempting to delete the stream
with ID of 3.
So I click on delete and now I see two requests right here.
The first one is options remember options is related to core's requests.
If you've ever heard about that not super important for what we are doing right now but the second request
is the delete request and it looks like it was successful.
So I got to 200.
OK in response and remember whenever we make a delete request if we are following restful conventions
which are based on API server is we get no response so we got nothing back.
Technically technically we did get response here I think it's just an empty object but the empty object
contains no properties whatsoever.
So essentially it's an empty response.
All right so now if I click on cancel right here and go back to my list of streams I no longer see the
stream on my list.
And if I refresh the page.
Yep that stream is still gone.
OK so this looks fantastic.
Now SE1 do very quickly.
Let's take care of making sure that we navigate the user back over to the list of streams after the
stream is deleted.
So I can go back over to my actions index not just file.
So the action Kreator file I'll go down to the bottom where at the delete stream action creator and
we'll just out in history push.
So now after a user deletes the stream we're going to automatically navigate them back to our big list
of streams.
All right so I'll save this and we'll flip back over and do one last quick test here.
Now I don't have any more streams that I can delete so I'm going to create one very quickly.
I'll make a stream with the title of I don't know delete me delete me as the description.
I'll submit it.
Now click on Delete delete again and I get returned back to my big list of streams.
All right.
That's pretty much it.
Not bad.
So we've now got some major Pinnacle's of creating streams listing them editing deleting them all that
kind of good stuff.
I think the last big thing we need to work on is having the ability to actually show a stream to a user
and play some video.
So this is of course going to be a pretty interesting little part.
Let's take a pause right here and we'll start to tackle this part in the next video.