Allow Admins to Edit Existing Posts on Remix Applications
We can create a new post but we can't edit existing posts. To start we want the admin to click on a post and have it fill out the new form so that we can edit it.
We will do this by listening for the slug. If it is new, then give us an empty form. If the slug is from one of our posts, then fill in the data of the post.
In the next lesson, we will take that data and fill out our form with it.
Kent C. Dodds: [0:00] We can create a new post, but we can't edit existing posts. What we actually want is when we click on one of these, we just want that content put in here. We want the URL to match this. The URL is correct when we click on one of these. We just need to have the component be rendered right here.
[0:17] There are a couple of ways that we could share that component, as well as the backend logic, just using regular JavaScript sharing of functionality, but I actually want to do things this way. We're going to change new to slug.
[0:30] Then, in here, we'll accept our params. If params.slug is new, then we're going to just return the JSON. Otherwise, we'll return JSON with a post. I'll just set that to null, but we can load that post based on the params.
[0:48] Let's just get everything working as it was before first and then we can start adding loading of the posts next. Now, we're going to come to our Action, and we're going to want to accept the params here as well.
[1:00] Down here, we'll say, if the params.slug is "new" and if that's the case, then we'll create the post, otherwise, TODO: update post. We'll have to write that a little bit later. With that, we should have the same functionality that we had before.
[1:17] If we go to posts/admin/new, we can make a new blog post like "Onewheel Riding in the snow," I don't recommend it, and "Don't do it!" Then, we'll come down here. Hit "Create Post." We're "Creating..." There, we've got "Onewheel Riding in the snow." We can make sure that this actually does show up, "Don't do it!"
[1:41] In review, now, our "Create Post" works exactly as it did before. All of these other posts will load that same route because it literally is the same route. It's now dynamic and it will accept any of these. Our job in the future will be to just load the rest of the posts in here and update the post rather than create a new post with that slug.
[2:00] The way that works is we renamed the new.tsx to $slug.tsx so that we can access the params.slug in our LoaderFunction, as well as in our Action, for determining whether we should create or update the post.