Blessing we have to take care of inside of this application is to make sure that users have the ability
to delete posts inside of the post show component right now which is where we want to locate a button
that a user can press to delete a particular post.
So let's go back to a mockup and make sure we're on the same page here.
All right.
So here's my post show component and you're on the right hand side.
I want to show delete post OK.
So in the render function going to find the link tag that we're using for navigation right now.
Right underneath it will place a button tag.
And I'm going to give myself a little bit of space to add properties on here because we're going to
have a couple that we're going to add on.
Now first I want to give it the text for the button which will be a simply delete post then for prompts
will start off with the class name.
I wanted to have a class name of ETN between dash danger and then one long one whole access.
Right.
So these first two classes are going to make the button appear nice and big and red so the user can
see it very easily and understand hey this is something dangerous to do this last class name is going
to pull the button all the way to the right hand side of the screen.
Then whenever the user clicks on this button we want to run some amount of code so add on and on click
event handler.
So whenever a user clicks on the thing we'll call this dot on delete click and we'll bind it as well.
So it's put together this on delete click handler right underneath.
Component did mount add on delete.
Click.
Now we do not yet have an action creator to call.
We definitely are going to want to call an action creator because we are going to make a Ajax request
to our back end API to delete this very particular post.
So let's just assume that we're going to make that action creator and maybe we're going to name it something
like delete posts.
I mean that's pretty safe.
So we'll assume that the action creators call it delete posts.
And because it is an action creator we're going to call it from this props.
Now the other thing that we're probably going to be safe to assume is that Daily Post needs to know
the idea of the post that we want to delete.
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
in MT where we retrieved the ID off of our harams object that is provided to us by re-act router.
So say Konst ID is this props match.
Perhaps per rounds and it will pass the ID.
Now one other approach that we could take here because this component does in theory have access to
the post.
We could also say something like this start Propst post.com ID something like that right there.
Now I would say this is a pretty bad approach because it does assume that the post is in existence inside
this component.
It assumes that we have fetched the posts already.
But as we've seen there this component here will render on the screen without the post being available.
Like when the post is still being fetched from the back end this component will render.
And so I think it's a little bit more risky to refer to the post on prop's it's way more reasonable
to look out the harams object.
The Prim's object is always going to have the ID available and so we really don't have to ever think
about it at all.
OK so this looks good.
Now we're kind of working backwards here where we are making use of the action creator and then filling
in the actual action creator itself.
So we're going to continue in this kind of backwards flow by importing the action Creator from the action
file.
So I will say delete posts and we're going to wired up to our Kinect helper at the bottom of the file
so will go down to the bottom.
Here's our connector helper and I'll add it in.
There you go.
Delete post Ok that's looking pretty good.
Let's now open up our action creator file and actually define this action creator inside of my actions
index js file.
We'll define our export function.
Delete.
Post.
Now this action career will be called with the idea that we want to delete.
So we'll receive ideas the argument and then we're going to make our actual network request to reach
out to our API and delete the post.
Now the URL that we want to access is just about identical to the one that we had used for fetching
an individual post.
If we go back to our documentation on the API itself.
Recall that we had this delete request type down here and call API slash post and then the idea of the
post we want to get rid of.
So inside of delete post.
Let's make a request.
So we'll say Konst request is x start.
Remember this time we want to make it delete type request so will say delete the whole place our template
string with some back ticks root you r l.
Slash posts slash.
The idea of the post that we want to delete and then our API as well.
Now recall that the URL right here is a little bit tricky.
So do trouble.
Triple check it and make sure you've got all the correct slashes and braces and all that kind of good
stuff.
And then finally we'll return.
Whoops.
Lowercase your turn.
And I will give it a type of delete post and a payload.
And now in this case the payload is something it's kind of interesting we need to really think about
what we want to return and pick up inside the reducer here.
In this case we don't really need to make access to the post anymore like the post really is doing nothing
for us.
All we really care about is making sure that we remove the post we just deleted from our application
level state.
So rather than worrying about getting the whole big post inside this thing I think it'd be a lot more
reasonable to just return the ID of the post that we are deleting.
Then inside the reducer we can just delete and get rid of that particular post.
OK.
So this is looking pretty good.
I think there's one last big gotcha inside of here that we have to be aware of.
Remember that when we were creating a post.
So here is to create post post-action creator.
We had said that we wanted to navigate the user back to the list of posts after the post had been created
and we did so by using this navigation callback rate here.
Now when we're deleting a post we probably want to do the same exact thing.
We probably want to navigate the user back to our list of posts only after we have successfully deleted
the post.
So let's take care of that.
By adding on another callback just like we had done previously to our delete post action creator.
We'll first go back to our post show component and we'll find where we are calling our action creator.
So scroll up here is on delete.
Click here and here is the call to our action creator.
So going up house on a callback to this thing whenever someone clicks on the delete button to delete
this request we will wait for the.
Or delete the post.
We'll wait for the request to be completed and then we'll navigate the user back to our list of posts
by calling this prop's history push and then the route that we want to navigate to.
So again making it a little bit of use of programmatic navigation right here.
So this is being passed as the second argument to delete post.
So going back to our action create or file Whoops there we go.
We will receive that callback.
And then on her request we'll chain on the door then.
So when ever this request is successfully completed we'll then call the callback which will navigate
the user back to our big list of posts.
OK.
So I think that's about it for implementation.
Let's do a quick test.
Inside the browser and see how we're doing.
I'm going to go back to my list of posts or refresh the page or click on.
Hi there.
So here's my big red button on the right hand side.
So I should be able to click this button see the post required or the delete request come up and then
automatically navigate back to the index.
So I will delete posts.
We go back and there we go.
Looks like everything is good except for one little error message down here.
So it looks like we've got a little bit of an air around our type that we defined.
We didn't actually handle the type definition.
So let's take care of that in the next section and do a little bit of a wrap up as well.