Narrator: We just added in a renderHeader method
to our App component.
We also added in a renderButton method to this thing as well
which is going to eventually house the logic
to decide what button we should render,
a button that's gonna sign the user in
or a button that's going to sign the user out.
Now, before we can actually figure out
whether or not we need to show a button
that says sign in or sign out, we need to make sure
that our App component knows whether or not
the user is actually signed in at all.
Whether or not the user is signed in is recorded
inside of our auth reducer
and we had assigned the auth reducer
to our auth piece of state.
So the first thing we have to do inside of here
is import our connect helper
and we're going to define a mapStateToProps
to tell our App component
whether or not the user is currently signed in.
So let's get to it.
At the top,
I will import my connect function from react-router.
And then rather than trying to export
or define and export my App component on a single line,
I'm gonna move the export default statement
down to the bottom of the file instead
so that I have enough space to define my mapStateToProps.
So I'm gonna cut that out of there.
And then at the bottom of the file,
I will add back in export default App.
And right above that, I will define a mapStateToProps.
So that's gonna get our state object.
We will return an object with a key of auth
and that will just take whatever value is coming out
of our auth reducer at this point in time.
Then we can make use of our connect function
that we just imported.
I'll pass mapStateToProps
and get my other set of parentheses around the App as well.
So now our App component knows
whether or not the user is signed in.
That means that now we can put together
our renderButton method up here.
So inside of renderButton,
I'm gonna put down an if statement to check to see
whether or not the user is signed in to start.
So we are getting that auth Boolean
or that auth flag on this.props.auth.
So if the user is signed in,
then we will immediately return a button tag
that has the text Sign Out.
So if the user is signed in,
if true they are signed into the application right now,
we want to give them the ability to sign out.
Otherwise, so else, we'll say return,
we want to show a button here as well,
but this button will instead have the text of Sign In.
And when I save this file,
you're probably gonna see a bunch of this code jump
thanks to my code formatter.
So there we go.
Okay, so a little bit of a jump there. Not that bad.
So now we need to make sure
that renderButton gets referenced inside of renderHeader.
It is right here, so we're good to go.
And we need to make sure that renderHeader gets called
from our render method as well.
So down here, right above our two route components,
I'm gonna call this.renderHeader inside of my curly braces.
All right, I think that we're ready for a test now.
We don't actually have the ability
to flip our authentication state,
but we at least have the ability to show a header
that should have the correct Sign In or Sign Out button.
So I'll save this file and then I'll flip back
over to my application in the browser.
Aha, it looks like I made a silly typo in there.
So I think two sections ago or this section,
I must have imported from connect from react-router.
My mistake, that's react-redux.
I was looking at react-router right above it. That was bad.
Okay, so let's see how we're doing.
There's the reload
and now we've got our not that great looking header,
but hey, it's a start.
So I can click on post a comment,
which will take me to my post form,
and I can go back to home
and I can click on the Sign In button,
which right now does nothing,
but we're gonna fix that up in just a second.
So this is looking like we're making some progress,
just a little bit more setup and then we'll be able to focus
on our higher order component.
So quick break and we'll continue in the next section.