Instructor: In this section,
we're gonna start talking about the application
we're going to build to get a better idea
of how Higher-Order Components actually work.
So, let's take a look at a couple of mockups.
So, we're gonna take that comment app
that we were just working on
and writing all those tests around,
and we're gonna do a refactor to it.
We're gonna split the application into two separate pages
and we're going to use React Router
to navigate between those two pages.
When a user first comes to our application
and presumably lands at localhost:3000,
we're gonna show them
that Comment List component on the screen.
A user can then click on the Post button right here
and then go over to the second page of our application.
So, when they click on that Post button,
they're gonna go to localhost:3000/post
and we're gonna show them that comment box form
where they can enter in a new comment,
and then eventually go back over to the comment list
and see that comment appear on the screen.
Now, here's where things get a little bit interesting.
We're gonna add in the idea
of authentication to this app as well.
Just to be clear,
the authentication that we're gonna build
is not gonna be like fully-featured authentication
backed by a database, and emails,
and passwords or anything like that.
We're gonna have a very simple authentication system
without any type of email
or password combinations or anything like that.
Basically, if a user just clicks
on the Sign In button right here,
we're going to consider them
to be magically logged into the app.
That's it.
So, no sign in form, no sign up, nothing like that.
Just very simple.
Click this button and poof, your signed in.
Now, the purpose of authentication in here
is to limit access to a user's ability
to go over to this second screen.
So, in other words,
if you are not logged into the application,
you should not be able to go to the comment box page.
Let's put that in diagram format
to get a better idea of what's going on.
Okay, so here's the idea.
If a user tries to go to that '/post' route
to visit the comment box component,
we're gonna ask ourselves a question.
We're gonna say, "Is this user logged in?"
If they are logged in, then hey, fantastic.
We will allow that user to view the comment box form.
Otherwise, if the user is not logged in,
then we're going to redirect our user
back to the homepage,
which is the Comment List component.
So, along this entire process,
you might have not quite seen where Higher-Order Components
are gonna come into play.
So, lemme give you a better idea
of where we're going to use a Higher-Order Component here.
All right, so we're going to mostly reuse
all the same code that we just put together inside
of our commenting application.
So, we're still gonna have the App component,
we're gonna have the CommentList and the CommentBox.
One of the largest new pieces of code
that we're going to add is a Higher-Order Component
that we're going to call requireAuth.
requireAuth is going to be a react component
or a Higher-Order Component
that will only allow users to visit some route
of our application if they are signed in.
So, we're going to restrict access
to the CommentBox component
through the use of this requireAuth Higher-Order Component.
That's the idea.
That's where we're gonna use a Higher-Order Component.
Now, you'll recall that just two seconds ago,
I had said, "Oh yeah, we use Higher-Order Components
to help us reuse code."
So, in this case,
it might look like
we're not really going to ever be reusing the requireAuth
Higher-order component
because we only have one route
that we want to restrict access to.
But if we wanted to,
we could very easily think of a situation
where maybe we also had some other components,
or other routes inside of our application
like, let's say CommentEdit or ProfileShow
that a user should only be able to visit
if they are signed in.
And so,
if we had these other routes inside of our application,
we would be able to reuse
this requireAuth Higher-Order Component to restrict access
to these other pages to only users
who are signed into our application.
So again, even though you and I
are not necessarily going to be reusing our requireAuth
Higher-Order Component inside of this app,
we can very easily think of where we would reuse it
in a larger application.
Okay, so that's enough talking about this stuff.
Let's continue in the next section
and we're gonna start
to put all this authentication stuff together
and then very quickly move on
to the Higher-Order Component as well.
So, quick break and I'll see you in just a minute.