-: In this section, we're gonna do a little bit
of polish on our header component.
So right now we're always showing all the buttons
inside there, regardless of whether
or not the user is signed in.
In addition, all these links right here
are sandwiched up against each other.
So I just wanna do, maybe a touch of styling as well.
So to get started, I'll open up my header component,
inside of my components directory.
And then inside of here,
I'm going to define a helper method.
I'll call it something like, render links.
I think that's reasonable.
And then inside of here we're gonna check
to see if the user is signed in.
If they're signed in then we're gonna
show the link for sign out and feature.
Otherwise, if they're not signed in,
we'll show sign up and sign in.
In order to figure out whether or not a user
is signed in in the first place,
we need to import our connect helper,
and pull out that authenticated piece of state.
So at the top,
I'll import connect from react-redux
and then down at the bottom,
I'll define a,
map state to props.
I'll take my state object,
and I will return authenticated,
coming from state dot auth
dot authenticated,
like so.
Then we could put in our connect function
with map state to props.
I'll make sure I get my parentheses
around the header component as well.
Okay, so that's good.
Now our component knows whether
or not the user is authenticated.
I'll now go back up to my render links function right here,
and I'll say if this dot props dot authenticated,
then I'm going to
return a div.
So if the user is authenticated, we want to show
the sign out and feature links.
So I'm gonna copy these two links right here,
and I'll put them inside that div.
And then else, so if the user's not authenticated,
then I'm going to return the two buttons
that will allow them to either sign up or sign in.
So I'll grab sign up and sign in right here.
Here's the return statement.
I'll make sure I put a div in there as well,
and then I'll paste in the two links.
Then finally, right underneath my redux off link,
I will call this dot, render links.
So this dot render links, like so.
Okay, I think we're ready to test this out.
So let's go back over to the browser.
Now when we refresh the page, so I'm currently signed in,
so I see the buttons that allow me to sign out,
or go to the feature page.
If I sign out, it goes to sign up and sign in.
Now I can go to sign in.
I'll do desk at desk dot com and sign into the application.
All right, it looks pretty good.
Let's take a quick pause right here.
We'll come back in the next section
and we'll do just a touch of styling on that header,
to make it look a little bit better that it does right now.