-: Our application is looking pretty good.
The sign in form is pretty darn robust
but we still don't have some pretty hefty amounts
of our application put together just yet.
For example, when a user signs in
we're not updating the header to no longer say "Sign in."
And as a matter of fact
the sign in text right here isn't even clickable.
It's not even a link right now.
So I think a really good place to brush up on
is to gonna be improve our header
and make sure that whatever links that's displaying
at any given time actually work,
number one and number two, makes sense.
The links that we show up here on top.
So let's work on our header component inside this section.
If you think back to the mocks that we've been working on
by default we wanna show a link back
to the homepage or the root route.
And then depending on whether
or not the user is currently authenticated,
we wanna show a link to sign in or sign up.
And if they are authenticated
we wanna show a button to just sign out.
So pretty straightforward header,
perhaps not putting it together
is gonna be very straightforward
but I can definitely say that it behaves
as many other headers that you're probably used to working.
So let's give this a shot.
I'm gonna flip back over to my code editor
and I'm inside of my header component here.
I really encourage you at this point in time
maybe pause the video for a little bit.
Make a backup of this file right here
and give a shot at putting this header together.
We've now got our authentication state put together
to a pretty good degree.
We can figure out whether or not
our user is currently authenticated
by just looking at this authenticated true flag right here.
So I encourage you to give a shot at say,
putting together the header,
making sure that if the user is authenticated,
show the correct text and if they're not authenticated
show the correct text in that case as well.
So if you wanna give it a shot, go for it.
Otherwise we're gonna get started
on the header component right now.
Okay, so inside the header
we definitely have one big consideration here.
We want to render some different jsx to the page
or HTML to the page depending on whether or not
the user is currently authenticated.
So a great place to start on the header
is to make sure that the header is aware
of whether or not the user is authenticated.
So that means we're gonna need to make it into a container
and just hand it that authentication piece of state.
To turn header into a container, we'll first
import the connect helper from react-redux.
And then I'm also gonna import the link tag right now
because I just guarantee you we're gonna need
to use it very shortly.
Remember, just about everything up inside the header
is going to be a navigable link
so, something that a user can click on
and change the view that they're looking at.
Really makes sense that we're probably
gonna need the link tag up here as well.
So we'll make immediate use of the connect helper.
First we'll set up the connect statement.
So one set of parens and the second set of parens.
And then I'm gonna define my map state to props.
We'll take our state object and I'm gonna return
simply whether or not the user is authenticated.
So state dot auth dot authenticated.
So now we've got a very simple flag
inside of our component that says, Hey
should I show a link that says sign in,
or should I show a link that says sign out?
So let's do our links one at a time.
The very first thing that we want to have
on our nav bar that it should be visible
at all times, should be a link back to the root route.
So I'm gonna add a link tag in here back to the root route
and I'm gonna give it a class name of navbar brand.
And again, this is just some bootstrap magic
for the class names in here.
Just some stuff to make sure
that everything looks pretty good.
And I'm gonna give it a brand text of redux auth.
I'll say that'll be just a very simple name
of our application.
All right, now onto the actual links themselves.
So again, we wanna make sure that if a user is
authenticated, they should see a button that allows them to
sign in or sign up.
Excuse me, reverse there.
If they're not authenticated, they should see a button
that says sign in or sign up.
If they are authenticated, they should have the ability
to sign out.
Now, we haven't implemented the routes for sign out or sign
up just yet, but we can reasonably put together
some links in here so we don't have to come back later on
and put it all together.
Again, putting together authentication is really a pain
in the rear when you really think about it.
Have to do development on a lot of different fronts
and kind of very parallel nature.
There's not always a very distinct or serial course
for development here.
So since we have some logic to decide what we want to
render here, I'm gonna create a helper method
called render links.
And then inside of render links, I'm gonna decide what
links I wanna show to the user.
So instead of showing the LI by default, I'm going to
cut this and paste it up here and I'm gonna make use
of it very shortly.
But for right now, I just want to
call this dot render links.
Okay, so if our user is authenticated
this is gonna be the case in which we want to
show a link to logout, excuse me, sign out.
Otherwise, I wanna show a link to my users that allow them
to sign in or sign up.
So two different cases here.
I'm gonna move this into the sign in block first.
And I think probably the best way to take care
of this is going to be to, let's do the easy case first
which is just to show a sign out link.
So I'm gonna add an LI with a class name of nav-item.
I'm gonna give it a key.
Excuse me, we don't need a key just yet.
Let's leave off the key.
There is a reason to the key.
I'll come back to it though.
So then inside of this LI, we'll show a link
that has a class name of nav-link.
And if you think about what the purpose of this sign
out thing is here, it makes a lot of sense to
give it the text Sign Out.
And whenever someone clicks on it
we want them to go to the route, probably Sign Out.
Again, we haven't created the sign out route just yet,
but we will go back to our router
and add that functionality in.
So now we need to take care of the case where we want to
have a link to sign in or sign up.
It's gonna look very similar to our existing link tag.
One thing that I did neglect was to put a return tag
on this existing LI.
So there's our return tag.
And I'm gonna put in the return tag here.
Now I'm gonna do something a little bit strange here.
It's gonna look just a little bit strange.
You'll notice that we are returning some LI here
and they're gonna be placed inside of a UL.
For some real semantic html that actually makes sense
I don't want to have kind of a div-tag here or something
like that to contain the two LI's that I need to make
to contain the sign in and sign up links.
So we're gonna make use of a little feature inside
of React where we are allowed to return
arrays of components.
So we can return two separate LIs.
And it's basically just gonna say, "Hey
I wanna render both of these components.
I wanna render them just right next to each other
but I don't want to have to necessarily have
some type of wrapping element between the LI and the UL."
So the first link that I'm gonna put
in here is gonna be the sign in link.
And then I'm gonna place another link
that will be used for sign up.
Now all we have to do is place our link tags.
Add our class names.
And on sign in, I definitely want to send a user to sign in.
Oh, it looks like I missed a quote there.
And on the signup, again, even
though we don't have the route defined
for it just yet, we will very shortly.
And for here, we'll make this a nav-link
with a route to sign up.
All right, so this is looking pretty good.
If our user is authenticated
we're gonna show a link that allows them to sign out.
Otherwise they're gonna have the ability to
sign in or sign up.
Let's give this a shot inside the browser.
I'm gonna refresh.
We do have an immediate error about a key prop.
So that is one catch
on our LIs here where we're returning an array.
React is gonna think that this is a list
of components and it's gonna want us to add a key to it.
And so we can definitely put a key in here.
Since this is a static or very hard coded list, it
is totally appropriate to just use say, a plain integer here
since we're never gonna be swapping data
or anything like that out of here.
So now we'll refresh.
Okay, looks good.
So now we are currently not signed in.
So I see the sign in and sign up links.
Let me go ahead and put in a test, 1, 2, 3, and password.
I can click the link.
And it looks like we're getting an error here
about still, you know hey feature didn't match any routes,
but it didn't look like our link tags at the top
updated just yet.
So we've done a lot of stuff, covered, a lot of typing,
a lot of code inside this section.
Let's do a little bit
of debugging on this inside the next section.
I'll see you there.