Instructor: In this section we're gonna move on
to step number three,
where we take all the reusable logic
that we had created in step number one
and move it over to our higher order component file.
So, I'm gonna get started
by opening up my CommentBox.js file,
and I'm gonna highlight these three methods right here.
So, componentDidMount, DidUpdate and shouldNavigateAway.
It's gonna take all three of these.
I'm gonna cut them and I'm gonna paste them
over inside of our higher order component.
So, inside of this class right here, this is that component
that we're kind of injecting into our hierarchy.
So, right about the render method
I'll add all three of those in.
One thing to recall,
is that these are not the only pieces of code
that are truly reusable and need to be extracted
over to the requireAuth higher order component.
Back inside of CommentBox,
we also had that mapStateToProps function
down here at the bottom.
So, in order to properly handle
all this authentication stuff.
The component needs to know
whether or not the user is authenticated.
So, I'm also gonna take this right here.
I'm gonna cut it and I'm not gonna forget,
don't forget, we have mapStateToProps right here.
We don't have a mapStateToProps function anymore.
So, I'm gonna replace this with null.
I'll then move back over
to the requireAuth higher order component
and then I'll define mapStateToProps
where we normally would,
inside of any normal component,
right after our class definition.
So, right after the class definition
and right above the return statement,
I will add in mapStateToProps.
And then the last thing we need to do,
we are going to want to hook up mapStateToProps
to this new ComposedComponent thing.
And in order to do that
we need to grab that connect function.
So at the top, I'm going to make sure I import, connect,
from, react-redux, like so.
Now that we have connect inside of here,
we're gonna make sure that we wire up mapStateToProps
to the ComposedComponent,
which is the class that we just created
inside this function.
So right here, we'll say, "connect" with mapStateToProps
and we'll wire it up to the ComposedComponent.
Okay, so that is it for step number three right here.
That's all we had to do.
We just move that reusable logic
over to the higher order component.
But to give you just a little bit further definition
or explanation as to what's going on,
now, any time that we call
this higher order component function
and pass in a child component class,
we then create a new class called ComposedComponent
that has all of this functionality tied to it.
The ComposedComponent class will attempt to render
the child component,
but before any of that stuff happens,
or in addition to rendering that child component,
we're also now going to be executing
the componentDidMount and the componentDidUpdate.
So now, our higher order component
has 100% of the knowledge that it needs
to decide whether or not the user
should be able to see this route, or see this component,
or whether or not it needs to navigate our user away
to some other route inside of our application.
Okay, so that's step number three.
We're all done.
Now step number four is a very critical step.
So, let's take a pause right now.
We're gonna come back to the next section
and we'll talk about exactly what this means right here.
So, quick break, and I'll see you in just a minute.