Instructor: Our application is now looking pretty good.
We can toggle around to different routes
and we can flip our Boolean recording whether
or not we are signed in from true to false very easily.
So now it's time to actually start working
on our higher order component.
Remember, the goal of this higher order component
that we're gonna make is to restrict access
to the post route if the user is not signed in.
So if the user's not signed in and the user tries to go
to this route, we're gonna redirect them back
over to the home route automatically.
Now to build this first higher order component,
I put together a series of steps
and these steps are gonna be reusable,
so you can use these to build a higher order component
on your own project at some point in the future as well.
So let's take a look at these steps.
Four steps in total,
we're gonna start up here at the very top.
So the first thing we're going to do to build
our higher order component is take all the logic
that we want to make reusable inside of our application
and write it all into an existing component.
So for you and me, we're trying to make a higher
order component that limits the user's ability
to access different routes inside of our application.
So you and I are going to open up our post,
what is it called?
Our comment box component.
That's it.
We're gonna open up our comment box component
and we're gonna add some logic to that thing to say
if the user is not logged in, get outta here.
You're gonna go back to the homepage.
So that's step one.
We're gonna put that reusable logic
into an existing component inside of our application.
In step two, we're gonna create the actual higher
order component file itself.
And inside that file we're going to add something
called the higher order component scaffold.
Now we'll talk about what that scaffold is, but essentially
it's just some boiler plate code that you're going to see
in just about every single higher order component out there.
In step three, we're going to essentially
merge together steps one and two.
So in step three, we're gonna take all that reusable logic
that we wrote in step one out of our original component
and add it to the new file that we created in step two.
And then in step four, and we'll talk
about this step in great detail.
Essentially we're gonna add a little bit of configuration
to our child component and we'll go into great detail
about exactly what that means.
So that's our four step process.
We're gonna get started right now with step number one.
So we're gonna open up our comment box component
and we're gonna add some logic to it to say
if the user is not signed in, they need to get away
from that page and go back to our root route.
So I'll get started by opening up my code editor
and I'll find my comment box component inside
of my components directory.
So inside of here to check to see if the user is signed in,
we need to get access to our off piece of Redux State.
We've already hooked up this component
with connect to our Redux store,
so all we have to do is down at the bottom,
define a map state to props.
So I'll go down to the bottom
and I'll define my map state to props function.
So inside of here we're gonna return a simple object
with an auth property,
and that's gonna come from state.auth.
So just as we did back inside of our app component,
we'll then take that map state to props
and add it as the first argument to connect
and so that will override our current null argument here.
So mapStateToProps, like so.
Now inside of the component itself,
we're gonna check to see
if the user is logged in anytime this component first mounts
or first gets rendered to the screen,
or anytime this component gets a new set of props.
So to handle both those cases, the case
in which the component just got mounted
or just got rendered to the screen and the case
in which it just got a new set of props from its parent,
we're going to define two different lifecycle methods.
So inside the component itself
I'm gonna add a componentDidMount lifecycle method.
So componentDidMount, this is gonna handle a case
in which our component just got rendered.
So inside of here we're gonna look
at our current props subject,
or more specifically that auth property.
And we're gonna say if the user is not logged in,
we're gonna navigate them away.
And then we're gonna do that same exact thing
inside of our componentDidUpdate lifecycle method as well.
Component did update is another lifecycle method
that gets called anytime our component box component
receives a new set of props.
And so I'll just add a comment on here really quickly.
Our component just got updated.
That's not the best comment, but I think you get the idea.
So in both these cases,
we're going to execute essentially identical logic.
We want to look at our current set of props,
we wanna look at that off property
and if the user is not logged in, navigate them away.
So since both these lifecycle methods right here
are essentially going to execute the same exact logic,
let's make a helper method
and inside that helper method
we'll put all this kind of authentication stuff,
and then we can call that helper method from
both componentDidMount and componentDidUpdate.
So I'm gonna make a helper method called something like,
shouldNavigateAway.
We're gonna rename this very shortly,
so we'll get a better name than that pretty soon.
And then inside of here we're gonna say
if the user is not logged in,
so if not this.props.auth,
we're gonna put a console log in here for right now
and simply say, I need to leave, like so.
Now when I saved, my code formatter kicked in
and collapsed these lifecycle methods.
That's why you saw this stuff jump.
I'm gonna undo that really quickly.
Now inside both these lifecycle methods,
we're gonna call this new helper of, shouldNavigateAway.
So inside of ComponentDidMount,
I'll call this dot, oops.
This.shouldNavigateAway
and I'll do the same thing inside
of ComponentDidUpdate as well.
This.shouldNavigateAway.
All right, so let's take a quick pause right here.
We're gonna come back in the next section
and we're gonna test this code out
and make sure that it works the way we expect
and detects whether or not the user is not signed
in when they are looking at our comment box component.
So quick break and I'll see you in just a minute.