In the last section we modified our author douceur to ensure that only returns one of three values either
Noal false or the user model.
Our redux store is now aware of whether or not the user is actually logged in.
We're now going to change over to our components heterodox G-S file where we will make sure that this
Hetter is also aware of whether or not the users logged in by hooking up the head or component to our
redux store.
So we want to hook this thing up to the redux store and we want to pull out the auth piece of state
that tells us if the user is or isn't logged in.
Remember how we hook up a component to the redux store.
We always import the connect helper from re-act redux.
We define the map state to prop's function and then we pull off the little pieces of state that we actually
care about inside this component.
So let's get to it at the top.
We will import the connect helper from reactor's redux.
We'll then set up the connect tell her at the bottom of the file.
So down here we'll say connect and then a second set of parentheses around her immediately above the
connect statement we'll define our map state to proper function which gets calls with the entire state
object out of the redux store.
So we'll call it state and then we need to make sure that we return an object that will be passed to
the header as props.
So really the only thing that we care about the state object right now is the auth piece of state and
specifically off because recall that inside the reducers index file we had assigned to the auth reducer
to the auth property.
So our state object will have one property right now called off.
So we're going to say the auth property is going to be generated by state got off.
Now we can do a little bit of refactoring with iOS 6 here.
First we can structure the auth property off the state object.
So put down some Crilley races and then say off.
So now the object condenses down to off is off.
And since these keys and values are the same we can further condense it down to be just off like so.
OK.
So in the last step we're going to take straight to props past it as the first argument to the connect
function.
So map state to prop's like so now just to test this thing out and make sure everything is working the
way we expect.
Let's put a console log inside of the render method of the head or component.
So inside of your we'll say this or log.
This props and we'll just look at the entire prop's object.
So now back inside the browser we immediately see two council locks which is exactly what we really
would expect the first concert log has the off property as no.
Which means hey we're still making the request to figure out if the user is currently logged in.
We then shortly after that see a follow up console log in which the off property is set to our user
model which indicates that I personally am currently logged in right now.
Now of course we can always test the case in which we are logged out by going over to a new tab and
navigating to localhost 5000 slash API slash log out like so.
So I'm now considered to be logged out by the application.
If I go back to the re-act out and refresh the page I will again see two console logs.
The first one that says we don't know what our current status is.
And the second one that says hey we are definitely not logged in off is false.
OK.
So this is looking good.
We can now use this new property right here.
This off property to decide what content to show inside the header.
So start that process right now inside the header.
I'm going to start off by removing the console log statement.
So I'm going to take this thing out and I'm going to locate the portion of the header that I want to
replace depending upon my current authentication status.
Really it's everything inside of this.
Well if I am logged in I don't want to see this button if I am not logged in.
I want to see the button and then most importantly if I'm still pending or I'm still making the request.
Still trying to figure out if I am or am not logged in.
I don't want to show anything here at all.
So let's we're going to put all this logic inside of a helper method called render content.
So going to make a helper method and call it render content.
And so inside of here we're going to inspect the this prop's done on the property and then depending
on its value we will return some different blob of GSX to show inside this UAA.
So let's get to it.
Now given that the props off property or this property or property can only be one of three values.
This is actually another great location to put together a switch statement cause will say OK if the
user is false they're not logged in show this if it's Noal show this and if they are logged in then
show this.
So we will switch over this stopped props start off.
And then there's three cases that we really care about the case in which this drops off is Noal the
case in which it is false.
And then the case in which it is an object which means we are logged in.
And for that we don't really have to put down a distinct case statement.
We can just say default as OK if it's not.
No.
If it's not false then they must be logged in.
So they're going to fall underneath the default case.
Now right now I think that we can probably just forget any fancy markup let's put in some dummy values
here just so we can test out inside the browser and make sure that this entire approach is going to
work appropriately.
So for the No case I will return still logging or still deciding because that's what it really means.
It means that we're still waiting for our requests to be resolved for the false case.
It means I'm logged out.
And then for the default case it means that I'm logged in.
OK.
So now let's replace everything inside the US down here with a call to render content.
So inside the well I can replace the fly with a call.
So we're referencing some javascript inside of some GSX So we knew the curly braces here.
This dot render content like so.
So let's give this a shot.
And I think when we test this out it will be awfully interesting to see what happens.
So when we go back over we already got our refresh and you can see that I currently am logged out because
I just logged out on this other tab over here.
Now what's really interesting however and to kind of prove the case of why we needed these three separate
values coming out of the author douceur two really very clearly does designate our current authentication
status.
We're going to refresh the page and when we do I want you to watch the text right here very carefully.
So when I refreshed it it's very fast.
But every now and then you can kind of just for like a half second see the text loading.
See the still deciding text right here.
Now a better way that can really test this out very effectively is to throttle our Internet connection
and then we can use that and by enable the inside of the chrome developer console.
So up here on the chrome developer console you'll see toggle device toolbar.
If we click that and and click the dots over here you can see something that says remove network throttling
now we don't want to remove network throttling you know the setting might have actually been moved slightly.
I'll tell you what I think that just like five minutes ago I actually updated my chrome installation
to the latest version of chrome.
I think they might have changed the location of that.
So let's take a quick pause to find where the new location of throttling is and we'll be able to test
this out and really verify that.
Yes we really truly needed these three authentication States.
So a quick break.
We'll come back and we'll test this thing out.