In last video we made sure that a user goes to your l like streams to lead and then an idea any time
they attempt to delete a stream.
So now we need to start to refactor the stream delete component.
We are going to turn it into a class based component and we're going to make sure that any time it gets
rendered to the screen it attempts to fetch the stream with the idea of three or whatever is actually
up year.
So we can show the title of it inside the body or content area of this modal.
All right.
So to get started I'm going to open up my stream delete component.
We're going to have to react to this over to a class based component because now we want to make use
of a lifecycle method component in Mt.
So we know when we should attempt to fetch or load up our stream.
So I'm going to delete the stream delete you're at the top and I will replace it with class stream delete
extends re-act component and then I'll open up a curly brace.
Then inside of this mishmash of syntax inside of here right now we need to place our render function.
We're going to put actions right here inside of a helper method.
So I'm going to first find the return keyword right here and I'm going to wrap it with a render method
so I can in place render opening curly brace.
I'll then go to the far side of the return statement and place a closing curly brace like so.
So there's the opening and there's the closing and then technically I really should indent the entire
return statement like so I can also remove the semi-colon at the very end of the class because semi-colons
are not typically required with class statements although technically we can't throw them in there.
Next I'm going to make sure that I wrap actions right here inside of a helper method as well.
So I will say something like render actions and will wrap up actions all indented and then finally we
don't really need to assign this to a variable anymore.
So I'm going to just return parentheses.
Print the C with the re-act fragment like so.
So now down inside the render method last little part of the refactor here when we say actions right
here and pass off the actions variable there is no more actions variable.
I'm going to instead call this render actions and make sure you call it like so we're not trying to
pass a reference off to this function we're trying to call it and pass the result of it to the actions
Propp.
All right let's do a quick Savior and that will refresh our browser and make sure that our refactor
was done successfully.
OK so I can come back over refreshed the page and I do not see any error message.
So if you see any error message right now as usual please read that error message it's going to tell
you exactly what typo you put inside of this class when we refactored it.
All right so now that we have refactored over to a class based component we can now add in a lifecycle
method that will attempt to call the action creator to go and fetch the stream that we're trying to
delete because remember we can not assume that the stream has already been loaded up.
We have to make sure that every component that gets rendered by react dam attempts to fetch its own
data.
So at the top the class I'm going to define component did mount and inside if you're going to have to
call our action creator to fetch the stream with this ID right here as a quick reminder we can get that
little kind of variable out of the L by referencing our props match Paramo object.
And that's a really hard path of sorts to remember so let's just do a console log right here to get
a quick reminder on how we're going to get access.
Just stop prop's how we're going to get access to that sort of variable inside of the path.
So consol log this up prop's in inside of component and mount.
I'll save this and will flip back over and take a look at our cons..
All right so here's my counsel Lague.
So here's the entire prop's object remember we have the match object harams ID and that has three right
there because we are visiting the path for the stream with the idea 3.
Now as a reminder at the pre-amps object right here has the key of ID inside of it specifically because
inside of our apt.
J.S. file we had just updated the route right here to put in Colon ID.
Remember if we changed the name of this thing to like jibberish or whatever we want whatever value we
put inside there is going to be what shows up inside of that program's object.
But traditionally any sign that we're trying to get reference to an ID we're just going to call it id.
So don't forget it's really the colon on here that gives you access to or turns that part of the path
into a kind of variable of sorts.
OK so going to take it back over to ID and I should see match prams Id just like we had before.
OK.
So we now know how to get the ID.
So back inside of stream delete I'm going to move that console log and I'll just put in this stop prop's
dot match path or zoomy harams ID.
So that's our idea right there.
So we're going to want to call a action creator to attempt to fetch the stream with that ID as a reminder
inside of our actions index file.
We have that action creator called fetch stream and if we call this with the ID this action crater's
going to fetch the appropriate stream from our API server.
So very similar to what we were doing on stream edit.
We just want to call fast stream with the given ID so lets make sure that we wire up that action creator
to this component.
I'm going to first get started by importing Kinect from re-act redux at the top and then I will import
fetch stream from up to directory's into the actions file our actions folder for the index file.
So now we can hook up this action creator with CONNECT at the bottom of the file.
So go down to the bottom.
I'll place my connect a place a second set of prints around stream delete.
We do not yet have a map state to prop's we will in just a moment but we don't have it yet.
So put in NULL for map state to props and then the second argument is going to be an object with fetch
stream.
Now remember I can't say it enough.
Remember we are fetching a single stream right here so we won't fetch stream not fetch streams.
No s on the end.
Just fecche stream.
Make sure you have the same thing appear at the top as well just fetch stream.
No s.
All right so now that we've wired up our action creator we can call it inside of component and mount.
So I'm going to call this prop's dot fetch stream and I'll pass in that idea that we got from our you
are el Stout's time to test this thing out.
I'm going to save this file a flip back over.
And now it's kind of hard to tell whether or not that action creator is fetching our stream successfully.
But in order to confirm that we can open up our network request tab we can filter by our requests.
And if you do a quick refresh of the page you should see a request right here to localhost 2001 slash
streams slash 3.
And if I select that I can look at either a preview or response and I'll see my description title user
ID and ID for the stream of 3 Perfect's are now fetching the stream with ID 3.
So now we can define a map state to prop's function get this stream out of our redux store and into
our component.
And then finally show some details about that stream inside the content area of this motile.
So quick pause right here and we'll take care of that in the next video.