1
00:00:00,120 --> 00:00:01,280
Hi welcome back.

2
00:00:01,620 --> 00:00:06,900
So the next two videos we're focusing on editing it now updating comments rather than campgrounds which

3
00:00:06,900 --> 00:00:08,250
we just finished.

4
00:00:08,250 --> 00:00:09,570
So we have a few videos.

5
00:00:09,570 --> 00:00:13,900
The first one is around getting the edit and update routes to work.

6
00:00:14,280 --> 00:00:19,770
The next one is on getting that destroy route and then the last one will be adding in our authorization

7
00:00:19,770 --> 00:00:20,850
to comments.

8
00:00:20,850 --> 00:00:25,800
So to start these two videos anyone can edit a comment or anyone can delete a comment.

9
00:00:25,800 --> 00:00:27,800
It doesn't matter if they own it or not.

10
00:00:28,080 --> 00:00:32,270
So in this video we're starting with editing and we have three main things to add.

11
00:00:32,280 --> 00:00:35,340
The first one is our edit route for a comment.

12
00:00:35,340 --> 00:00:40,650
The next one is adding a button so that we can click on a button to go to that edit route next to every

13
00:00:40,650 --> 00:00:41,340
comment.

14
00:00:41,610 --> 00:00:47,280
And then lastly we want to add in the correct update route that actually updated database so that everything

15
00:00:47,280 --> 00:00:48,440
works just fine.

16
00:00:48,840 --> 00:00:53,220
So if I take a look right now what we have I'll go back to campgrounds

17
00:00:56,550 --> 00:01:01,810
and I did add in a few new campgrounds because we deleted all of them in the last video.

18
00:01:02,700 --> 00:01:05,250
Once I add a comment which I already have here.

19
00:01:05,310 --> 00:01:06,740
Wonderful comment.

20
00:01:06,810 --> 00:01:11,540
I want to see an edit and a delete button and to start again.

21
00:01:11,580 --> 00:01:12,840
They'll just show up for everyone.

22
00:01:12,840 --> 00:01:17,130
So by the end of this video every comment should have at and delete and anyone can delete to come in

23
00:01:17,130 --> 00:01:17,160
.

24
00:01:17,160 --> 00:01:18,710
Anyone can edit a comment.

25
00:01:19,140 --> 00:01:23,330
So let's go back and let's start by adding in our route.

26
00:01:23,520 --> 00:01:31,500
So remember for restful routing I'll pull up our little table here and I'll preview it.

27
00:01:31,500 --> 00:01:32,400
Here we go.

28
00:01:32,760 --> 00:01:34,120
Let's take a look at it.

29
00:01:34,170 --> 00:01:40,780
Slash dogs slash slash added as it get request and it's just going to show the form for one dog.

30
00:01:40,790 --> 00:01:48,010
In our case for one comment and then we have update which is slash comments slash ideas put.

31
00:01:48,360 --> 00:01:54,100
But for us it's not just slash comments slash comment slash ID such edit.

32
00:01:54,150 --> 00:01:56,310
Remember it's a nested route.

33
00:01:56,340 --> 00:02:04,950
So if we look at the routes that we have let me close this down and if we go back to our read me here

34
00:02:04,950 --> 00:02:12,160
I'll just Adam down here our campground at it looks like a campground slash ID slash at it.

35
00:02:12,830 --> 00:02:16,350
But remember that our comments routes are nested after campgrounds.

36
00:02:16,470 --> 00:02:24,550
So we have something like campgrounds slash ID slash comments slash ID slash at it.

37
00:02:24,900 --> 00:02:27,210
But this can also be called ID.

38
00:02:27,330 --> 00:02:33,360
So we need to change this because this one is ID and if we tried to get both of them out we would actually

39
00:02:33,360 --> 00:02:39,180
only get one basically this one would be added First to our prams under the name ID then this one would

40
00:02:39,180 --> 00:02:40,270
override it.

41
00:02:40,410 --> 00:02:42,930
So we'll call this comment ID.

42
00:02:42,930 --> 00:02:46,220
It can be anything but this is the route that we're going to define.

43
00:02:46,920 --> 00:02:51,440
So campground such ID such comments such common ID slash at it.

44
00:02:51,440 --> 00:02:58,830
It's a lot all that we have to write though is this because remember in our app J.S. where we require

45
00:02:58,830 --> 00:03:05,230
the routes we scroll down we already add this in to all comment routes.

46
00:03:05,670 --> 00:03:08,860
So lets do that now comment is out for now.

47
00:03:09,240 --> 00:03:15,070
We'll start by focusing on this last bit of the edit route.

48
00:03:15,390 --> 00:03:16,860
So have the comments.

49
00:03:17,020 --> 00:03:30,290
J.S. routes file we have new uncreate afterwards we'll do a router get slash comment Id slash at it

50
00:03:32,970 --> 00:03:35,300
function request and response.

51
00:03:35,910 --> 00:03:44,340
And what we'll do eventually is render a form start with the rest us and edit route for comments and

52
00:03:44,340 --> 00:03:46,170
lets make sure that we can get to that route.

53
00:03:46,260 --> 00:03:57,270
So we restart the server refresh here and then we need to add on slash comments slash any idea you just

54
00:03:57,270 --> 00:04:02,940
do that slash at it and there we go we get at route for comment.

55
00:04:02,940 --> 00:04:08,370
The next thing we should do is add in the correct link of the button that will take us to that edit

56
00:04:08,400 --> 00:04:10,160
form.

57
00:04:10,350 --> 00:04:15,520
So thats going to be our campground show page right here.

58
00:04:15,810 --> 00:04:21,960
And then if we find the part where we are looping through and adding in each comment and before we go

59
00:04:21,960 --> 00:04:24,950
any further I should point out I'm still in 10.

60
00:04:25,200 --> 00:04:27,930
So all these changes are in V 10 if you're following along.

61
00:04:28,410 --> 00:04:35,550
So campground our common stop for each for each one putting out the author a user name 10 days ago and

62
00:04:35,560 --> 00:04:36,860
comment text.

63
00:04:37,140 --> 00:04:47,130
So below that we'll just add in Bootstrap do an anchor tag with a bootstrap class PTEN and we'll do

64
00:04:47,850 --> 00:04:49,860
PTEN dash extra small.

65
00:04:49,860 --> 00:04:53,660
So it's smaller and the color can be warning.

66
00:04:53,790 --> 00:05:03,060
In our case and then here will just add at it and ref it's going to be pretty long.

67
00:05:03,100 --> 00:05:10,730
You need to do slash campgrounds slash or campground ID which we're just doing a camp ground.

68
00:05:10,810 --> 00:05:15,840
So we need to add in art E.J. Yes variable camp ground.

69
00:05:16,150 --> 00:05:17,830
It's going to be a bit of a mess.

70
00:05:17,950 --> 00:05:28,240
Underscore ID and then when you slash after that comments and then our comment ID and each individual

71
00:05:28,240 --> 00:05:37,750
comment in our For each is going to be just a comment in Ejay as tags dot underscore or ID slash after

72
00:05:37,750 --> 00:05:41,030
that edit very long.

73
00:05:41,350 --> 00:05:46,420
But we can do something like this to clean it up just a little bit.

74
00:05:46,480 --> 00:05:51,280
It is gigantic just like that if we wanted to

75
00:05:54,250 --> 00:05:58,190
we'll save restart the server.

76
00:05:58,780 --> 00:06:00,910
Although technically we don't have to do it right there.

77
00:06:01,210 --> 00:06:02,510
And we refresh.

78
00:06:02,680 --> 00:06:04,450
We now have our edit button.

79
00:06:04,450 --> 00:06:09,690
If we inspect it and take a look at the Tref it's going to be long.

80
00:06:09,760 --> 00:06:16,300
You can see it's campgrounds slash a huge ID slash comments slash a huge ID slash at it and that should

81
00:06:16,300 --> 00:06:23,410
now take us to the added route which we now want to render a form for that comment.

82
00:06:23,590 --> 00:06:29,030
So let's stop our server let's make that template which need to be called at it.

83
00:06:29,050 --> 00:06:30,110
E.J. Yes.

84
00:06:30,280 --> 00:06:31,990
So that needs to be inside of use.

85
00:06:32,050 --> 00:06:37,640
So touch views slash comments slash at it.

86
00:06:37,750 --> 00:06:39,090
E.J. Yes.

87
00:06:39,580 --> 00:06:40,690
And then open that up

88
00:06:45,790 --> 00:06:48,750
as we go.

89
00:06:49,180 --> 00:06:58,840
And then let's just take the new comments or nuda E.J. as form and duplicate that to start because it's

90
00:06:58,840 --> 00:07:01,120
going to be very similar to the new forum.

91
00:07:01,180 --> 00:07:06,310
The only difference is that rather than having an empty form to add a comment it will actually have

92
00:07:06,580 --> 00:07:09,430
the previously existing data.

93
00:07:09,430 --> 00:07:12,390
So it's close that out just paste that in here.

94
00:07:12,640 --> 00:07:14,440
And we do need to change a few things.

95
00:07:14,710 --> 00:07:17,140
Most notably you can start by just changing

96
00:07:19,900 --> 00:07:25,930
this H-1 to say edit and then in the form we need to change the action.

97
00:07:25,930 --> 00:07:32,690
We still need campground sashed campground IDs such comments but we also want slash the campground or

98
00:07:32,740 --> 00:07:41,800
excuse me slash the comment Id which comment is not defined yet so we will need to provide this.

99
00:07:41,880 --> 00:07:42,910
We're doing that urge.

100
00:07:42,970 --> 00:07:47,250
Error driven development where we're writing the code that we want to work.

101
00:07:47,320 --> 00:07:53,020
So remember instead of edit we need to find the correct comment and then pass that to this template

102
00:07:53,030 --> 00:07:53,170
.

103
00:07:53,290 --> 00:07:58,420
So inside the route added We need to find that data passed into this template so that we can then add

104
00:07:58,420 --> 00:08:02,260
the corrected into the form so that we see what we're editing.

105
00:08:02,260 --> 00:08:08,890
We see that data and method will be a post because reading method overwrite again but it's supposed

106
00:08:08,890 --> 00:08:09,850
to be a put.

107
00:08:09,880 --> 00:08:19,990
So we need this underscore method equals put and that should get us to update and the next change that

108
00:08:19,990 --> 00:08:23,120
will make its will go to our input.

109
00:08:23,890 --> 00:08:26,590
And we want to give it instead of placeholder.

110
00:08:27,250 --> 00:08:36,370
We want value and then we need our Ejay as tags and we're going to add in comment Tex which again comment

111
00:08:36,370 --> 00:08:38,040
is not defined yet.

112
00:08:38,740 --> 00:08:48,600
So if we run this now we'll get an error and they click on edit and we never rendered the form.

113
00:08:48,730 --> 00:08:54,440
So we actually don't get an error if we go to our route though and we actually render the form so Rezko

114
00:08:54,610 --> 00:08:55,210
render

115
00:08:58,030 --> 00:09:02,290
comments slash at it.

116
00:09:02,290 --> 00:09:04,540
We should now restart.

117
00:09:04,690 --> 00:09:09,820
I would try to go to this page again the same edit we get an error now telling us that campground is

118
00:09:09,820 --> 00:09:10,840
not defined.

119
00:09:10,960 --> 00:09:16,870
And then if we fix that we'll also get another error that says comment is not defined not we're not

120
00:09:16,870 --> 00:09:24,880
actually using campground in our template except for this one part right here with the action because

121
00:09:24,880 --> 00:09:31,930
we need that campground ID to actually set up the correct route so that we go to that edit route which

122
00:09:31,930 --> 00:09:37,810
remember it's at long nasty nested route campground slash WIPs campground ID sosh comments such common

123
00:09:37,810 --> 00:09:45,220
ID we need that to work but we don't need the entire campground with all the associated data all that

124
00:09:45,220 --> 00:09:52,620
we need is the ID so we can actually simplify this and just call something campground idea doesn't exist

125
00:09:52,810 --> 00:09:59,020
but we'll pass it through in our template and we have access to the ID in our comments routes.

126
00:09:59,050 --> 00:10:06,880
So you might be thinking we'd need to do something like campground but find by id and then pass it in

127
00:10:06,970 --> 00:10:08,780
the ID from the route.

128
00:10:08,890 --> 00:10:14,110
We don't have to do that because we actually already have the campground ID instead of request up her

129
00:10:14,110 --> 00:10:22,560
Amscot ID and in my opinion this is pretty confusing because the way I read your set up although it

130
00:10:22,560 --> 00:10:33,300
looks like we have as camp or a comment Id But ID is what we defined in the address is back here right

131
00:10:33,300 --> 00:10:33,930
here.

132
00:10:34,380 --> 00:10:41,170
So Id refers to the campground ID and then comment Id is the idea of the comment.

133
00:10:42,120 --> 00:10:51,420
So if we just pass in campgrounds underscore ID is equal to request up her Amscot ID.

134
00:10:51,420 --> 00:10:53,310
We shouldnt get that same error anymore.

135
00:10:53,530 --> 00:10:59,370
Well I have a different one which is now telling us that oh its still telling its campground is not

136
00:10:59,370 --> 00:11:03,540
defined because were using that back over here.

137
00:11:04,050 --> 00:11:06,330
Would you want to change our template here.

138
00:11:06,840 --> 00:11:10,090
Let's just say etic comment for now.

139
00:11:10,140 --> 00:11:14,350
Now for fresh We get comments is not defined.

140
00:11:14,490 --> 00:11:20,190
So we need to fix that and this time we actually have to look up the comment because we need the text

141
00:11:20,190 --> 00:11:21,100
inside of it.

142
00:11:21,510 --> 00:11:32,840
So thats a comment dot find by ID in the ID is request harams dot comments ID.

143
00:11:32,850 --> 00:11:42,890
The second thing then we'll have our callback was an error and found comments if error.

144
00:11:43,770 --> 00:11:47,820
For now we're getting very close to what we're going to implement those nice messages that keep talking

145
00:11:47,820 --> 00:11:48,390
about.

146
00:11:48,390 --> 00:11:51,630
For now let's just do a rest.

147
00:11:52,650 --> 00:11:58,250
Redirect loops back.

148
00:11:58,500 --> 00:12:02,380
Else you just want to do this right here.

149
00:12:02,970 --> 00:12:14,160
And we also need to pass in comment of course which is just another one of these comments is found comments

150
00:12:14,490 --> 00:12:17,910
just like that restart.

151
00:12:19,140 --> 00:12:20,690
So remember we're taking this idea.

152
00:12:20,690 --> 00:12:24,980
The first one we're just calling ID and we're passing that directly through.

153
00:12:25,170 --> 00:12:30,060
Then we're taking the second ID and looking at the corresponding comment using that ID.

154
00:12:30,060 --> 00:12:33,320
Now if I refresh the page now we get our form.

155
00:12:33,330 --> 00:12:36,170
It's already styled because we just copied that one over.

156
00:12:36,720 --> 00:12:43,740
And then of course think about what error you expect to see when I hit submit.

157
00:12:44,310 --> 00:12:46,380
Cannot put campgrounds.

158
00:12:46,470 --> 00:12:48,810
And that's because we don't have that route defined.

159
00:12:49,110 --> 00:12:50,900
So let's do that now.

160
00:12:51,000 --> 00:12:56,220
So we've done the first two actually of the task we wanted to do edit route edit button.

161
00:12:56,220 --> 00:12:58,190
Now we just need to update.

162
00:12:58,260 --> 00:13:09,870
So back to comments let me add another comment here Stube comments that it wrote then we want comments

163
00:13:10,000 --> 00:13:11,130
update.

164
00:13:11,700 --> 00:13:20,130
Just to refresh your memory and needs to be a put request to slash campgrounds slash some campground

165
00:13:20,130 --> 00:13:26,220
ID slash comments slash comments Id just like that.

166
00:13:26,940 --> 00:13:36,980
And that is going to be our update route as a put request so router put members using router here which

167
00:13:36,980 --> 00:13:41,940
are just defining right here and then returning that whole thing while not returning it but sending

168
00:13:41,940 --> 00:13:51,900
it out with modular exports rather than after I get so routed up put and all we need is slash call and

169
00:13:52,380 --> 00:13:53,320
comments.

170
00:13:53,460 --> 00:13:55,710
Id just like that

171
00:13:58,380 --> 00:14:00,580
request response.

172
00:14:01,170 --> 00:14:10,890
And as always I like to start with those simple red dots and you hit the update route for comments lets

173
00:14:11,100 --> 00:14:12,690
try hitting it now with our form

174
00:14:15,540 --> 00:14:17,730
refresh submit.

175
00:14:17,730 --> 00:14:18,420
Great.

176
00:14:18,450 --> 00:14:19,890
So our forms go in the right place.

177
00:14:19,890 --> 00:14:27,050
Our router set up now we need the logic and our logic is very similar to how we did it for a campground

178
00:14:27,070 --> 00:14:27,160
.

179
00:14:27,230 --> 00:14:34,430
If we look at Update campground up find by id and update we want to do the exact same thing here but

180
00:14:34,470 --> 00:14:39,600
comment does find by id and update and remember that fund by id and update takes three different things

181
00:14:39,600 --> 00:14:39,790
.

182
00:14:39,900 --> 00:14:47,260
The ID defined by the data to update it with and then the callback to run afterwards.

183
00:14:47,280 --> 00:14:58,320
So we want a comment up find by id and update the ID is request up harams dot comments ID.

184
00:14:58,710 --> 00:15:04,900
This one here the data that we want if we go to or for.

185
00:15:05,310 --> 00:15:09,300
You'll see that recalling it comments text.

186
00:15:09,360 --> 00:15:15,240
So accessit by comment dot text or just comment actually is all we need.

187
00:15:15,750 --> 00:15:24,660
So we can go back requests dot body dot comments and that's just the entire comment object which only

188
00:15:24,660 --> 00:15:27,640
has one thing text error.

189
00:15:27,780 --> 00:15:30,090
And then we'll call this updated comment

190
00:15:33,090 --> 00:15:42,210
and then we'll check if there's an error we'll send the user back just with the rest up redirect back

191
00:15:42,490 --> 00:15:44,520
.

192
00:15:44,520 --> 00:15:50,910
Otherwise we want to send them back to the show page for the comments and all that we need to do there

193
00:15:50,910 --> 00:15:52,440
is redstart redirect.

194
00:15:52,440 --> 00:16:00,780
Remember the show page is slash campgrounds slash an ID and that Id we have.

195
00:16:00,780 --> 00:16:04,920
Again it doesn't look like we have it here it looks like our route and just comment Id.

196
00:16:05,250 --> 00:16:07,620
I really think that's confusing to beginners.

197
00:16:07,830 --> 00:16:14,670
But if we go back keep doing this but if we go to J.S. remember all of our common routes are nested

198
00:16:14,670 --> 00:16:15,540
after this.

199
00:16:15,540 --> 00:16:23,610
So there's always an ID for a campground so we can use that request up harams dot ID and that should

200
00:16:23,610 --> 00:16:24,750
be all we need.

201
00:16:24,750 --> 00:16:26,050
So let's try it.

202
00:16:26,640 --> 00:16:28,160
Hopefully it works out for us.

203
00:16:28,350 --> 00:16:34,860
Let's edit this comment to be anything that's hit submit.

204
00:16:34,860 --> 00:16:41,270
And if we scroll down perfect we see anything let's try editing again.

205
00:16:41,820 --> 00:16:42,260
Perfect.

206
00:16:42,270 --> 00:16:43,430
It's working just fine.

207
00:16:43,980 --> 00:16:44,600
Great.

208
00:16:44,610 --> 00:16:51,690
So that was edit and update remember we added in the edit route first which is the form and the reason

209
00:16:51,690 --> 00:16:57,600
that I did comments after campground is that it's a little bit Nassir it's a little extra syntax and

210
00:16:57,600 --> 00:16:59,500
you have to worry about those nested routes.

211
00:16:59,790 --> 00:17:05,250
But other than the routes and some of the ID names everything is pretty much the same.

212
00:17:05,260 --> 00:17:11,470
I mean a find by id and update we have an edit route and then we have an update route.

213
00:17:11,550 --> 00:17:13,550
So we did that we started with the edit route.

214
00:17:13,590 --> 00:17:18,500
We added the button in to actually a link just with bootstrap styling to look like a button.

215
00:17:18,660 --> 00:17:21,750
And then we added in at the very end the update route.

216
00:17:22,350 --> 00:17:26,510
Next will do the exact same thing but for destroying or deleting a comment