-: In the last section, we started adding some logic
to our comment box component to decide whether
or not the user needs to be forcibly navigated away
from this page.
We're now ready to test it out in the browser.
So I'm gonna flip over to my browser
and I'm gonna do a forcible refresh of the page.
So when the page loads back up
we are not going to be authenticated.
So you'll notice right here the button says "sign in".
So at present we are not authenticated
but I am on the "/post" route.
If I look down at my console,
over here on the right hand side,
you'll notice that the console log says "I need to leave".
So right now we are, in fact, in a condition where
we would want to navigate our user away from this page.
If I navigate back over to the homepage, clear my console
and then go back over to the "post" page
it again says "I need to leave".
Okay, so it seems like that's working out pretty well.
Now let's try the keys
in which we are authenticated or we are signed in.
So I'm gonna go back over to the homepage.
I'm gonna click "sign in".
So I'm now considered to be authenticated.
I'm gonna clear my console again very quickly
just so we don't mistake any console logs over there.
And then I will navigate back over to the "post" route.
So when I go back over
you'll notice I do not see a console log, which is expected.
That's exactly what we want
because we are in fact signed into the application.
Now when we navigated over to this route,
the lifecycle method that got called
was "componentDidMount".
So that's the the lifecycle method that gets called when
our component is first rendered to the screen.
You might be a little bit curious
about why we put on the other lifecycle method here,
the case in which our component just got updated.
Well, this lifecycle method handles the case in which a user
is looking at this component and then signs out.
'Cause when we click on "sign out" right here
that's going to cause our comment box component to
be re-rendered with a new value for "this.props.auth".
So that's the case in which "componentDidUpdate"
will be called.
So let's try clicking on "sign out" now,
when I do, we again see that console log
and this time that console log is originating
from the "componentDidUpdate" method.
So at this point we're essentially handling every case
the case in which we are signed in and we come to this page
the case in which we're signed out and all the
different variations thereof.
So all we have to do now is
instead of doing that console log, right here,
we need to instead forcibly navigate the user away.
So to do that, we're going to be making use
of the "React" router library.
Anytime one of our components is rendered directly
by the "React" router library, we automatically get access
to the "this.props.history" object.
"this.props.history" allows us to programmatically
navigate around our application by using a method
on it called ".push".
So we call ".push" and we just put the route
in here that we want to attempt to navigate to.
So in this case, we want to go back
to our "Root" route inside of our application.
So I'll save this with this change right here
and then I'll flip back over.
I'm gonna go back over to the "Root" route
of the application, after the reload kicks in.
So I'm at my "Root" route right now, and if I try to click
on "post a comment" while I am not signed in, you'll notice
that the URL up here very briefly changes, very briefly.
And then as soon as "React" realizes that we're
about to load up that component and render it
our "componentDidMount" lifecycle method right here
gets called, and we are forcibly navigated
away from that page.
If we then click on "sign in'
and try to go over, we're good to go.
And then if we try to now "sign out"
we get kicked back over to our "Root" route.
All right, well, believe it or not, that's pretty much it.
That's all the logic we really need
around authentication for right now.
So we have the ability to lock down access
a hundred percent to the comment box component.
So at this point in time
we've really accomplished step one right here.
We wrote all that logic
that we want to eventually make repeatable,
or reusable inside of our application,
into a single component.
So now we're gonna move on to step number two, where we
create a file that's gonna house our higher order component
and we're gonna add some "scaffold" code
or some "boiler plate" code to that file.
So let's pause right here
and we'll take care of that in the next section.