In this video we're going to continue working on our stream delete component.
It's still a couple of good things we need to do inside of here.
So we need to make sure that we click on that delete button.
We actually attempt to delete the stream when we click on cancel.
We need to make sure we dismiss the motile.
And finally it would be really helpful if the user understood what stream they were trying to delete.
So it would be really nice if maybe inside of content right here we printed out the title of the stream
that the user was about to delete because otherwise there's really no indication on this when to right
here of which stream is about to get deleted.
So in order to show the title of a given stream we mean need to make sure that we have first loaded
it up into our application.
We've already gone through this entire flow before back on our edit stream page.
So remember if we come over here to edits we spoke at great length about how if a user refreshes the
page while they were here or if they navigated directly to this you are l.
We need to first fetch the stream with idea of three before we could show its title and description
inside of this form right here.
So we're going to go through the entire same process of making sure that we reflect the idea of the
stream that the user is trying to delete inside the OR.
We're going to make sure that we attempt to fetch that stream from our API and then we're going to get
the stream into our component so we can print the title of it inside of the motel itself.
All right so first thing we are going to have to do is make sure that rather than showing that motile
when a user goes to stream's slash delete we instead want to show the motile when a user goes to stream's
slash delete slash and then the idea of some stream like maybe 3 or 52 or one thousand five or ten thousand
five or whatever it might be.
So the first thing we need to do here is make sure we update the route that a user can go to to show
that particular screen.
All right so I'm going to get started inside of my apt J.S. file.
So inside of aptest J.S. Right here we have streams slash delete.
So we want to make sure that the you are l now includes the idea of the stream that the user is trying
to get rid of.
So I can put in slash colon Id like so
OK.
Now the next thing that I want to do at present we are trying to manually navigate to like navigate
to local district thousands slash streams slash delete.
We don't actually have the ability to click on the delete button over here and bring up that motile.
So the next thing I want to do is make sure that ain't some user clicks on this delete button right
here.
We navigate to the appropriate you are all to attempt to delete this very particular stream.
So to do so I'm going to open up my stream list component stream list remember inside of your we have
the render admin helper method right here.
And at present it is showing that simple button element.
So rather than having a button element I want to instead show a link element that a user can click on
it to navigate over to the stream delete page.
So I'm going to replace the button with link instead
I'm going to turn this thing into a multi-line GSX element like so and we're going to add on the two
prop to this as well.
Now just as before we're going to do a little bit of string interpellation here to assign the to property
because we want to get the ID inside of this you are.
Or this path.
So on a two property I'll put on my curly braces.
I'll put in my back ticks again make sure you have back next year.
Not single quotes.
And then I'll do stream's delete and then Dollar Sign Crilley braes.
The idea of the stream that we're trying to delete.
All right so let's save this now.
We'll flip back over.
I'm now at my streamlets component again.
I should now be able to click on delete and see the motile appear.
In addition if I look at the URL or the Pathi or at the top I should see streams delete and then the
idea of the stream that I'm trying to delete for me in this case it is the stream with an ID of three
OK so that looks pretty good.
That's a good improvement.
So now that we know what stream we're trying to delete We need to make sure that we attempt to fetch
the stream from our API so that if a user refreshes this page we will still have fetched that stream
with the idea of 3 so we can show some details about it inside the body or the content area of this
model.
So let's take a pause right here.
When we come back the next section we're going to start working on that inside of our stream delete
component.