Users can see their blog posts but they still can't delete them. 2
And we want to make sure they've got the ability to kind of clear out their list of posts from time 3
to time. 4
We also need to make sure that the user can navigate from individual posts back to the index view preceding 5
this. 6
So let's go ahead and do the easy one first. 7
Navigating back to the list of posts. 8
This is just going to be another simple implementation with the link component from re-act router. 9
So at the top we'll import our link from re-act router and then inside of our component 10
we'll just add a link to like so 11
close it. 12
And I got a capital I Aereo looking better back to index. 13
Let's test this really quick and I've got my link right here. 14
I can go back and forth go it looks good. 15
OK. 16
That's the easy one. 17
Let's go ahead and now do the delete functionality. 18
So this is give me a little more complicated than the link tag but still it's pretty easy. 19
It's very much like all of our action creators already. 20
All we need to do is create another action creator and make sure that we've got a button wired up to 21
it inside of our component right here. 22
And we'll just call it whenever the user presses a button should be pretty straightforward. 23
So let's go ahead and make our action creator to start. 24
We'll start by defining our action type at the top. 25
So we'll do exports Konst delete posts. 26
This will be of type. 27
Delete post and then we'll do our X and creator export function. 28
Deely post and we need to know what post we need to delete. 29
So we'll make sure that we always pass along the ID as well and then we'll do our request accedes dot 30
deletes because we wanted to make a delete request right here. 31
And then the URL is going to be just like we used back when we were checking out the API a while ago 32
. 33
So we'll do our route. 34
You are l posts. 35
We want to specify which puts you on deletes and then don't forget as per usual we'll do our API key 36
on here as well. 37
So we've got our delete requests to the root your URL slash PPOs slash ID and then our API key on the 38
head. 39
Very good. 40
OK let's return our action type here. 41
So return type. 42
What do we call it. 43
Delete post-ride. 44
Yes delete. 45
Post delete posts. 46
And our payload will be the request. 47
So we don't really need to have a producer in here that's going to be making use of this request. 48
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
built. 50
Nonetheless we should always put together all of our action creators very consistently because you never 51
know when you're going to change your mind and say oh well when the user deletes a post I want to modify 52
my state in such and such fashion you don't want to have to be you know coming back and your action 53
creator and adding that you know these very simple tokens in later on. 54
So make it easy on yourself to make sure that you complete your action creators. 55
All right let's go ahead and see this. 56
And now we can probably go ahead and make use of it immediately in our posts show component. 57
So we're already creating are already importing one action creator the fetch post one. 58
Let's also get our delete post as well. 59
And then we need to make sure that we inject it as a prop.. 60
So we've got fetched post comma delete posts. 61
Very good. 62
And now we just need to make a button here. 63
Let's put our button just underneath the link tag will do our button. 64
Let's add a class name on here as well or do make it look like a button button danger. 65
You know again make it nice and red also floats. 66
Right. 67
So it appears in the right hand corner of the screen. 68
We'll do that with the poll access right. 69
Class right here. 70
This is just a helper class from Bootstrap and we'll close off our button tag and we'll say delete posts 71
. 72
Let's make it two words. 73
OK. 74
So this will show the button but we want to make sure that we actually you know color action creators 75
so we need to add a on click handler. 76
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
function on delete click. 78
Now remember we've got a callback function right here that we're passing off to some other component 79
and we're probably going to make reference to this in it. 80
So let's just go ahead and bind the context while we're at it. 81
So we'll say buying this then we'll go ahead and define our on click handler on delete click and pretty 82
straightforward I think. 83
You know what's going on here we just need to go ahead and call this prop's dot delete posts. 84
That's our action creator and we'll pass the ID into it. 85
We've already used the ID before this stopped props. 86
Harams thought Id very straightforward. 87
OK let's go ahead and give this a shot in the browser. 88
So refresh we've got our button up here. 89
I've got my network request tab open 90
so I'm going to click the button and then I'm going to expect to see a successful delete request here 91
so will click delete. 92
And you'll see that we've got a delete request 200. 93
OK it was successfully deleted. 94
We'll go back to our index. 95
Note that the title is water is great and it looks like our blog post is now successfully deleted. 96
Perfect just what we want. 97
There's just one more thing that we want to do here. 98
When a user deletes a post we should really probably just automatically navigate them back to the index 99
. 100
You know if they delete the post they probably don't want to be looking at it anymore so will say when 101
they successfully delete the post. 102
They should be navigated back. 103
Let's go ahead and take care of that in the next section.