Instructor: Our Higher-Order Component
now knows whether or not the user is currently logged in.
We achieve this by connecting our Higher-Order Component
with the connect helper from React Redux.
And then we were able to console.log
whether or not the user was currently signed in
to our application.
And by clicking on our sign in and sign out button,
we saw this console.log flip from true to false
and true to false back and forth.
So this really solves problem number one,
figuring out whether or not the user is currently logged in
within our Higher-Order Component.
Now is challenge number two.
Challenge number two is to figure out,
hey, if this user is currently signed out
and they're trying to access this protected component,
this protected resource,
we need to automatically kick them back to the home route.
We need to just dump them somewhere else.
So this is going to be a lot more of a React Router problem
than anything else.
We want to programmatically navigate the user.
They're not gonna be clicking on any link
that says like, hey, you're not allowed here,
go somewhere else.
We need to very forcibly kick them to another route.
I'm gonna pull a diagram up on the screen
that kind of displays
what our application render tree currently looks like.
So this is our current render tree
with a couple other components missing, but that's okay.
At the very top level, we're showing our router.
Now of course our provider is above that,
but, again, that's totally fine.
Let's just imagine right now
that we're only really concerned with React Router.
So at the very top, we've got our router.
We're just showing our app,
and then the app
is showing our authentication wrapped Resources component.
So the key here is
that we need to forcibly navigate to somewhere around.
We need access to the router
to programmatically navigate the user somewhere else.
That's what we're trying to do here.
So to get access to the router,
we need like a direct reference to it.
We need to say, "Hey, router,
I want you to go do something in particular.
To get access to this router,
we're going to make use of a topic called context.
Now, context is a topic in React
that is very similar to props.
Props are passed from component to component,
from parent to child,
so from router to app
and then app to Authentication Higher-Order Component
and really from the Authentication Higher-Order Component
down to Resources.
Context is something similar to props,
but it spans the entire render tree.
So our Resources component right here
can make direct access to a context property
that is defined by the router way up here at the top.
So context really skips levels or skips components.
So we're going to make use of context
to get access to our router.
Now, this entire process
of basically telling our router to navigate somewhere
is really a little, in my opinion,
a little bit overly complex,
but it's the decision that React Router has gone with
for how you should navigate around on a page.
So this is coming straight from React Router.
If you don't like it, you, you can let them know.
I certainly have.
Anyways, our job here is to get access
to our router on context.
So let's give this a shot.
The first thing I'm gonna do is remove our console.log
in the render method.
We don't really need this console.log anymore.
Now getting access to context
is just like getting access to props.
We're just gonna say this.context.
So let's give that a shot.
We'll console.log this.context.
I'm gonna save this, flip back over.
Let's do a refresh,
and you'll see that we get a little error in here.
I think I got a typo somewhere.
Let's check it out.
Oops, I put it outside the render method.
That's why I should not be talking
and typing at the same time, my apologies.
Okay, so we're back to normal.
Let's refresh and, okay, so here's our console.log,
but it's an empty object right now.
But I just said that we're gonna get access
to our router on context, but this object is clearly empty.
So where does the router come from?
So here's the real trick to context.
Because context can be so easily abused
inside of your application, right?
We can say, "Oh, you know what?
My very top level component
is gonna provide all of its data
to the entire application via context,
because it's so easy to be abused like that
over using props, which we should be using,
React makes you define a property called context types
on each of our React classes, each of our components.
We can only access properties on context
when we've kind of declared the need
to have access to a particular property ahead of time.
So let's see what that looks like.
I'm gonna put a new line above render,
definitely above render this time.
And we're going to write
what's gonna look a little bit weird.
I'm gonna do static contextTypes = router,
and then we're going to write React.PropTypes.object.
All right, so all this code right here
is definitely looking pretty strange.
Inside of all of our React classes, you know,
all of our component classes,
we're used to seeing methods defined like this.
We write the method name
and then our parens and then our curly braces.
So this is definitely breaking
from that kind of methodology that we're very used to.
Let's go ahead and talk about this different syntax
inside of the next section.