-: In the last section,
we created our auth reducer.
One thing we neglected to do,
was to wire up this reducer
inside of our combined reducers call,
in the reducers index dot js file.
So let's take care of that right now.
At the top of the file,
I will import auth reducer,
from reducers auth,
and then I will add that as a new reducer
under the key auth, like so.
Okay, that's pretty much it.
Let's now flip back over to our app component,
and inside there,
we're going to immediately
start to add in a button that's going to
allow the user to sign in
or sign out of our app.
So back inside the app file,
I'm going to first get started
by refactoring this functional component,
over to a class-based component, instead.
I don't really expect this component
to need to make use of any component level state,
but I do expect that we're gonna have a
couple of helper methods needed
to kind of organize the code
that we're gonna put inside of here.
So that's the only reason
I'm gonna turn this into a class-based component.
Just to have easier access
to a couple of helper methods.
So I'm gonna replace the export default right here,
with export default class app extends component.
I'll make sure that I import component at the top,
and then I will wrap the return statement right here,
with a render method.
Cool.
So now I'm gonna add a helper method,
which again, is why we created
this thing in the first place,
and I will call it something like render header.
I think that's reasonable.
So the goal of this method, right here,
is to produce the jsx required
to get this kind of header list
of elements right here,
the home link, the post link,
and the sign in, and sign out buttons.
Rather than doing a lot of styling here,
because I don't really wanna focus on any styling,
or anything like that,
I really just wanna focus on
the higher order component aspect
of this application.
We're just gonna use a simple UL
with some LIs to get these links,
and the button to show up on the screen.
So inside of render header,
I will return a UL, with three LI elements.
So I'll make one and copy, paste it down.
Now, the very first LI,
should house a link tag that'll
take user back to our home route
of just local host 3000.
So inside the first LI,
I'm gonna put a link tag from react router.
That's gonna take the user to slash,
which is our root route,
and I'll give that tag
the name home, like so.
As long as we're using the link tag,
let's not forget to import it up here
from react router dom, as well.
So I'm gonna make sure I add an import,
right here for the link tag.
Now we can repeat that same process
for the the post link as well.
I'll make a new link, that goes to post,
and I'll give it the text post a comment.
And then finally, in this last LI, right here,
we're gonna put our button that
user can click on to sign in
or sign out of the application.
Now I think that the text
and whatnot, that's going to occur around this button
might require a little bit of logic.
So rather than putting the button right here,
I'm gonna make another helper method
and you'll see why in just a second,
as soon as we start to add some code
to this thing, for the actual button implementation.
So I'm going to add in my curly braces,
and then reference this dot render button, like so.
So then I can add in
render button up here
and we'll use this method.
Oops, little bit of a typo there.
We'll use this method to actually render
that sign in and sign out button.
Before we do, let's take a quick pause
so this section doesn't run on too long.
So quick break and we'll come back,
and tackle this button in the next section.