1
00:00:00,480 --> 00:00:05,130
Blessing we have to take care of inside of this application is to make sure that users have the ability

2
00:00:05,130 --> 00:00:11,700
to delete posts inside of the post show component right now which is where we want to locate a button

3
00:00:11,760 --> 00:00:15,590
that a user can press to delete a particular post.

4
00:00:15,600 --> 00:00:19,850
So let's go back to a mockup and make sure we're on the same page here.

5
00:00:21,030 --> 00:00:21,320
All right.

6
00:00:21,330 --> 00:00:25,030
So here's my post show component and you're on the right hand side.

7
00:00:25,050 --> 00:00:29,200
I want to show delete post OK.

8
00:00:29,220 --> 00:00:33,730
So in the render function going to find the link tag that we're using for navigation right now.

9
00:00:33,990 --> 00:00:36,790
Right underneath it will place a button tag.

10
00:00:37,440 --> 00:00:41,280
And I'm going to give myself a little bit of space to add properties on here because we're going to

11
00:00:41,280 --> 00:00:43,380
have a couple that we're going to add on.

12
00:00:43,620 --> 00:00:51,350
Now first I want to give it the text for the button which will be a simply delete post then for prompts

13
00:00:51,350 --> 00:00:53,560
will start off with the class name.

14
00:00:54,000 --> 00:01:02,010
I wanted to have a class name of ETN between dash danger and then one long one whole access.

15
00:01:02,130 --> 00:01:03,170
Right.

16
00:01:03,780 --> 00:01:08,970
So these first two classes are going to make the button appear nice and big and red so the user can

17
00:01:08,970 --> 00:01:15,000
see it very easily and understand hey this is something dangerous to do this last class name is going

18
00:01:15,000 --> 00:01:18,130
to pull the button all the way to the right hand side of the screen.

19
00:01:20,080 --> 00:01:25,870
Then whenever the user clicks on this button we want to run some amount of code so add on and on click

20
00:01:26,260 --> 00:01:28,000
event handler.

21
00:01:28,000 --> 00:01:35,280
So whenever a user clicks on the thing we'll call this dot on delete click and we'll bind it as well.

22
00:01:37,080 --> 00:01:41,450
So it's put together this on delete click handler right underneath.

23
00:01:41,460 --> 00:01:43,780
Component did mount add on delete.

24
00:01:43,800 --> 00:01:46,330
Click.

25
00:01:46,410 --> 00:01:49,280
Now we do not yet have an action creator to call.

26
00:01:49,290 --> 00:01:54,300
We definitely are going to want to call an action creator because we are going to make a Ajax request

27
00:01:54,300 --> 00:01:58,290
to our back end API to delete this very particular post.

28
00:01:58,350 --> 00:02:03,150
So let's just assume that we're going to make that action creator and maybe we're going to name it something

29
00:02:03,150 --> 00:02:07,520
like delete posts.

30
00:02:07,620 --> 00:02:09,390
I mean that's pretty safe.

31
00:02:09,390 --> 00:02:12,330
So we'll assume that the action creators call it delete posts.

32
00:02:12,540 --> 00:02:16,830
And because it is an action creator we're going to call it from this props.

33
00:02:16,830 --> 00:02:21,570
Now the other thing that we're probably going to be safe to assume is that Daily Post needs to know

34
00:02:21,570 --> 00:02:24,380
the idea of the post that we want to delete.

35
00:02:24,480 --> 00:02:31,320
So we're going to pass in the idea of our post so we'll do the same thing that we did inside of component

36
00:02:31,320 --> 00:02:38,730
in MT where we retrieved the ID off of our harams object that is provided to us by re-act router.

37
00:02:38,730 --> 00:02:43,550
So say Konst ID is this props match.

38
00:02:43,590 --> 00:02:49,030
Perhaps per rounds and it will pass the ID.

39
00:02:49,530 --> 00:02:55,110
Now one other approach that we could take here because this component does in theory have access to

40
00:02:55,110 --> 00:02:56,340
the post.

41
00:02:56,370 --> 00:03:05,660
We could also say something like this start Propst post.com ID something like that right there.

42
00:03:05,700 --> 00:03:11,910
Now I would say this is a pretty bad approach because it does assume that the post is in existence inside

43
00:03:11,910 --> 00:03:12,540
this component.

44
00:03:12,540 --> 00:03:14,970
It assumes that we have fetched the posts already.

45
00:03:15,210 --> 00:03:22,050
But as we've seen there this component here will render on the screen without the post being available.

46
00:03:22,080 --> 00:03:26,190
Like when the post is still being fetched from the back end this component will render.

47
00:03:26,260 --> 00:03:31,560
And so I think it's a little bit more risky to refer to the post on prop's it's way more reasonable

48
00:03:31,560 --> 00:03:34,250
to look out the harams object.

49
00:03:34,290 --> 00:03:38,880
The Prim's object is always going to have the ID available and so we really don't have to ever think

50
00:03:38,880 --> 00:03:40,710
about it at all.

51
00:03:41,730 --> 00:03:43,030
OK so this looks good.

52
00:03:43,230 --> 00:03:48,000
Now we're kind of working backwards here where we are making use of the action creator and then filling

53
00:03:48,000 --> 00:03:49,820
in the actual action creator itself.

54
00:03:49,830 --> 00:03:55,630
So we're going to continue in this kind of backwards flow by importing the action Creator from the action

55
00:03:55,650 --> 00:03:56,940
file.

56
00:03:56,940 --> 00:04:02,460
So I will say delete posts and we're going to wired up to our Kinect helper at the bottom of the file

57
00:04:03,740 --> 00:04:06,780
so will go down to the bottom.

58
00:04:06,800 --> 00:04:11,450
Here's our connector helper and I'll add it in.

59
00:04:12,010 --> 00:04:12,570
There you go.

60
00:04:12,690 --> 00:04:17,140
Delete post Ok that's looking pretty good.

61
00:04:17,470 --> 00:04:25,660
Let's now open up our action creator file and actually define this action creator inside of my actions

62
00:04:25,690 --> 00:04:27,960
index js file.

63
00:04:28,030 --> 00:04:31,260
We'll define our export function.

64
00:04:31,300 --> 00:04:31,690
Delete.

65
00:04:31,690 --> 00:04:32,350
Post.

66
00:04:35,020 --> 00:04:39,620
Now this action career will be called with the idea that we want to delete.

67
00:04:39,760 --> 00:04:47,410
So we'll receive ideas the argument and then we're going to make our actual network request to reach

68
00:04:47,410 --> 00:04:50,080
out to our API and delete the post.

69
00:04:50,080 --> 00:04:55,210
Now the URL that we want to access is just about identical to the one that we had used for fetching

70
00:04:55,210 --> 00:04:56,900
an individual post.

71
00:04:56,920 --> 00:05:00,820
If we go back to our documentation on the API itself.

72
00:05:00,940 --> 00:05:07,930
Recall that we had this delete request type down here and call API slash post and then the idea of the

73
00:05:07,930 --> 00:05:11,230
post we want to get rid of.

74
00:05:11,290 --> 00:05:13,000
So inside of delete post.

75
00:05:13,240 --> 00:05:14,420
Let's make a request.

76
00:05:14,470 --> 00:05:17,640
So we'll say Konst request is x start.

77
00:05:17,870 --> 00:05:24,910
Remember this time we want to make it delete type request so will say delete the whole place our template

78
00:05:24,910 --> 00:05:28,900
string with some back ticks root you r l.

79
00:05:29,260 --> 00:05:31,950
Slash posts slash.

80
00:05:32,050 --> 00:05:38,940
The idea of the post that we want to delete and then our API as well.

81
00:05:39,670 --> 00:05:43,320
Now recall that the URL right here is a little bit tricky.

82
00:05:43,450 --> 00:05:44,820
So do trouble.

83
00:05:44,860 --> 00:05:49,870
Triple check it and make sure you've got all the correct slashes and braces and all that kind of good

84
00:05:49,870 --> 00:05:51,100
stuff.

85
00:05:53,280 --> 00:05:55,620
And then finally we'll return.

86
00:05:56,260 --> 00:05:56,710
Whoops.

87
00:05:56,740 --> 00:05:58,060
Lowercase your turn.

88
00:06:00,640 --> 00:06:06,560
And I will give it a type of delete post and a payload.

89
00:06:06,560 --> 00:06:10,880
And now in this case the payload is something it's kind of interesting we need to really think about

90
00:06:10,880 --> 00:06:14,280
what we want to return and pick up inside the reducer here.

91
00:06:14,570 --> 00:06:20,360
In this case we don't really need to make access to the post anymore like the post really is doing nothing

92
00:06:20,360 --> 00:06:21,450
for us.

93
00:06:21,500 --> 00:06:26,780
All we really care about is making sure that we remove the post we just deleted from our application

94
00:06:26,780 --> 00:06:27,990
level state.

95
00:06:28,040 --> 00:06:33,110
So rather than worrying about getting the whole big post inside this thing I think it'd be a lot more

96
00:06:33,110 --> 00:06:38,260
reasonable to just return the ID of the post that we are deleting.

97
00:06:38,300 --> 00:06:43,450
Then inside the reducer we can just delete and get rid of that particular post.

98
00:06:47,710 --> 00:06:48,050
OK.

99
00:06:48,110 --> 00:06:49,410
So this is looking pretty good.

100
00:06:49,430 --> 00:06:54,560
I think there's one last big gotcha inside of here that we have to be aware of.

101
00:06:54,560 --> 00:06:57,310
Remember that when we were creating a post.

102
00:06:57,350 --> 00:06:59,440
So here is to create post post-action creator.

103
00:06:59,540 --> 00:07:05,150
We had said that we wanted to navigate the user back to the list of posts after the post had been created

104
00:07:06,070 --> 00:07:09,410
and we did so by using this navigation callback rate here.

105
00:07:09,440 --> 00:07:13,530
Now when we're deleting a post we probably want to do the same exact thing.

106
00:07:13,700 --> 00:07:19,040
We probably want to navigate the user back to our list of posts only after we have successfully deleted

107
00:07:19,040 --> 00:07:20,360
the post.

108
00:07:20,360 --> 00:07:21,720
So let's take care of that.

109
00:07:21,770 --> 00:07:27,780
By adding on another callback just like we had done previously to our delete post action creator.

110
00:07:28,400 --> 00:07:36,140
We'll first go back to our post show component and we'll find where we are calling our action creator.

111
00:07:36,140 --> 00:07:38,830
So scroll up here is on delete.

112
00:07:38,830 --> 00:07:42,470
Click here and here is the call to our action creator.

113
00:07:42,470 --> 00:07:49,160
So going up house on a callback to this thing whenever someone clicks on the delete button to delete

114
00:07:49,160 --> 00:07:51,840
this request we will wait for the.

115
00:07:51,850 --> 00:07:53,020
Or delete the post.

116
00:07:53,030 --> 00:07:58,550
We'll wait for the request to be completed and then we'll navigate the user back to our list of posts

117
00:07:58,580 --> 00:08:05,490
by calling this prop's history push and then the route that we want to navigate to.

118
00:08:05,660 --> 00:08:11,470
So again making it a little bit of use of programmatic navigation right here.

119
00:08:11,520 --> 00:08:15,300
So this is being passed as the second argument to delete post.

120
00:08:15,460 --> 00:08:20,040
So going back to our action create or file Whoops there we go.

121
00:08:20,580 --> 00:08:24,600
We will receive that callback.

122
00:08:25,060 --> 00:08:29,470
And then on her request we'll chain on the door then.

123
00:08:29,810 --> 00:08:35,650
So when ever this request is successfully completed we'll then call the callback which will navigate

124
00:08:35,650 --> 00:08:39,120
the user back to our big list of posts.

125
00:08:39,150 --> 00:08:39,480
OK.

126
00:08:39,520 --> 00:08:42,000
So I think that's about it for implementation.

127
00:08:42,010 --> 00:08:43,180
Let's do a quick test.

128
00:08:43,180 --> 00:08:46,050
Inside the browser and see how we're doing.

129
00:08:47,080 --> 00:08:52,800
I'm going to go back to my list of posts or refresh the page or click on.

130
00:08:52,800 --> 00:08:53,660
Hi there.

131
00:08:53,670 --> 00:08:56,020
So here's my big red button on the right hand side.

132
00:08:56,250 --> 00:09:01,470
So I should be able to click this button see the post required or the delete request come up and then

133
00:09:01,530 --> 00:09:04,220
automatically navigate back to the index.

134
00:09:04,320 --> 00:09:05,820
So I will delete posts.

135
00:09:05,910 --> 00:09:07,950
We go back and there we go.

136
00:09:07,960 --> 00:09:13,810
Looks like everything is good except for one little error message down here.

137
00:09:13,950 --> 00:09:17,650
So it looks like we've got a little bit of an air around our type that we defined.

138
00:09:17,670 --> 00:09:20,890
We didn't actually handle the type definition.

139
00:09:20,970 --> 00:09:25,160
So let's take care of that in the next section and do a little bit of a wrap up as well.