Add Update Functionality to an Edit Post Page in Remix

Kent C. Dodds: [0:00] To update the post, we're going to need a utility like createPost. Let's go over to our post.server file and copy the createPost, make it an updatePost. We'll take the slug so we know which one to update.

[0:12] Then we'll change this from create to update, and we'll say where the slug matches the one that we want to update. Perfect. Now we can come over here. We can await updatePost. We'll pass params.slug, updating the one that we're currently editing.

[0:26] Then we'll pass the title, slug, and markdown as what changes we want to make to that particular one. Then we'll bring in updatePost. If we save that, come over here and we change this from my-first-post to maybe my-very-first-post.

[0:40] My very first post. Hurray! Then we click on "Create Post," that's saying creating. Now we've got my very first post. It doesn't make sense to call this Create Post. This should probably say Update Post if we have some post data.

[0:57] Let's come over here and down for our button, we're going to need some state that tells us whether or not this is a new post to determine what we should be displaying here.

[1:07] Let's come up here, we'll have a, isNewPost, and we can determine that just based on whether there's any post in the data. If we go back up to our loader, we send nothing for new posts and we send post data for existing ones.

[1:22] That's a pretty good way to tell whether we have a new post on our hands. Now, we're going to come down in here and we'll say, isNewPost.

[1:31] Then, we can say all of this same stuff, otherwise null. Then, here we can say, isNewPost null. Otherwise, we determine whether or not we're actually updating.

[1:43] Right now we can just call it isCreating, but I don't think that makes much sense. We're going to make a new variable called, isUpdating, and we'll have updating...otherwise update.

[1:54] How can we tell whether we're in an updating state? What I'm going to do is we'll add a name called "intent" here and a value called either "create" or "update". We'll say, "isNewPost create or update," and we'll lower case that.

[2:11] Then, we'll also want this to be isCreating or isUpdating for being disabled. Now, let's come up here to the top to create that isUpdating Boolean. Now, in any case, we're only going to have that one transition and it's only going to have that submission.

[2:25] I want to be a little bit more specific here. We're going to create an isUpdating variable and that's going to say, transition.submission.formData. If we do have a submission and it has form data, we can get the "intent." If that "intent" is "update," then we know we're updating. We know that we're creating if that "intent" is "create."

[2:49] Now, we can say, "Creating..."' or "Updating..." based on whether this is a new post and we're creating or updating. Let's save that, come back over here. We'll go back to what we had before without "very" in there. Then, we'll click "Update". It says, "Updating..." Everything works as expected. If we go back to "Create a New Post," then that's going to say, "Create Post."

[3:12] In review, what we did here is we first created a utility for updating the post in our database. Then, we used that utility right here if the params.slug is not "new." Then, we determined whether we have a new post based on whether the loaderData has a post.

[3:27] Then, we came down here. We updated the text based on whether we have a new post or not. We added an isUpdating variable. We also determined our value for this submit button to be "create" or "update." We give it a name called "intent."

[3:42] We were able to use that to determine whether we're in a creating or an updating state by grabbing the transition.submission and getting the formData that was submitted to get the "intent," which will tell us the value of the button that was clicked.