1

00:00:01,170  -->  00:00:04,130
Users can see their blog posts but they still can't delete them.

2

00:00:04,140  -->  00:00:07,800
And we want to make sure they've got the ability to kind of clear out their list of posts from time

3

00:00:07,800  -->  00:00:08,990
to time.

4

00:00:09,000  -->  00:00:16,080
We also need to make sure that the user can navigate from individual posts back to the index view preceding

5

00:00:16,080  -->  00:00:16,930
this.

6

00:00:17,370  -->  00:00:19,740
So let's go ahead and do the easy one first.

7

00:00:20,010  -->  00:00:22,140
Navigating back to the list of posts.

8

00:00:22,320  -->  00:00:27,870
This is just going to be another simple implementation with the link component from re-act router.

9

00:00:28,110  -->  00:00:36,930
So at the top we'll import our link from re-act router and then inside of our component

10

00:00:39,690  -->  00:00:43,790
we'll just add a link to like so

11

00:00:47,640  -->  00:00:48,460
close it.

12

00:00:48,510  -->  00:00:56,350
And I got a capital I Aereo looking better back to index.

13

00:00:57,150  -->  00:01:01,040
Let's test this really quick and I've got my link right here.

14

00:01:01,050  -->  00:01:06,480
I can go back and forth go it looks good.

15

00:01:06,790  -->  00:01:07,190
OK.

16

00:01:07,260  -->  00:01:08,190
That's the easy one.

17

00:01:08,190  -->  00:01:11,610
Let's go ahead and now do the delete functionality.

18

00:01:11,610  -->  00:01:16,380
So this is give me a little more complicated than the link tag but still it's pretty easy.

19

00:01:16,380  -->  00:01:19,270
It's very much like all of our action creators already.

20

00:01:19,290  -->  00:01:25,650
All we need to do is create another action creator and make sure that we've got a button wired up to

21

00:01:25,650  -->  00:01:27,670
it inside of our component right here.

22

00:01:27,810  -->  00:01:32,010
And we'll just call it whenever the user presses a button should be pretty straightforward.

23

00:01:32,550  -->  00:01:36,230
So let's go ahead and make our action creator to start.

24

00:01:37,020  -->  00:01:41,040
We'll start by defining our action type at the top.

25

00:01:41,370  -->  00:01:46,500
So we'll do exports Konst delete posts.

26

00:01:47,250  -->  00:01:48,190
This will be of type.

27

00:01:48,210  -->  00:01:56,580
Delete post and then we'll do our X and creator export function.

28

00:01:57,390  -->  00:02:01,640
Deely post and we need to know what post we need to delete.

29

00:02:01,680  -->  00:02:09,270
So we'll make sure that we always pass along the ID as well and then we'll do our request accedes dot

30

00:02:09,330  -->  00:02:14,270
deletes because we wanted to make a delete request right here.

31

00:02:15,900  -->  00:02:20,710
And then the URL is going to be just like we used back when we were checking out the API a while ago

32

00:02:20,720  -->  00:02:21,150
.

33

00:02:21,630  -->  00:02:23,660
So we'll do our route.

34

00:02:23,700  -->  00:02:27,460
You are l posts.

35

00:02:27,780  -->  00:02:34,380
We want to specify which puts you on deletes and then don't forget as per usual we'll do our API key

36

00:02:34,380  -->  00:02:36,720
on here as well.

37

00:02:36,810  -->  00:02:46,140
So we've got our delete requests to the root your URL slash PPOs slash ID and then our API key on the

38

00:02:46,140  -->  00:02:46,650
head.

39

00:02:46,650  -->  00:02:48,110
Very good.

40

00:02:49,070  -->  00:02:52,560
OK let's return our action type here.

41

00:02:52,560  -->  00:02:56,610
So return type.

42

00:02:57,390  -->  00:02:58,030
What do we call it.

43

00:02:58,050  -->  00:02:59,150
Delete post-ride.

44

00:02:59,220  -->  00:02:59,820
Yes delete.

45

00:02:59,820  -->  00:03:02,950
Post delete posts.

46

00:03:03,210  -->  00:03:07,490
And our payload will be the request.

47

00:03:08,490  -->  00:03:13,810
So we don't really need to have a producer in here that's going to be making use of this request.

48

00:03:13,830  -->  00:03:19,110
You know we don't really need to react to a delete request in any way shape or form as our app is currently

49

00:03:19,110  -->  00:03:19,760
built.

50

00:03:20,010  -->  00:03:24,870
Nonetheless we should always put together all of our action creators very consistently because you never

51

00:03:24,870  -->  00:03:29,460
know when you're going to change your mind and say oh well when the user deletes a post I want to modify

52

00:03:29,460  -->  00:03:34,560
my state in such and such fashion you don't want to have to be you know coming back and your action

53

00:03:34,560  -->  00:03:38,450
creator and adding that you know these very simple tokens in later on.

54

00:03:38,460  -->  00:03:44,300
So make it easy on yourself to make sure that you complete your action creators.

55

00:03:44,310  -->  00:03:46,450
All right let's go ahead and see this.

56

00:03:46,950  -->  00:03:53,460
And now we can probably go ahead and make use of it immediately in our posts show component.

57

00:03:54,360  -->  00:03:59,300
So we're already creating are already importing one action creator the fetch post one.

58

00:03:59,490  -->  00:04:05,490
Let's also get our delete post as well.

59

00:04:05,490  -->  00:04:09,600
And then we need to make sure that we inject it as a prop..

60

00:04:09,600  -->  00:04:14,680
So we've got fetched post comma delete posts.

61

00:04:15,030  -->  00:04:18,130
Very good.

62

00:04:20,430  -->  00:04:23,780
And now we just need to make a button here.

63

00:04:24,130  -->  00:04:31,430
Let's put our button just underneath the link tag will do our button.

64

00:04:31,830  -->  00:04:37,320
Let's add a class name on here as well or do make it look like a button button danger.

65

00:04:37,320  -->  00:04:41,330
You know again make it nice and red also floats.

66

00:04:41,370  -->  00:04:41,850
Right.

67

00:04:41,850  -->  00:04:44,230
So it appears in the right hand corner of the screen.

68

00:04:44,250  -->  00:04:46,290
We'll do that with the poll access right.

69

00:04:46,290  -->  00:04:47,380
Class right here.

70

00:04:47,580  -->  00:04:57,130
This is just a helper class from Bootstrap and we'll close off our button tag and we'll say delete posts

71

00:04:57,230  -->  00:04:58,010
.

72

00:04:58,310  -->  00:04:59,990
Let's make it two words.

73

00:05:00,690  -->  00:05:01,110
OK.

74

00:05:01,110  -->  00:05:06,650
So this will show the button but we want to make sure that we actually you know color action creators

75

00:05:06,660  -->  00:05:10,530
so we need to add a on click handler.

76

00:05:10,530  -->  00:05:17,370
So let's split this into an additional line here and we'll say on click and then we'll make a new helper

77

00:05:17,370  -->  00:05:22,700
function on delete click.

78

00:05:23,370  -->  00:05:29,340
Now remember we've got a callback function right here that we're passing off to some other component

79

00:05:29,670  -->  00:05:32,060
and we're probably going to make reference to this in it.

80

00:05:32,190  -->  00:05:35,490
So let's just go ahead and bind the context while we're at it.

81

00:05:35,820  -->  00:05:48,630
So we'll say buying this then we'll go ahead and define our on click handler on delete click and pretty

82

00:05:48,630  -->  00:05:49,430
straightforward I think.

83

00:05:49,440  -->  00:05:55,630
You know what's going on here we just need to go ahead and call this prop's dot delete posts.

84

00:05:55,800  -->  00:05:59,610
That's our action creator and we'll pass the ID into it.

85

00:05:59,610  -->  00:06:03,170
We've already used the ID before this stopped props.

86

00:06:03,210  -->  00:06:09,770
Harams thought Id very straightforward.

87

00:06:09,830  -->  00:06:13,470
OK let's go ahead and give this a shot in the browser.

88

00:06:13,580  -->  00:06:17,320
So refresh we've got our button up here.

89

00:06:17,760  -->  00:06:19,680
I've got my network request tab open

90

00:06:23,370  -->  00:06:28,800
so I'm going to click the button and then I'm going to expect to see a successful delete request here

91

00:06:29,340  -->  00:06:30,960
so will click delete.

92

00:06:31,320  -->  00:06:34,280
And you'll see that we've got a delete request 200.

93

00:06:34,290  -->  00:06:36,650
OK it was successfully deleted.

94

00:06:36,690  -->  00:06:38,790
We'll go back to our index.

95

00:06:38,790  -->  00:06:45,350
Note that the title is water is great and it looks like our blog post is now successfully deleted.

96

00:06:45,360  -->  00:06:47,310
Perfect just what we want.

97

00:06:48,060  -->  00:06:50,560
There's just one more thing that we want to do here.

98

00:06:50,580  -->  00:06:56,220
When a user deletes a post we should really probably just automatically navigate them back to the index

99

00:06:56,220  -->  00:06:56,350
.

100

00:06:56,350  -->  00:07:00,840
You know if they delete the post they probably don't want to be looking at it anymore so will say when

101

00:07:00,840  -->  00:07:02,410
they successfully delete the post.

102

00:07:02,430  -->  00:07:04,270
They should be navigated back.

103

00:07:04,320  -->  00:07:06,870
Let's go ahead and take care of that in the next section.