1
00:00:00,070 --> 00:00:04,860
Well come back in this lesson we're going to continue to work on yo camp but we're not going to add

2
00:00:04,890 --> 00:00:06,620
any new features or functionality.

3
00:00:06,840 --> 00:00:09,220
We're just going to refactor existing code.

4
00:00:09,240 --> 00:00:14,460
So I've been talking about refactoring the routes and our app J.S. for a long time and it's just grown

5
00:00:14,460 --> 00:00:19,410
more and more out of control and we have enough code here that it warrants refactoring it and we're

6
00:00:19,410 --> 00:00:20,750
going to focus on the routes.

7
00:00:21,000 --> 00:00:25,000
So let me just highlight the different groups of routes that we have right now.

8
00:00:25,050 --> 00:00:32,790
We have our authentication routes about 40 something lines here and we have a comment routes right there

9
00:00:32,790 --> 00:00:33,690
.

10
00:00:33,690 --> 00:00:39,860
And then we also have our campground drops that go another 40 or so lines here.

11
00:00:40,080 --> 00:00:42,590
So those are the three main groups of routes that we have.

12
00:00:42,880 --> 00:00:47,400
And we're going to split them out into three different files and then require all of them so will have

13
00:00:47,450 --> 00:00:57,240
a require a pier that looks like var comment routes equals require and we'll have a route's directory

14
00:00:57,420 --> 00:00:59,180
slash comments.

15
00:00:59,550 --> 00:01:00,770
So then we'll need to make that work.

16
00:01:00,770 --> 00:01:05,480
It won't work right now and we'll do the same thing for campground and for our throats.

17
00:01:05,490 --> 00:01:06,740
And that's just the first part.

18
00:01:06,780 --> 00:01:11,160
Splitting things into different files and then I'm going to show you another way we can dry up our routes

19
00:01:11,190 --> 00:01:15,300
even more and to make things a little bit cleaner using the Express router.

20
00:01:15,360 --> 00:01:20,190
So we'll get to that but I'm going to begin by making a route's directory and I'm working inside of

21
00:01:20,310 --> 00:01:26,150
7 at this point because we're making substantial changes to the application structure and the directories

22
00:01:26,160 --> 00:01:26,280
.

23
00:01:26,370 --> 00:01:29,390
So it would be pretty confusing if I didn't make a new version.

24
00:01:29,940 --> 00:01:37,020
We're going to make a directory called for routes and then we'll make three different files routes slash

25
00:01:37,710 --> 00:01:50,520
campgrounds J US routes slash comments towards us and routes up routes slash and we can either call

26
00:01:50,520 --> 00:01:57,390
this off J.S. or we could call it index which is another one you'll see often for the all purpose routes

27
00:01:57,390 --> 00:01:59,730
that aren't related to a particular model.

28
00:01:59,730 --> 00:02:00,780
And I'll go with that for now.

29
00:02:00,790 --> 00:02:03,140
Index Yes.

30
00:02:03,240 --> 00:02:09,840
So let's open those up and if we do C9 on a directory it will open all three of them appear.

31
00:02:10,020 --> 00:02:12,140
And then we can just click on the ones that we want.

32
00:02:12,210 --> 00:02:15,160
So we now have this little subtree that we favored.

33
00:02:15,420 --> 00:02:21,210
Let's start by working with campgrounds open that up and I'm just going to copy all the campground routes

34
00:02:21,210 --> 00:02:22,230
out of here.

35
00:02:22,410 --> 00:02:30,460
So that starts right here and that goes down until our comment routes right there.

36
00:02:30,930 --> 00:02:35,190
And let's paste that into camp grounds and it's not just going to work automatically out of the box

37
00:02:35,190 --> 00:02:35,430
.

38
00:02:35,430 --> 00:02:36,860
We will have to change some things.

39
00:02:37,020 --> 00:02:39,920
But let's start by just splitting the files up.

40
00:02:39,960 --> 00:02:45,400
So next I'll work with the comments and we only have 2 comment routes or no.

41
00:02:45,990 --> 00:02:48,980
So I'll take both of those put them in this file.

42
00:02:49,500 --> 00:02:55,790
Lastly we'll open up the index yes and we'll add the other route so we have our route route.

43
00:02:56,040 --> 00:03:03,660
And then the authentication routes as well down to here and I'm going to take this is logged in along

44
00:03:03,660 --> 00:03:10,680
with us and we will be refactoring that separately but that belongs with the authentication routes because

45
00:03:10,680 --> 00:03:11,890
that's where we're using it.

46
00:03:12,030 --> 00:03:14,630
And it's also a dependency of the comment routes.

47
00:03:14,760 --> 00:03:17,450
Yes we're using is logged in in here as well.

48
00:03:17,490 --> 00:03:19,040
So let's copy all that in.

49
00:03:19,080 --> 00:03:24,480
So is logged in all the way up all the routes including the route route.

50
00:03:25,150 --> 00:03:27,810
And now we've really cleaned up the access file.

51
00:03:28,320 --> 00:03:32,530
Let's paste that into index yes and save.

52
00:03:33,270 --> 00:03:37,990
And we're getting errors all over the place because our files don't know what app is referring to.

53
00:03:38,430 --> 00:03:41,960
As you can see that's one of the problems are running into.

54
00:03:42,360 --> 00:03:48,900
But we're not actually going to declare a variable app like we would in the past where we do our app

55
00:03:49,230 --> 00:03:51,390
equals Express.

56
00:03:51,390 --> 00:03:53,610
We're going to do something slightly different.

57
00:03:53,610 --> 00:03:58,010
We're going to use the express router and the machine with that looks like to start.

58
00:03:58,140 --> 00:04:06,450
We're going to require expressive here for Express equals require express and then we're going to write

59
00:04:06,450 --> 00:04:16,590
var router equals express dot router and then we're going to add all the routes onto router rather than

60
00:04:16,590 --> 00:04:18,000
app.

61
00:04:18,350 --> 00:04:24,240
And we're going to do this first just to show you and then I'll explain why this is even worth doing

62
00:04:24,260 --> 00:04:24,850
.

63
00:04:25,650 --> 00:04:26,890
So we'll do that.

64
00:04:27,270 --> 00:04:32,490
And then of course we have to export something from this file and all that we need to export is router

65
00:04:32,640 --> 00:04:36,140
so module that exports equals router.

66
00:04:36,870 --> 00:04:43,350
So we've created this router variable equal to express dot router basically a new instance of the Express

67
00:04:43,350 --> 00:04:49,790
router and then we're adding all the routes to the router no longer adding them to the app itself.

68
00:04:49,830 --> 00:04:55,260
But to this router and then we're returning or exporting the router at the very end.

69
00:04:55,350 --> 00:04:57,330
And this is campgrounds that yes.

70
00:04:57,580 --> 00:05:02,570
And if I go to my app yes I'm going to start by requiring all my router files.

71
00:05:03,090 --> 00:05:11,290
So I'll do that separately from the other dependencies of var comment routes and then we'll have campground

72
00:05:11,860 --> 00:05:20,850
routes Eco's require dot slash routes slash campgrounds.

73
00:05:21,490 --> 00:05:31,510
And then we also have Auth. and will do all throughout equals and all grouped together nicely.

74
00:05:32,690 --> 00:05:34,260
It's like this.

75
00:05:34,930 --> 00:05:43,950
OK require dot slash routes slash index and we can call this index Raf's if you want to.

76
00:05:44,380 --> 00:05:47,180
OK so we'll save that.

77
00:05:47,230 --> 00:05:50,220
We're now importing or requiring those three files.

78
00:05:50,470 --> 00:05:53,420
But that's not enough for us to actually be using them just yet.

79
00:05:53,410 --> 00:05:58,690
We've required the files and only one of them by the way is actually exporting anything.

80
00:05:58,900 --> 00:06:02,540
The comments and the index j s are still problematic.

81
00:06:02,770 --> 00:06:07,390
But if we go back to Apter Yes we need to write an app I use.

82
00:06:07,450 --> 00:06:13,860
So I'm just going to do this down here and I'll show you what it looks like first after I use.

83
00:06:14,080 --> 00:06:17,020
And then we need to give it the name of our routes that we required.

84
00:06:17,140 --> 00:06:20,340
So comment routes campground routes and index routes.

85
00:06:20,440 --> 00:06:21,620
So we'll do that.

86
00:06:21,670 --> 00:06:28,810
So we'll start with index routes and then another update use comment routes.

87
00:06:28,810 --> 00:06:36,010
And then another one after it is campground draps and that tells we're apt to use those three route

88
00:06:36,010 --> 00:06:41,830
files that we've required right now only campground J us actually set up correctly.

89
00:06:42,010 --> 00:06:51,040
So let's finish off with the other ones comments J us and we'll change all those app dot CB router dot

90
00:06:52,090 --> 00:07:00,880
and then at the very bottom we do module that exports equals router and save but we still have some

91
00:07:00,880 --> 00:07:01,710
problems.

92
00:07:01,750 --> 00:07:03,380
You can see is logged in.

93
00:07:03,430 --> 00:07:07,720
We need to define that campground isn't defined.

94
00:07:08,380 --> 00:07:11,030
And this is also complaining that campground isn't defined.

95
00:07:11,320 --> 00:07:14,420
So we need to make sure we're adding in the correct models as well.

96
00:07:14,440 --> 00:07:22,950
So up here we'll just do another far and not start with campground equals require.

97
00:07:23,240 --> 00:07:25,180
And we need to get the correct file path.

98
00:07:25,180 --> 00:07:31,770
So right now we're inside the routes directory and we need to go inside the models directory campground

99
00:07:31,940 --> 00:07:32,080
.

100
00:07:32,240 --> 00:07:33,140
Yes.

101
00:07:33,220 --> 00:07:43,750
So we need to do dot dot slash models slash campground and then we'll also import comments that needs

102
00:07:43,750 --> 00:07:46,190
to be model slash comment.

103
00:07:46,250 --> 00:07:48,400
Those are the two models we want to require here

104
00:07:52,000 --> 00:07:59,510
and will save but we still have this issue of is logged in and to start I'm just going to copy the code

105
00:07:59,630 --> 00:08:00,770
is logged in.

106
00:08:01,060 --> 00:08:03,130
So it's at the bottom of this one.

107
00:08:03,130 --> 00:08:07,870
So copy that into both places so we'll keep it in our index routes.

108
00:08:08,050 --> 00:08:14,440
We're also going to add it to our comments route and just put them at the bottom for now and save.

109
00:08:14,950 --> 00:08:20,690
And now that air goes away and we're air free we get to go in this file.

110
00:08:20,870 --> 00:08:26,320
Now it's address our index J.S. where there's a little bit more to worry about because we're using some

111
00:08:26,350 --> 00:08:28,680
other code that's going to throw up some issues.

112
00:08:28,880 --> 00:08:38,410
So we need to start with our code that requires express and then it creates the Express router just

113
00:08:38,410 --> 00:08:42,420
copy it over here.

114
00:08:43,500 --> 00:08:53,020
Set in and then we'll change all of these apps to the router does get routed up posts just like that

115
00:08:57,300 --> 00:08:58,890
and save.

116
00:08:59,050 --> 00:09:00,270
We have a problem.

117
00:09:00,640 --> 00:09:05,190
It's complaining that passport isn't defined and that's because it's not defined.

118
00:09:05,360 --> 00:09:12,840
So all we need to do is a VAR passport equals require passport.

119
00:09:13,850 --> 00:09:17,700
And we're almost there but we also have a problem where user isn't defined.

120
00:09:17,920 --> 00:09:28,940
So we need to define user so our user equals require dot dot slash models slash user.

121
00:09:28,930 --> 00:09:33,310
So you probably noticed that in order for us to break things up into the separate files and keep our

122
00:09:33,320 --> 00:09:34,920
app just nice and clean.

123
00:09:35,140 --> 00:09:40,250
It does mean that we have to require things a little bit more often and that's the one downside.

124
00:09:40,270 --> 00:09:45,440
It's a little bit more code to require things but in the long term it makes a lot more sense to break

125
00:09:45,440 --> 00:09:46,560
a code out like this.

126
00:09:46,610 --> 00:09:51,640
Keep things organized have some order and structure to our app and it might mean an extra line or two

127
00:09:51,640 --> 00:09:55,260
here but it keeps her Applecross file nice and short.

128
00:09:55,580 --> 00:10:01,660
OK so if we try and test this out right now we have our three routes that we're requiring all of these

129
00:10:01,660 --> 00:10:06,720
files are now set up where they have the important dependencies required.

130
00:10:06,770 --> 00:10:13,360
The models express an express router and then we're exporting at the bottom of all of them although

131
00:10:13,370 --> 00:10:20,400
we're not doing it on this one which we need to do an index such as module but exports equals router

132
00:10:22,400 --> 00:10:23,790
Now if we try and start the app.

133
00:10:23,820 --> 00:10:26,320
Let's see if we get any errors.

134
00:10:26,430 --> 00:10:27,410
It looks good.

135
00:10:27,690 --> 00:10:28,950
Let's test it out.

136
00:10:29,310 --> 00:10:33,120
So we'll go to the root path to start that route is working.

137
00:10:33,600 --> 00:10:34,920
Feel the campgrounds.

138
00:10:34,950 --> 00:10:40,130
We have a problem here is we didn't define campground instead of the campgrounds route.

139
00:10:40,640 --> 00:10:49,830
So we need to open that up campground J.S. and just add in our VAR campground equals require dot dot

140
00:10:49,860 --> 00:10:54,680
slash models slash campground just like we did in the other files.

141
00:10:54,690 --> 00:10:56,610
Make sure there are no other errors in here.

142
00:10:56,630 --> 00:10:58,240
It looks good.

143
00:10:58,320 --> 00:11:04,140
Restart the server and try it out again.

144
00:11:04,130 --> 00:11:05,710
Now we're get to go.

145
00:11:06,460 --> 00:11:08,030
So we're viewing the show page.

146
00:11:08,100 --> 00:11:09,050
Let's go back.

147
00:11:09,120 --> 00:11:10,890
Try and log in.

148
00:11:11,000 --> 00:11:11,750
Great.

149
00:11:12,210 --> 00:11:16,790
Severus password and it all works just fine.

150
00:11:16,860 --> 00:11:17,970
Which is great.

151
00:11:17,980 --> 00:11:23,280
It was actually a bigger change we can make to dry up or code a little bit and it has to do with this

152
00:11:23,270 --> 00:11:28,230
line right here are these three lines actually what we're doing after you use index routes campground

153
00:11:28,250 --> 00:11:33,160
routes and comment routes what we can do is shorten the route declarations.

154
00:11:33,210 --> 00:11:36,660
So let's take an example of comment routes in common Jay.

155
00:11:36,690 --> 00:11:37,380
Yes.

156
00:11:37,440 --> 00:11:45,770
The two routes that we have all start with campgrounds slash ID slash comments campgrounds slash ID

157
00:11:45,810 --> 00:11:51,260
slash comments and then we have Slash knew on the end of one of them or in the campground drought's

158
00:11:51,290 --> 00:11:58,080
page if I open that up you can see that they all start with Slash campgrounds and we can actually reduce

159
00:11:58,080 --> 00:12:02,260
that duplication when we require them in our app.

160
00:12:02,310 --> 00:12:03,390
Yes.

161
00:12:03,380 --> 00:12:04,770
So lets start with campground.

162
00:12:05,070 --> 00:12:12,630
I can say all campground routes should start with Slash campgrounds and we'll take all of these campground

163
00:12:12,620 --> 00:12:19,130
G-S routes that weve to find these routes here and append slash campground in front of them.

164
00:12:19,500 --> 00:12:25,380
So if were going to make this change we then need to go to a campground JS file and get rid of all slash

165
00:12:25,380 --> 00:12:26,490
campgrounds.

166
00:12:26,490 --> 00:12:32,100
So the index now to show all campgrounds is just slash.

167
00:12:32,750 --> 00:12:41,130
The create is just slash our new is just slash New our show.

168
00:12:41,190 --> 00:12:44,900
Its just slash ID and thats all we have.

169
00:12:45,000 --> 00:12:51,230
So we'll save and what that does again is it takes campground routes all these routes were defined in

170
00:12:51,240 --> 00:12:54,710
that file and it appends slash campgrounds in front of them.

171
00:12:54,990 --> 00:13:00,690
So it helps us clean up the code and we can do the same thing although for index routes there is nothing

172
00:13:00,690 --> 00:13:05,840
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

173
00:13:06,170 --> 00:13:11,160
they all start with Slash if we want to have them all match this pattern where we provide the string

174
00:13:11,150 --> 00:13:20,460
first and let's just test that out start the server up refresh on the campgrounds page which is now

175
00:13:20,460 --> 00:13:24,220
working even though the route itself we go to campground.

176
00:13:24,260 --> 00:13:27,680
Yes the index route is just slash.

177
00:13:27,890 --> 00:13:32,370
It's actually slash campground because of this line right here.

178
00:13:32,660 --> 00:13:33,850
So comment routes.

179
00:13:33,920 --> 00:13:43,430
It's a little bit more complicated because they all start with Slash campground slash colon ID slash

180
00:13:43,590 --> 00:13:50,830
comments and then we can go to the comment file comment J us routes and change all of these so that

181
00:13:50,880 --> 00:13:53,280
this is only slash new.

182
00:13:53,850 --> 00:13:56,070
And this is just slash.

183
00:13:56,880 --> 00:14:02,700
So we shorten up the routes a lot and we grouped things into these ideas these topics so that all the

184
00:14:02,700 --> 00:14:07,320
campground routes start with Slash campgrounds and we can write shorter route declarations.

185
00:14:07,320 --> 00:14:12,720
And that's especially true with comments where we don't have to supply this long prefix here but there

186
00:14:12,720 --> 00:14:13,650
is a problem.

187
00:14:13,760 --> 00:14:18,200
If we save make sure we save the comment file and go back and restart

188
00:14:21,240 --> 00:14:27,710
and refresh and we go to one of the comment routes like add a new comment.

189
00:14:27,720 --> 00:14:29,750
First we're going to have to log in of course.

190
00:14:30,060 --> 00:14:35,120
So I'll log in a Severus and try that again.

191
00:14:35,750 --> 00:14:38,310
And now I try and add a comment.

192
00:14:38,370 --> 00:14:43,920
We have a problem and it's hard to tell what the problem is from this error which is always frustrating

193
00:14:44,300 --> 00:14:49,660
but it says cannot read a property name of NULL and it's pointing to this line right here.

194
00:14:49,750 --> 00:14:51,160
Campgrounds name.

195
00:14:51,210 --> 00:14:57,290
So from that error we can garner that campground is null which means that it's not finding our campground

196
00:14:57,360 --> 00:15:03,840
in the database because instead of this comment route when we create a new comment the first thing it

197
00:15:03,840 --> 00:15:06,500
does is find a campground by the ID.

198
00:15:06,750 --> 00:15:10,050
And what's happening is that our ID is actually not being found.

199
00:15:10,230 --> 00:15:18,400
So we can prove that by doing a confidant log request parameter ID and not start the server over.

200
00:15:18,990 --> 00:15:24,080
And this was working just fine until we moved those routes and we used this express router like this

201
00:15:24,620 --> 00:15:30,390
where we specified that all comment routes start with this where we did add Colan ID but if we try it

202
00:15:30,380 --> 00:15:39,620
out and we are fresh and we look here before this long arrow is pointed out we can see no was printed

203
00:15:39,620 --> 00:15:39,870
.

204
00:15:39,890 --> 00:15:42,420
So it's not finding the ID.

205
00:15:42,570 --> 00:15:48,450
What's happening is that our I.D. or colon I.D. route parameter isn't making it through to our comment

206
00:15:48,440 --> 00:15:49,180
routes.

207
00:15:49,380 --> 00:15:55,260
And there's a really easy fix when we use the express router in this file we pass in an option instead

208
00:15:55,250 --> 00:15:56,160
of an object.

209
00:15:56,250 --> 00:15:57,850
Merge programs.

210
00:15:58,110 --> 00:15:58,830
True.

211
00:15:59,340 --> 00:16:04,310
And that will then merge the Paramo from the campground and the comments together so that inside the

212
00:16:04,320 --> 00:16:09,270
comment routes we're able to access this Kolin ID that we defined.

213
00:16:09,270 --> 00:16:14,210
So let's restart now node Aptera Yes.

214
00:16:14,690 --> 00:16:23,180
If we are fresh right now we need to go back slash campgrounds refresh.

215
00:16:24,570 --> 00:16:27,690
I'll have to log back in as Severus password

216
00:16:31,020 --> 00:16:35,340
then let's go and try and add a comment and you can see that it works now just fine.

217
00:16:35,430 --> 00:16:39,080
And we're finding that ID and then we're finding the correct campground.

218
00:16:39,270 --> 00:16:40,430
So we don't have a problem.

219
00:16:40,800 --> 00:16:41,240
OK.

220
00:16:41,280 --> 00:16:43,200
So we successfully refactored the routes.

221
00:16:43,350 --> 00:16:48,110
The last thing we could really focus on is cleaning some other code up so we could go into our comments

222
00:16:48,120 --> 00:16:49,300
file for instance.

223
00:16:49,500 --> 00:16:51,730
And we don't need to say comment routes here anymore.

224
00:16:52,050 --> 00:16:57,990
But if we wanted to go in and add the semi-colons and also just add a little message before each route

225
00:16:57,990 --> 00:16:58,270
.

226
00:16:58,290 --> 00:17:09,480
So this is the comments new and then this is comments create and we'll save make sure everything's formatted

227
00:17:09,470 --> 00:17:11,700
nicely and get rid of that.

228
00:17:12,170 --> 00:17:13,520
We still have this is logged in.

229
00:17:13,530 --> 00:17:19,790
I'll just add a message here middleware that we will be refactoring and moving to it's own file that

230
00:17:19,800 --> 00:17:25,940
will then require Instead the comments file and our index japes file because we have it in both places

231
00:17:25,970 --> 00:17:26,740
.

232
00:17:27,440 --> 00:17:29,500
Let's make sure we have some comments here.

233
00:17:29,520 --> 00:17:31,440
So this is the route route.

234
00:17:31,940 --> 00:17:37,950
This is our register form route this handles the Sign-Up logic route.

235
00:17:38,120 --> 00:17:39,860
This is our log and form route.

236
00:17:40,160 --> 00:17:44,150
This handles the log and forms logic and actually does the logging in.

237
00:17:44,390 --> 00:17:47,040
And this is the log out route.

238
00:17:47,760 --> 00:17:51,010
And then we have our middleware here.

239
00:17:51,080 --> 00:17:51,460
All right.

240
00:17:51,470 --> 00:17:53,190
And then lastly the go to campground.

241
00:17:53,220 --> 00:17:55,260
Yes we have our index route.

242
00:17:55,670 --> 00:18:00,630
Our create route and our new route and our show.

243
00:18:00,620 --> 00:18:01,220
Great.

244
00:18:01,400 --> 00:18:06,280
And actually yes let's see if there's anything else we can really clean up in here.

245
00:18:06,330 --> 00:18:09,570
Let's go ahead and add a comment in here.

246
00:18:09,990 --> 00:18:15,030
Are we right requiring routes and otherwise for good to go.

247
00:18:15,300 --> 00:18:20,870
So we changed a lot of things around as far as the files and the directories but our logic is exactly

248
00:18:20,880 --> 00:18:22,060
the same.

249
00:18:22,080 --> 00:18:27,600
Really the biggest change aside from moving things into different files was showing this use of the

250
00:18:27,600 --> 00:18:35,370
Express router where we can require route files and in our case our route files are exporting the router

251
00:18:35,550 --> 00:18:40,040
that we're using and that doesn't have to be called router but that's the conventional name.

252
00:18:40,050 --> 00:18:46,310
So whatever we named here we just need to reference an ad Didcot gets and posts onto that object and

253
00:18:46,320 --> 00:18:52,550
then send that out at the very bottom and we can provide this prefix that will be added in front of

254
00:18:52,560 --> 00:18:54,620
every single route in that file.

255
00:18:54,620 --> 00:18:54,920
Great.

256
00:18:54,930 --> 00:19:01,320
So we really clean things up just to show you how much we have 46 lines in this app us in the previous

257
00:19:01,320 --> 00:19:01,920
version.

258
00:19:02,070 --> 00:19:05,930
If we open up SJS we had 177 lines.

259
00:19:06,120 --> 00:19:07,760
So that's a pretty drastic reduction.