Hi welcome back.
So the next two videos we're focusing on editing it now updating comments rather than campgrounds which
we just finished.
So we have a few videos.
The first one is around getting the edit and update routes to work.
The next one is on getting that destroy route and then the last one will be adding in our authorization
to comments.
So to start these two videos anyone can edit a comment or anyone can delete a comment.
It doesn't matter if they own it or not.
So in this video we're starting with editing and we have three main things to add.
The first one is our edit route for a comment.
The next one is adding a button so that we can click on a button to go to that edit route next to every
comment.
And then lastly we want to add in the correct update route that actually updated database so that everything
works just fine.
So if I take a look right now what we have I'll go back to campgrounds
and I did add in a few new campgrounds because we deleted all of them in the last video.
Once I add a comment which I already have here.
Wonderful comment.
I want to see an edit and a delete button and to start again.
They'll just show up for everyone.
So by the end of this video every comment should have at and delete and anyone can delete to come in
.
Anyone can edit a comment.
So let's go back and let's start by adding in our route.
So remember for restful routing I'll pull up our little table here and I'll preview it.
Here we go.
Let's take a look at it.
Slash dogs slash slash added as it get request and it's just going to show the form for one dog.
In our case for one comment and then we have update which is slash comments slash ideas put.
But for us it's not just slash comments slash comment slash ID such edit.
Remember it's a nested route.
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
I'll just Adam down here our campground at it looks like a campground slash ID slash at it.
But remember that our comments routes are nested after campgrounds.
So we have something like campgrounds slash ID slash comments slash ID slash at it.
But this can also be called ID.
So we need to change this because this one is ID and if we tried to get both of them out we would actually
only get one basically this one would be added First to our prams under the name ID then this one would
override it.
So we'll call this comment ID.
It can be anything but this is the route that we're going to define.
So campground such ID such comments such common ID slash at it.
It's a lot all that we have to write though is this because remember in our app J.S. where we require
the routes we scroll down we already add this in to all comment routes.
So lets do that now comment is out for now.
We'll start by focusing on this last bit of the edit route.
So have the comments.
J.S. routes file we have new uncreate afterwards we'll do a router get slash comment Id slash at it
function request and response.
And what we'll do eventually is render a form start with the rest us and edit route for comments and
lets make sure that we can get to that route.
So we restart the server refresh here and then we need to add on slash comments slash any idea you just
do that slash at it and there we go we get at route for comment.
The next thing we should do is add in the correct link of the button that will take us to that edit
form.
So thats going to be our campground show page right here.
And then if we find the part where we are looping through and adding in each comment and before we go
any further I should point out I'm still in 10.
So all these changes are in V 10 if you're following along.
So campground our common stop for each for each one putting out the author a user name 10 days ago and
comment text.
So below that we'll just add in Bootstrap do an anchor tag with a bootstrap class PTEN and we'll do
PTEN dash extra small.
So it's smaller and the color can be warning.
In our case and then here will just add at it and ref it's going to be pretty long.
You need to do slash campgrounds slash or campground ID which we're just doing a camp ground.
So we need to add in art E.J. Yes variable camp ground.
It's going to be a bit of a mess.
Underscore ID and then when you slash after that comments and then our comment ID and each individual
comment in our For each is going to be just a comment in Ejay as tags dot underscore or ID slash after
that edit very long.
But we can do something like this to clean it up just a little bit.
It is gigantic just like that if we wanted to
we'll save restart the server.
Although technically we don't have to do it right there.
And we refresh.
We now have our edit button.
If we inspect it and take a look at the Tref it's going to be long.
You can see it's campgrounds slash a huge ID slash comments slash a huge ID slash at it and that should
now take us to the added route which we now want to render a form for that comment.
So let's stop our server let's make that template which need to be called at it.
E.J. Yes.
So that needs to be inside of use.
So touch views slash comments slash at it.
E.J. Yes.
And then open that up
as we go.
And then let's just take the new comments or nuda E.J. as form and duplicate that to start because it's
going to be very similar to the new forum.
The only difference is that rather than having an empty form to add a comment it will actually have
the previously existing data.
So it's close that out just paste that in here.
And we do need to change a few things.
Most notably you can start by just changing
this H-1 to say edit and then in the form we need to change the action.
We still need campground sashed campground IDs such comments but we also want slash the campground or
excuse me slash the comment Id which comment is not defined yet so we will need to provide this.
We're doing that urge.
Error driven development where we're writing the code that we want to work.
So remember instead of edit we need to find the correct comment and then pass that to this template
.
So inside the route added We need to find that data passed into this template so that we can then add
the corrected into the form so that we see what we're editing.
We see that data and method will be a post because reading method overwrite again but it's supposed
to be a put.
So we need this underscore method equals put and that should get us to update and the next change that
will make its will go to our input.
And we want to give it instead of placeholder.
We want value and then we need our Ejay as tags and we're going to add in comment Tex which again comment
is not defined yet.
So if we run this now we'll get an error and they click on edit and we never rendered the form.
So we actually don't get an error if we go to our route though and we actually render the form so Rezko
render
comments slash at it.
We should now restart.
I would try to go to this page again the same edit we get an error now telling us that campground is
not defined.
And then if we fix that we'll also get another error that says comment is not defined not we're not
actually using campground in our template except for this one part right here with the action because
we need that campground ID to actually set up the correct route so that we go to that edit route which
remember it's at long nasty nested route campground slash WIPs campground ID sosh comments such common
ID we need that to work but we don't need the entire campground with all the associated data all that
we need is the ID so we can actually simplify this and just call something campground idea doesn't exist
but we'll pass it through in our template and we have access to the ID in our comments routes.
So you might be thinking we'd need to do something like campground but find by id and then pass it in
the ID from the route.
We don't have to do that because we actually already have the campground ID instead of request up her
Amscot ID and in my opinion this is pretty confusing because the way I read your set up although it
looks like we have as camp or a comment Id But ID is what we defined in the address is back here right
here.
So Id refers to the campground ID and then comment Id is the idea of the comment.
So if we just pass in campgrounds underscore ID is equal to request up her Amscot ID.
We shouldnt get that same error anymore.
Well I have a different one which is now telling us that oh its still telling its campground is not
defined because were using that back over here.
Would you want to change our template here.
Let's just say etic comment for now.
Now for fresh We get comments is not defined.
So we need to fix that and this time we actually have to look up the comment because we need the text
inside of it.
So thats a comment dot find by ID in the ID is request harams dot comments ID.
The second thing then we'll have our callback was an error and found comments if error.
For now we're getting very close to what we're going to implement those nice messages that keep talking
about.
For now let's just do a rest.
Redirect loops back.
Else you just want to do this right here.
And we also need to pass in comment of course which is just another one of these comments is found comments
just like that restart.
So remember we're taking this idea.
The first one we're just calling ID and we're passing that directly through.
Then we're taking the second ID and looking at the corresponding comment using that ID.
Now if I refresh the page now we get our form.
It's already styled because we just copied that one over.
And then of course think about what error you expect to see when I hit submit.
Cannot put campgrounds.
And that's because we don't have that route defined.
So let's do that now.
So we've done the first two actually of the task we wanted to do edit route edit button.
Now we just need to update.
So back to comments let me add another comment here Stube comments that it wrote then we want comments
update.
Just to refresh your memory and needs to be a put request to slash campgrounds slash some campground
ID slash comments slash comments Id just like that.
And that is going to be our update route as a put request so router put members using router here which
are just defining right here and then returning that whole thing while not returning it but sending
it out with modular exports rather than after I get so routed up put and all we need is slash call and
comments.
Id just like that
request response.
And as always I like to start with those simple red dots and you hit the update route for comments lets
try hitting it now with our form
refresh submit.
Great.
So our forms go in the right place.
Our router set up now we need the logic and our logic is very similar to how we did it for a campground
.
If we look at Update campground up find by id and update we want to do the exact same thing here but
comment does find by id and update and remember that fund by id and update takes three different things
.
The ID defined by the data to update it with and then the callback to run afterwards.
So we want a comment up find by id and update the ID is request up harams dot comments ID.
This one here the data that we want if we go to or for.
You'll see that recalling it comments text.
So accessit by comment dot text or just comment actually is all we need.
So we can go back requests dot body dot comments and that's just the entire comment object which only
has one thing text error.
And then we'll call this updated comment
and then we'll check if there's an error we'll send the user back just with the rest up redirect back
.
Otherwise we want to send them back to the show page for the comments and all that we need to do there
is redstart redirect.
Remember the show page is slash campgrounds slash an ID and that Id we have.
Again it doesn't look like we have it here it looks like our route and just comment Id.
I really think that's confusing to beginners.
But if we go back keep doing this but if we go to J.S. remember all of our common routes are nested
after this.
So there's always an ID for a campground so we can use that request up harams dot ID and that should
be all we need.
So let's try it.
Hopefully it works out for us.
Let's edit this comment to be anything that's hit submit.
And if we scroll down perfect we see anything let's try editing again.
Perfect.
It's working just fine.
Great.
So that was edit and update remember we added in the edit route first which is the form and the reason
that I did comments after campground is that it's a little bit Nassir it's a little extra syntax and
you have to worry about those nested routes.
But other than the routes and some of the ID names everything is pretty much the same.
I mean a find by id and update we have an edit route and then we have an update route.
So we did that we started with the edit route.
We added the button in to actually a link just with bootstrap styling to look like a button.
And then we added in at the very end the update route.
Next will do the exact same thing but for destroying or deleting a comment