Well come back in this lesson we're going to continue to work on yo camp but we're not going to add
any new features or functionality.
We're just going to refactor existing code.
So I've been talking about refactoring the routes and our app J.S. for a long time and it's just grown
more and more out of control and we have enough code here that it warrants refactoring it and we're
going to focus on the routes.
So let me just highlight the different groups of routes that we have right now.
We have our authentication routes about 40 something lines here and we have a comment routes right there
.
And then we also have our campground drops that go another 40 or so lines here.
So those are the three main groups of routes that we have.
And we're going to split them out into three different files and then require all of them so will have
a require a pier that looks like var comment routes equals require and we'll have a route's directory
slash comments.
So then we'll need to make that work.
It won't work right now and we'll do the same thing for campground and for our throats.
And that's just the first part.
Splitting things into different files and then I'm going to show you another way we can dry up our routes
even more and to make things a little bit cleaner using the Express router.
So we'll get to that but I'm going to begin by making a route's directory and I'm working inside of
7 at this point because we're making substantial changes to the application structure and the directories
.
So it would be pretty confusing if I didn't make a new version.
We're going to make a directory called for routes and then we'll make three different files routes slash
campgrounds J US routes slash comments towards us and routes up routes slash and we can either call
this off J.S. or we could call it index which is another one you'll see often for the all purpose routes
that aren't related to a particular model.
And I'll go with that for now.
Index Yes.
So let's open those up and if we do C9 on a directory it will open all three of them appear.
And then we can just click on the ones that we want.
So we now have this little subtree that we favored.
Let's start by working with campgrounds open that up and I'm just going to copy all the campground routes
out of here.
So that starts right here and that goes down until our comment routes right there.
And let's paste that into camp grounds and it's not just going to work automatically out of the box
.
We will have to change some things.
But let's start by just splitting the files up.
So next I'll work with the comments and we only have 2 comment routes or no.
So I'll take both of those put them in this file.
Lastly we'll open up the index yes and we'll add the other route so we have our route route.
And then the authentication routes as well down to here and I'm going to take this is logged in along
with us and we will be refactoring that separately but that belongs with the authentication routes because
that's where we're using it.
And it's also a dependency of the comment routes.
Yes we're using is logged in in here as well.
So let's copy all that in.
So is logged in all the way up all the routes including the route route.
And now we've really cleaned up the access file.
Let's paste that into index yes and save.
And we're getting errors all over the place because our files don't know what app is referring to.
As you can see that's one of the problems are running into.
But we're not actually going to declare a variable app like we would in the past where we do our app
equals Express.
We're going to do something slightly different.
We're going to use the express router and the machine with that looks like to start.
We're going to require expressive here for Express equals require express and then we're going to write
var router equals express dot router and then we're going to add all the routes onto router rather than
app.
And we're going to do this first just to show you and then I'll explain why this is even worth doing
.
So we'll do that.
And then of course we have to export something from this file and all that we need to export is router
so module that exports equals router.
So we've created this router variable equal to express dot router basically a new instance of the Express
router and then we're adding all the routes to the router no longer adding them to the app itself.
But to this router and then we're returning or exporting the router at the very end.
And this is campgrounds that yes.
And if I go to my app yes I'm going to start by requiring all my router files.
So I'll do that separately from the other dependencies of var comment routes and then we'll have campground
routes Eco's require dot slash routes slash campgrounds.
And then we also have Auth. and will do all throughout equals and all grouped together nicely.
It's like this.
OK require dot slash routes slash index and we can call this index Raf's if you want to.
OK so we'll save that.
We're now importing or requiring those three files.
But that's not enough for us to actually be using them just yet.
We've required the files and only one of them by the way is actually exporting anything.
The comments and the index j s are still problematic.
But if we go back to Apter Yes we need to write an app I use.
So I'm just going to do this down here and I'll show you what it looks like first after I use.
And then we need to give it the name of our routes that we required.
So comment routes campground routes and index routes.
So we'll do that.
So we'll start with index routes and then another update use comment routes.
And then another one after it is campground draps and that tells we're apt to use those three route
files that we've required right now only campground J us actually set up correctly.
So let's finish off with the other ones comments J us and we'll change all those app dot CB router dot
and then at the very bottom we do module that exports equals router and save but we still have some
problems.
You can see is logged in.
We need to define that campground isn't defined.
And this is also complaining that campground isn't defined.
So we need to make sure we're adding in the correct models as well.
So up here we'll just do another far and not start with campground equals require.
And we need to get the correct file path.
So right now we're inside the routes directory and we need to go inside the models directory campground
.
Yes.
So we need to do dot dot slash models slash campground and then we'll also import comments that needs
to be model slash comment.
Those are the two models we want to require here
and will save but we still have this issue of is logged in and to start I'm just going to copy the code
is logged in.
So it's at the bottom of this one.
So copy that into both places so we'll keep it in our index routes.
We're also going to add it to our comments route and just put them at the bottom for now and save.
And now that air goes away and we're air free we get to go in this file.
Now it's address our index J.S. where there's a little bit more to worry about because we're using some
other code that's going to throw up some issues.
So we need to start with our code that requires express and then it creates the Express router just
copy it over here.
Set in and then we'll change all of these apps to the router does get routed up posts just like that
and save.
We have a problem.
It's complaining that passport isn't defined and that's because it's not defined.
So all we need to do is a VAR passport equals require passport.
And we're almost there but we also have a problem where user isn't defined.
So we need to define user so our user equals require dot dot slash models slash user.
So you probably noticed that in order for us to break things up into the separate files and keep our
app just nice and clean.
It does mean that we have to require things a little bit more often and that's the one downside.
It's a little bit more code to require things but in the long term it makes a lot more sense to break
a code out like this.
Keep things organized have some order and structure to our app and it might mean an extra line or two
here but it keeps her Applecross file nice and short.
OK so if we try and test this out right now we have our three routes that we're requiring all of these
files are now set up where they have the important dependencies required.
The models express an express router and then we're exporting at the bottom of all of them although
we're not doing it on this one which we need to do an index such as module but exports equals router
Now if we try and start the app.
Let's see if we get any errors.
It looks good.
Let's test it out.
So we'll go to the root path to start that route is working.
Feel the campgrounds.
We have a problem here is we didn't define campground instead of the campgrounds route.
So we need to open that up campground J.S. and just add in our VAR campground equals require dot dot
slash models slash campground just like we did in the other files.
Make sure there are no other errors in here.
It looks good.
Restart the server and try it out again.
Now we're get to go.
So we're viewing the show page.
Let's go back.
Try and log in.
Great.
Severus password and it all works just fine.
Which is great.
It was actually a bigger change we can make to dry up or code a little bit and it has to do with this
line right here are these three lines actually what we're doing after you use index routes campground
routes and comment routes what we can do is shorten the route declarations.
So let's take an example of comment routes in common Jay.
Yes.
The two routes that we have all start with campgrounds slash ID slash comments campgrounds slash ID
slash comments and then we have Slash knew on the end of one of them or in the campground drought's
page if I open that up you can see that they all start with Slash campgrounds and we can actually reduce
that duplication when we require them in our app.
Yes.
So lets start with campground.
I can say all campground routes should start with Slash campgrounds and we'll take all of these campground
G-S routes that weve to find these routes here and append slash campground in front of them.
So if were going to make this change we then need to go to a campground JS file and get rid of all slash
campgrounds.
So the index now to show all campgrounds is just slash.
The create is just slash our new is just slash New our show.
Its just slash ID and thats all we have.
So we'll save and what that does again is it takes campground routes all these routes were defined in
that file and it appends slash campgrounds in front of them.
So it helps us clean up the code and we can do the same thing although for index routes there is nothing
in common that we want to stick in front of them so we can just leave it how it is or we can just say
they all start with Slash if we want to have them all match this pattern where we provide the string
first and let's just test that out start the server up refresh on the campgrounds page which is now
working even though the route itself we go to campground.
Yes the index route is just slash.
It's actually slash campground because of this line right here.
So comment routes.
It's a little bit more complicated because they all start with Slash campground slash colon ID slash
comments and then we can go to the comment file comment J us routes and change all of these so that
this is only slash new.
And this is just slash.
So we shorten up the routes a lot and we grouped things into these ideas these topics so that all the
campground routes start with Slash campgrounds and we can write shorter route declarations.
And that's especially true with comments where we don't have to supply this long prefix here but there
is a problem.
If we save make sure we save the comment file and go back and restart
and refresh and we go to one of the comment routes like add a new comment.
First we're going to have to log in of course.
So I'll log in a Severus and try that again.
And now I try and add a comment.
We have a problem and it's hard to tell what the problem is from this error which is always frustrating
but it says cannot read a property name of NULL and it's pointing to this line right here.
Campgrounds name.
So from that error we can garner that campground is null which means that it's not finding our campground
in the database because instead of this comment route when we create a new comment the first thing it
does is find a campground by the ID.
And what's happening is that our ID is actually not being found.
So we can prove that by doing a confidant log request parameter ID and not start the server over.
And this was working just fine until we moved those routes and we used this express router like this
where we specified that all comment routes start with this where we did add Colan ID but if we try it
out and we are fresh and we look here before this long arrow is pointed out we can see no was printed
.
So it's not finding the ID.
What's happening is that our I.D. or colon I.D. route parameter isn't making it through to our comment
routes.
And there's a really easy fix when we use the express router in this file we pass in an option instead
of an object.
Merge programs.
True.
And that will then merge the Paramo from the campground and the comments together so that inside the
comment routes we're able to access this Kolin ID that we defined.
So let's restart now node Aptera Yes.
If we are fresh right now we need to go back slash campgrounds refresh.
I'll have to log back in as Severus password
then let's go and try and add a comment and you can see that it works now just fine.
And we're finding that ID and then we're finding the correct campground.
So we don't have a problem.
OK.
So we successfully refactored the routes.
The last thing we could really focus on is cleaning some other code up so we could go into our comments
file for instance.
And we don't need to say comment routes here anymore.
But if we wanted to go in and add the semi-colons and also just add a little message before each route
.
So this is the comments new and then this is comments create and we'll save make sure everything's formatted
nicely and get rid of that.
We still have this is logged in.
I'll just add a message here middleware that we will be refactoring and moving to it's own file that
will then require Instead the comments file and our index japes file because we have it in both places
.
Let's make sure we have some comments here.
So this is the route route.
This is our register form route this handles the Sign-Up logic route.
This is our log and form route.
This handles the log and forms logic and actually does the logging in.
And this is the log out route.
And then we have our middleware here.
All right.
And then lastly the go to campground.
Yes we have our index route.
Our create route and our new route and our show.
Great.
And actually yes let's see if there's anything else we can really clean up in here.
Let's go ahead and add a comment in here.
Are we right requiring routes and otherwise for good to go.
So we changed a lot of things around as far as the files and the directories but our logic is exactly
the same.
Really the biggest change aside from moving things into different files was showing this use of the
Express router where we can require route files and in our case our route files are exporting the router
that we're using and that doesn't have to be called router but that's the conventional name.
So whatever we named here we just need to reference an ad Didcot gets and posts onto that object and
then send that out at the very bottom and we can provide this prefix that will be added in front of
every single route in that file.
Great.
So we really clean things up just to show you how much we have 46 lines in this app us in the previous
version.
If we open up SJS we had 177 lines.
So that's a pretty drastic reduction.