In-class video we learn that when we use re-act router we need to make sure that every component is
going to fetch its own data because if we don't if we rely upon the user first going to page A and then
over to page B eventually a user is going to go straight to page B and the data that you might expect
to have is not going to actually exist.
All right so now that we've learned that lesson we're going to open up our stream edit component again.
We're going to make sure that this thing starts to fetch its own data.
Now as a quick reminder if we also open up our actions index not J.S. file you'll recall that we have
an action crater called fetch stream and if we call the thing with an ID this action critter will fetch
that particular stream.
So essentially Anytime our stream edit component is mounted on the screen or is rendered to the screen
we want to make sure we call that stream with the idea of the stream that we want to fetch and that's
pretty much it.
So again if we flip back or stream edit Step one is going to be to refactor this thing into a class
based component so we can use the component did mt life cycle method I to remove the can stream at it
and replace it with class stream at it extends re-act component and then going to wrap those two lines
inside of a render method like so I'm going to remove the semi-colon at the very end of the class that
I don't need anymore.
I'll then define a component.
Did mt life cycle method.
And inside there I'm going to call this prop's dot fetch stream.
Singular no s there are just stream because we want to fetch the one stream that we're trying to show
on the screen and then we're going to call that and we need to make sure that we pass in the ID of the
stream that we're trying to fetch.
Remember our prop's object has the match Puranas id property that's the ID coming out of our YOU l up
you're at the top.
So when we call fecche stream I'm going to pass in destock props dot match harams ID.
That's a long one right there.
But that's pretty much what we want to pass in.
All right.
Now let's test this out.
Now it's incredibly likely that we might see an error here.
I don't know you know we'll see what happens but let's just try to save this and see what happens.
All right so I'll flip back over and sure enough quick your message here.
So looks like my render method.
I had a reference to props.
Remember when we make use of a class based component it has to be destock props.
That's better.
So now I'll save again.
I'll flip back over and again I see an error message.
All right.
Looks like I'm going too quickly here.
I need to slow down just a little bit.
So I tried to call fecche dream by never actually wired up that action creator.
So at the top I'll make sure that I import fetch stream from up to directory's actions and then I need
to make sure that I pass off that stream to connect down at the bottom.
I'll get funding now.
So if we go into workouts let's try this one more time.
All right so I can flip back over.
You'll notice I now see two consulates here in the page first loads up.
The reason I see two is because our component renders to the screen one time and we see the console
log from the render method right there.
We then attempt to fetch our stream after we successfully get our stream from the API.
Our component is rendered again and that's why we see the console log appear a second time.
So if you look in the first console log right here we're going to see that stream is undefined.
So that's the first console log where we have not yet gotten our stream.
Then if we expand a second console log I'll see that the stream has now been successfully fetched and
is showing up inside of my component.
Perfect couple errors there my mistake on that but it looks like we got everything working as expected.
So now if we really wanted to complete our little task here we could attempt to say printout this prop
starts Dreamcoat title.
There's just one thing to be aware of here.
Remember when our component is first rendered this Propst dot stream will be undefined.
So if we tried to print out title when we don't have the stream inside of our component we're going
to see that classic error message something like Yeah.
Here it is right here cannot read property of undefined.
So it's something that we need to do inside of here's something we've done many times before.
Essentially we just need to put in a little statement and say if we do not have our stream then return
like a div that says loading or something like that like so.
So if we have not yet loaded up our stream no problem where Id turn the div with voting.
Otherwise if we do have our stream attempt to print out the title so now we can save this again and
we'll see the name of the stream that I'm trying to edit which is I created distrain.
All right.
So that's pretty much going to take care of our data loading stuff.
Now everything you see inside a stream at it right now is going to essentially be repeated almost line
for line over to our other two components of stream delete and stream show because remember both stream
delete and stream show need to load up the appropriate stream in order to show some details about it
on the screen.
So for example when we try to show a window or a message to the user that says Are you sure you want
to delete that stream.
Will probably end up wanting to put like the title of this stream on there as well.
So we'll need to fetch the stream ahead of time and then for streams show.
Same thing very obvious in that case whenever a user is looking at a stream.
Yeah we need to load it up so we need to make sure that we wire up the streams show component to fetch
the data that it needs as well.
So again what you see inside of here is going to be just about duplicated into those other two components
as well in the future when we start to work with them.
All right.
So let's take a pause here now that we've got our data.
When we come back the next section we're going to start to put together the actual edit stream form.
And there's going to be a little fun twist around this component that we haven't quite spoken about
just yet so let's take a pause and we'll get to it in the next video.