1
00:00:00,240 --> 00:00:00,960
Welcome back.

2
00:00:01,050 --> 00:00:05,330
So next up we're focusing on two leading campgrounds which is nice and short.

3
00:00:05,340 --> 00:00:12,120
Actually it's a single route remembered our destroy route is slash campgrounds slash ID as a delete

4
00:00:12,120 --> 00:00:17,670
request and all we need to do is write a form that sends a tweet request to that you url.

5
00:00:17,780 --> 00:00:24,420
We click on it it removes it using find by id and remove and then redirects us back somewhere.

6
00:00:24,480 --> 00:00:25,800
So let's get started.

7
00:00:25,920 --> 00:00:30,170
Instead of my campground Yes I'm going to add a new route.

8
00:00:30,330 --> 00:00:36,790
And before I do that let me just cut this and put it below the update campground road and now we'll

9
00:00:36,810 --> 00:00:44,910
add in our destroy campground route terracing destroy is such a serious word for this.

10
00:00:44,910 --> 00:00:49,230
I don't know why it doesn't work but you'll hear people use them interchangeably.

11
00:00:49,230 --> 00:00:52,780
Technically destroy is is the term for restful routing.

12
00:00:52,800 --> 00:00:57,540
I think the main idea is that it's just supposed to be a different name than the actual verb which is

13
00:00:57,540 --> 00:00:59,540
delete so destroy.

14
00:00:59,610 --> 00:01:01,720
I might have called it remove or something anyways.

15
00:01:01,950 --> 00:01:03,180
So let's get started.

16
00:01:03,180 --> 00:01:05,020
We need an app or a router.

17
00:01:05,070 --> 00:01:11,840
Excuse me delete and then instead of here our route needs to be sashed campgrounds.

18
00:01:11,850 --> 00:01:18,030
But remember we don't have to write such campgrounds because the way our routes are set up in the address

19
00:01:18,270 --> 00:01:25,080
we're already adding sosh campgrounds in front of everything so it's just call an ID request in response

20
00:01:26,690 --> 00:01:30,510
and let's just do a simple Redstart.

21
00:01:31,470 --> 00:01:39,480
You are trying to delete something and then we need to hit that route which isn't that easy because

22
00:01:39,480 --> 00:01:43,230
we actually have to make a form and we have to use method override.

23
00:01:43,230 --> 00:01:44,510
So let's do that now.

24
00:01:44,670 --> 00:01:54,120
On the show page under the edit button which we have right here let's add in a form and we can't just

25
00:01:54,120 --> 00:01:59,850
do it with a link because we have to use a form to send a post request that has underscore method in

26
00:01:59,850 --> 00:02:02,220
the row equal to delete.

27
00:02:02,910 --> 00:02:11,850
So make a form and that form needs to have action and method method is post because that's what we have

28
00:02:11,850 --> 00:02:20,190
to do for method override and the action needs to be slash campgrounds slash and then the ID which we

29
00:02:20,190 --> 00:02:27,030
have with campground dot underscore ID and you could also just copy what we have here without the slash

30
00:02:27,030 --> 00:02:27,870
at it.

31
00:02:28,080 --> 00:02:34,320
So that's our form and then all that will add in the form is a button and it will have a class equal

32
00:02:34,320 --> 00:02:39,560
to between ETN dashed danger and then able to say the least.

33
00:02:40,770 --> 00:02:42,130
And that's all we should need to do.

34
00:02:42,150 --> 00:02:47,040
Restart the server up refresh the page.

35
00:02:47,940 --> 00:02:50,690
It's not styled very nicely will fix that and a little bit.

36
00:02:50,730 --> 00:02:56,580
I'd like for them just to be side by side but because we have a form rather than just a link it's not

37
00:02:56,580 --> 00:02:59,790
going to be in line so it takes up its the next line.

38
00:02:59,790 --> 00:03:05,610
And if we click on delete right now stomack going to work because we're missing one key part which is

39
00:03:05,610 --> 00:03:08,140
our question mark at the end.

40
00:03:08,490 --> 00:03:11,360
Underscore method calls delete.

41
00:03:11,570 --> 00:03:17,500
Now if we save and we go back try that again refresh.

42
00:03:17,730 --> 00:03:24,720
Click on delete that now treats it as it delete request and we trigger this code you are trying to delete

43
00:03:24,720 --> 00:03:25,520
something.

44
00:03:25,950 --> 00:03:29,780
So now let's actually do eat something which is pretty easy.

45
00:03:29,880 --> 00:03:41,970
Using mongoose instead of here we find by id and remove so campground that find by id and remove and

46
00:03:41,970 --> 00:03:50,470
all that it takes is the ID which is request up harams ID and then we need to add in our callback with

47
00:03:50,470 --> 00:03:54,700
an error and we'll just check if there is an error.

48
00:03:55,290 --> 00:03:56,840
Doesn't really matter at this point.

49
00:03:56,970 --> 00:04:03,840
We're going to redirect you really direct you to slash campgrounds grounds either way but it's good

50
00:04:03,840 --> 00:04:08,870
to just have the code in place to handle the error even if we're not doing anything different.

51
00:04:10,200 --> 00:04:12,020
So we'll send you back to campgrounds.

52
00:04:12,080 --> 00:04:17,460
Of course we can't go to the show page because that hopefully that item has been deleted so there is

53
00:04:17,460 --> 00:04:19,260
no show page anymore.

54
00:04:19,290 --> 00:04:20,370
Let's give it a shot.

55
00:04:20,520 --> 00:04:22,010
See what happens.

56
00:04:22,110 --> 00:04:25,650
Restart the server whenever we change our routes.

57
00:04:25,770 --> 00:04:28,250
Let's go back to sashed campgrounds.

58
00:04:29,430 --> 00:04:34,400
Let's remove lovy creek and click on the.

59
00:04:34,440 --> 00:04:34,960
There we go.

60
00:04:34,980 --> 00:04:40,730
It's gone great so let's just make sure our edit and update still work.

61
00:04:41,010 --> 00:04:44,460
Let's change this title some exclamation points.

62
00:04:44,460 --> 00:04:46,440
Submit that works.

63
00:04:46,440 --> 00:04:50,730
I want to delete it because we're running low on campgrounds but everything seems to be working just

64
00:04:50,730 --> 00:04:52,220
fine.

65
00:04:53,370 --> 00:04:58,100
The last thing we should do is style this so that our form buttons don't end up on separate lines.

66
00:04:58,260 --> 00:05:05,040
And what's happening again is that this is wrapped in a form and a form is not an inline element so

67
00:05:05,280 --> 00:05:09,740
it goes down to the next line as you can see if I select it correctly.

68
00:05:09,740 --> 00:05:12,440
No I just deleted it.

69
00:05:12,450 --> 00:05:18,490
Let me try that again make sure I don't do that this time.

70
00:05:18,510 --> 00:05:18,920
There we go.

71
00:05:18,930 --> 00:05:20,370
Here's the form.

72
00:05:20,430 --> 00:05:22,190
Notice that it takes up the entire line.

73
00:05:22,230 --> 00:05:30,570
When I hover over it what we can do is give it a display property of in line as he can see then it snaps

74
00:05:30,660 --> 00:05:33,120
into line to do that.

75
00:05:33,330 --> 00:05:40,470
Let's create an ID so we could just do style here and just say display in line which is really not a

76
00:05:40,470 --> 00:05:41,470
good idea.

77
00:05:41,700 --> 00:05:47,540
So we'll give it an ID and we'll call it delete form.

78
00:05:47,820 --> 00:05:50,390
Just like that save.

79
00:05:50,640 --> 00:05:59,950
Then we can go to our stylesheet public stylesheets main gutsiest us and we'll just add hash sign Octa

80
00:06:00,030 --> 00:06:03,140
or delete Dasch form.

81
00:06:03,510 --> 00:06:11,340
Display is in line so that it's treated like an inline element rather than inline block or block.

82
00:06:11,500 --> 00:06:13,210
So let's try that.

83
00:06:13,290 --> 00:06:22,320
Restart the server refresh the page and you don't notice a difference because I had already fixed it

84
00:06:22,320 --> 00:06:24,930
in the last page before it refreshed but it's working now.

85
00:06:24,930 --> 00:06:26,760
Every time I refresh the page.

86
00:06:26,970 --> 00:06:27,500
Great.

87
00:06:27,600 --> 00:06:34,220
So that's all I need to do to display them correctly to make them match up on the same line.

88
00:06:34,680 --> 00:06:37,270
If we resize things still look good.

89
00:06:37,680 --> 00:06:41,260
You could play around with the button sizes if you want to make them smaller.

90
00:06:41,310 --> 00:06:53,580
Just use BT access right here if you prefer how that looks totally up to you of course.

91
00:06:53,640 --> 00:06:56,220
Just take a look.

92
00:06:56,250 --> 00:07:02,790
Looks a little nicer possibly the next step that we want to do is make sure that you only have permission

93
00:07:02,790 --> 00:07:08,000
to edit and delete if you're logged in and you created this campground.

94
00:07:08,010 --> 00:07:12,150
I don't want anyone to come in and be able to read it or edit it.

95
00:07:12,150 --> 00:07:16,540
I only want potato head to be able to do that and there's a few steps involved there.

96
00:07:16,770 --> 00:07:19,650
So one of them is just hiding the buttons.

97
00:07:19,650 --> 00:07:20,870
If it doesn't belong to me.

98
00:07:21,060 --> 00:07:27,060
So if I'm not potato head I shouldn't see these buttons but even if I did see them and I clicked on

99
00:07:27,060 --> 00:07:32,040
one I should have some middleware that doesn't let me progress it doesn't let me at it.

100
00:07:32,070 --> 00:07:34,940
It doesn't let me delete even if I am signed in.

101
00:07:35,070 --> 00:07:36,780
So there's two layers of protection.

102
00:07:36,780 --> 00:07:42,000
One is just not showing the buttons unless you own this campground and the other layer is done through

103
00:07:42,000 --> 00:07:44,600
middleware So that's what will be up to in the next video.

104
00:07:44,700 --> 00:07:45,510
I'll see you in a bit