Narrator: In the last section,
we got some header logic put together,
but when we actually clicked the sign in button,
it looks like nothing inside the header actually updated.
And so I do have to confess,
I made a small mistake here
back inside of our header component.
At the very bottom,
I somehow neglected to actually add "mapStateToProps"
to our connect helper.
So our component never actually knew
when the authentication piece of state was changing.
So let's give this a shot in the browser now,
I'm gonna flip back over, refresh the page,
go back to the sign in route,
and if I navigate over to test 1, 2, 3, or, excuse me,
if I put in the email test 1, 2, 3, and I sign in,
it looks like I successfully do see the text
at the top, go to see, go to sign out.
So this is looking pretty good.
Seems like a very clear, very obvious
next feature to work on, would be
to make this sign up link right here actually work.
And so before we actually implement this sign out
I wanna mention that
there's really two very different ways
that we can implement this sign out link
or the ability for our user to sign out.
The two different ways we could do this
is we can say have the header, give the link, the LI tag
for the sign out button right here, and event handler,
so when a user clicks this,
it should just dispatch an action that signs the user out.
One different way of handling sign out though
is to treat the sign out link like an actual endpoint
that the user can visit.
So if a user visits the link or the path sign out,
the user should automatically be signed out.
We can also use this
to give the user kind of a parting message,
kind of like a, "Okay sorry you logged out.
Hope you come back soon."
Or maybe give them some type
of like marketing message or something like that.
So there is some variety
or some benefit to giving a distinct page
that the user navigates to
when they want to sign out of our application.
And so that's why we're gonna go this direction
where when they navigate to sign out,
it's not only gonna sign them out,
it's also gonna show them some type of message
when they leave.
So to make sure that our users
have something to navigate to,
we're gonna need a sign out component,
and we need to add that component to our router as well.
So let's first make the component.
I'm gonna create a new file inside of our off directory,
and I'm gonna simply call it "signout.js".
Now, I expect this to be
a pretty darn straightforward component right here.
So I think that we will make it a class-based component
'cause we do need to actually
sign out a user when they get to it.
Nonetheless, it'll probably be pretty sparse.
At the top, we'll import "react"
and "component" from "react",
and we're definitely going to need access to Redux State
so that we can call it "action creator"
that will actually log our user out of the application.
And I'm going to assume we're gonna have
some action to do that.
So we'll pull in our actions as well.
Then we can make our sign out component,
and inside the render method for this,
I'm just gonna very simply say
to the user in a "div",
"Sorry to see you go..."
And so again, this would be a fantastic place to show
say some type of marketing message to the user
or perhaps some promotional campaign
or any of a number of different things.
Giving them a very distinct kind of landing page
when they sign out is definitely beneficial.
Now again, we don't have an action creator to
actually call to sign the user out just yet,
but we'll make one very shortly.
So I'm just gonna finish wiring up this component first.
At the bottom I'll export a connected version
of this sign out component.
And I'm gonna say, whenever a user visits this route,
as soon as this component is about to be rendered,
so a component will mount, I want to log this user out.
Again, we haven't implemented this action just yet,
but that's definitely what we're gonna work on next.
So now whenever a user clicks on that button
at the top that says, "sign out",
they will come see this component right here.
It'll say, "Hey, sorry to see you go."
And we'll make sure that we forcibly log the user
out of our application,
which means we'll probably delete their JDBT token.
And we'll probably also flip that piece of state
that says whether or not the user is authenticated
from true to false.
Last thing that we need to do is make sure
that we import this inside of our router
and add a route for it.
So we'll take care
of the action creator in the next, next section.
But for right now, let's make sure
that we can actually visit this component
inside of our application by adding a route for it.
So in our top level "index.js", here's our router.
I'm going to import
our sign out component from "components/auth/signout"
And then we'll add a route for it as well.
Whenever someone visits sign out,
show the component, sign out.
Cool, this looks good.
So we can't quite test this out
in the browser just yet
because we don't actually have an action creator
called "sign out user".
So we'll definitely get an error
if we try to visit this component right now.
Let's make the action creator in the next section
and then give it a shot in the browser.
So I'll see you there.