Instructor: By defining our context types
on a class level property,
we now have access to our router,
React Router.
Let's go ahead and give Reactor Router a shot.
Let's just do some something totally goofy
just to see if we can get it working.
Let's say that
we're gonna change the purpose of authentication
and we're gonna say,
"If a user ever tries to visit this component
they should just instantly be kicked back
to the home route."
So let's see what that would look like.
I'm gonna add a componentWillMount.
This is gonna run every single time
that this component is about to be rendered to the dom.
And then inside of here,
I'm gonna say this.context.router.push, home.
Our root route.
So whenever this component is about to render,
just kick our users back to the home route.
Let's see what this looks like in practice.
I'm gonna go back to Chrome,
refresh the page.
And then I'm currently on local host 80 80.
I'm gonna try navigating two Resources.
So I'm gonna click on Resources
and you can see that the URL
changes for like just the smallest instant
and then it just disappears.
So this is React Router
in our higher order component in action.
If the user is trying to visit Resources,
they just instantly get booted back to local host 80 80
or our route route, so to speak.
So we're still doing our console log over here.
Let's clean that up really quick.
So inside of our render method
I'm gonna dump the console log.
Very good.
Now the only thing we need to do
is figure out how to handle our user,
or how to only navigate our user around
when they are not authenticated.
So luckily, we already hooked up
our application state to this component.
So we can just say if this component is about to mount
and if the user is not currently authenticated,
then I want to navigate the user to the root route.
So if not authenticated,
navigate the user back to the root route.
Let's go ahead and give this a shot.
I'm gonna save,
flip back over to the browser.
I'm currently on local host 80 80.
I refresh.
I am not signed in
and I'm gonna go to Resources.
And huh,
I'm still getting kicked back right away.
So this is kind of interesting.
Let's try signing in.
I'm gonna go to Resources
and now just as I expect,
I'm able to successfully go to the Resources page.
So this is basically our authentication component
in great practice right here.
If I go to Home and Sign Out,
I can't go to Resources.
If I go to Sign In and then I go to Resources,
boom, I'm good to go.
Awesome.
So this is working pretty well.
Definitely this is our higher order component practice,
definitely what we wanna achieve.
There's just something a little bit funky here.
I'm gonna click Sign Out
and you can see that I'm still on this component right here.
I'm still able to see the protected route
even though I just signed out.
So chances are that if our user signs out
or we kind of forcibly sign our user out,
we would want to make sure
that they get kicked back to the homepage as well.
So to handle this kind of edge case,
we can define another life cycle method
called componentWillUpdate.
So we'll do componentWillUpdate.
And componentWillUpdate gets called
whenever the component is about to be handed
a new set of props.
Or be re-rendered.
And the first argument to this is nextProps.
So this nextProps object
represents what the next set of properties
the component will be rendered with.
So this handles the case
in which a user would view our protected route.
Then click the Sign Out button
and we expect them to get kicked back.
When we click Sign Out,
we know that our component's gonna re-render
but only componentWillMount
is checking for whether or not
the user needs to get kicked out.
So once the user is already looking at the Resources page,
componentWillMount has already ran.
And so we need to make sure that we call it again
whenever the component is about to be updated.
So now we're gonna have very similar logic in here.
We'll say if nextProps.authenticated.
So if the next version of props that come through
if they're still not authenticated,
this.context.router.push back to the home route.
All right, let's save this.
We'll refresh
and you can see that we just got kicked back
to local host 80. 80.
Great. I'm gonna click Resources.
I can't go there.
I'm gonna Sign In.
Now I can go to Resources
and now when I Sign Out, boom.
I get kicked back to our Home route.
So that's it.
That's our authenticated component
or our authenticated higher order component in practice.
This looks great.
Let's go ahead and do a wrap up in the next section.