-: In the last section, we created our feature component
but at present, anyone can get access to this thing.
Even if they are not signed into our application.
We're gonna fix that right now by adding
in a higher order component that's gonna restrict access
to this page, if you're not signed in.
To implement this, we're going to reuse
the exact same higher order component that
we created earlier in the course.
Now if you've not gone through that other section yet,
that's totally fine.
In the next video
I'm gonna put the actual copy-pasteable code
for this higher order component.
So if you've not yet gone through that
higher order component section, no problem.
Pause the video right here, go to that next section,
copy-paste all that code
and then come back to this section.
Otherwise, we will get started right away.
So, I'm gonna first get started by creating
a new file for my higher order component,
inside the components directory.
I'll make a new file called "require-off-dot-j-s"
And remember we're using a lowercase R here
because the convention is to use a lowercase character,
if we are exporting by default, a function.
Require off. There we go.
So now inside of here, I'm gonna grab all that code
from the higher order component that I had before
and I'm going to copy-paste it
into that new file I just created.
So here's my old project over here.
I'm copy-pasting everything out of require off
and I'm putting it into that new require off file.
Again, if you do not have this code handy, no problem.
Just go into the next section, you'll find all the
code for it and you could copy paste it over to your editor.
So once I've got that inside of here,
I then need to do just a little bit of reformatting
to accommodate for some of the different property names
that we used on our project.
So first I'm gonna scroll down towards the bottom
and I'll find the "map-State-To-Props" function.
So when we put this higher order component together
we add a single off piece of state
and that was a bullion that said,
"Yes, we are signed in or no we are not."
But this time around,
our off piece of state, right here,
returns an object that has an authenticated property.
And we want to reference that authenticated property
to decide whether or not the user is signed in.
So in total, this entire line, right here,
we're going to return an object with an off property
that's coming from "state-dot-off-dot-authenticated".
Okay, and that's it.
No other changes required.
So if nothing else, this should be a really
good demonstration that, in general, higher order components
are easily reusable on other projects you might create.
So here's some higher order component that we
created much earlier for a different project,
and we were able to reuse the entire thing
on this new project that we're working on right now.
So now to make use of this,
I'll flip back over to my "feature-dot-j-s" file.
I will import
the "require-off" higher order component from "require-off"
and then I'll make use of it down here at the bottom,
by wrapping our "export-default" statement.
So I'll say "require-off" like so.
Okay, and that should be it.
So now if someone tries to visit our feature route
it should be kicked out and thrown away,
back to some other page inside of our application.
Or in this case we'll send them back to our root route.
So I'm gonna flip back over to my browser and you'll notice
that I've already been redirected back over
to local host 3000.
If I now try to go back to the feature link,
yep. You'll see slash feature says,
"Nope, you can't go here" and it tries to kick us away.
However, if I go to sign up, because remember,
we don't have the idea of signing in just yet,
and if I sign up for a new account,
I'll then be redirected over to the feature route
and everything is good to go.
Okay, definitely good progress there.
Let's take a quick pause and continue in the next section.