Add Delete Functionality to Posts Page in Remix

Kent C. Dodds: [0:00] Let's add delete functionality, I want a delete button right there. Let's go into our form and I'm going to change this from a P tag to a div, and we're going to make this a flex container with justify-end and a gap of four.

[0:15] Then, we can create another button to be side-by-side with this one, but we only want it if this is not a new post. We'll say isNewPost null. Otherwise we can put that button in there and the intent here is going to be to delete.

[0:30] Instead of blue, we're going to make all of these a variant of red, disabled will be isDeleting and here we'll say, isDeleting, we'll say "Deleting...", otherwise "Delete", and then we can get rid of this bit right there.

[0:47] Let's create these variables coming up here. I think you got the idea, we're just going to do the exact same thing that we had for the other ones., Deleting and "delete". Then, for the functionality of this, in our action, we're actually just going to grab the intent from formData.get('intent') before we do anything else. We don't need the title, slug, markdown, or anything.

[1:09] Once we know that the intent is delete, we can go ahead and delete it. We'll just say if the intent is delete, then we'll await a new function called deletePost(params.slug). Then, we'll return a redirect to posts/admin.

[1:25] Let's create this deletePost utility right here. Export an async function called deletePost that will take our slug, which is a string. We'll return prisma.post.delete where the slug is what we've been given. Then, we can bring that in and save that.

[1:43] Coming back over here, we've got our "Delete" button now. We are going to delete our first post, "Deleting..." It's gone. If we go to "Create a New Post", that button is not there.

[1:52] In review, what we did here is we went to our markdown. We changed things up a little bit so we can have a "Delete" button. We made the intent be "delete". We updated the class names and make it nice and red. We disabled it. When we're in an isDeleting state, we updated the text based on that deleted state.

[2:08] We also made sure that this doesn't display for new posts. Then, to create that isDeleting, we did the same thing that we did with the others by getting the intent to determine whether we're in a deleting state. Then, we updated our action to get that intent from the formData. If the intent is to delete, then we delete the post and redirect to posts/admin.