Although we've extracted the model into a separate component and made it more configurable, we're still left with a lot of code on this index page that has just to do with editing a User. So what I wanna do next is do a round of cleanup and see if we can get rid of some code on this index page. First, I'm gonna move the modal component into this components directory because now it's really a generic component. It's not just for editing a User.

because now it's really a generic component. It's not just for editing a User. Next I'm gonna remove this import modal statement and I'll show you why that works. Let's open the feed.php config. And here you can see that I'm using this unplug in few components plug in, and that actually automatically imports any few components from the directories that you specify. So here I've specified the components directory.

from the directories that you specify. So here I've specified the components directory and the layouts directory. So anything within these directories, you don't have to import manually, it just does it for you. Let's go to the browser and hit refresh. See that it still works. Edit. Im modal. Yeah, that's still fine. But I see that we still have this custom title and I want to get rid of that as well.

But I see that we still have this custom title and I want to get rid of that as well. So let's go to the index page, scroll to our model and here's that title template. I'm gonna remove it and I'm also gonna remove this close manually prop. I don't want that it's safe. What I wanna do next is get rid of this modal component from the index page. So let's create a new one.

of this modal component from the index page. So let's create a new one. Let's create EditsModal and let's start with script setup block and the template block. And I'm gonna move the whole modal into that template block. So let's grab it, paste it in here, and let's see what we need from the script setup block in the new components. So probably the form, the closeModal function.

block in the new components. So probably the form, the closeModal function and updateUser function. Gonna grab those, move them into here. And I should not forget to import useForm from the Inertia library. And now let's see what's left over. So we've got this editingUser ref, and our openEditModal function. We don't have this form anymore so we can remove this.

and our open edit modal function. We don't have this form anymore so we can remove this and I think this is fine. So let's import the new component. Import EditModal from edit modal and let's open it on the same place as before. EditModal. What we wanna do next is actually pass that editingUser to that new component. I'm gonna use a prop for that, which is just user and I'm setting it to editingUser.

I'm gonna use a prop for that, which is just user and I'm setting it to editingUser. Then let's add an event, that close event. And when that's fired, we wanna set editingUser back to false. Now let's accept that prop in the editModalForm. Below the import statement, I'm gonna define the props and what we are gonna accept is a user, which is gonna be an object. And while we're at it, let's also define the event.

which is gonna be an object. And while we're at it, let's also define the event. So define emits and it's just a close event. Now we don't have this editingUser state anymore. So when we're closing the model, we just want to emit that event so emit('close') and when we're submitting the form, we are not submitting to editingUser value id but rather to props.user.id. Then lastly, we have this show when the editingUser is not

but rather to props userId. Then lastly, we have this show when the editor user is not false and we want to replace that with just user 'cause that's what our app is called. Also, I'm not so happy with this false thing, I just want to set it to null because now we are accepting an object and not the boolean. So on the index page we set it to false by default, but let's go with null. And then in here in the added model, we're just gonna check

but let's go with null. And then in here in the added model, we're just gonna check for user. So if we have a user, we are gonna show the model. Now let's take a look at our form because our form still has some empty fields and we want to populate it with the actual user that is passed. So we gonna watch for the user prop. We gonna do that with the watcher,

So we gonna watch for the user prop. We gonna do that with the watcher, we gonna watch for the user prop. And when that has changed, we want to populate the form, but only if we actually have a user. So if our user is null, we don't wanna do anything. If we have a user, we gonna set form name to user name and the same for email. Let's hit save to reformat it and then I'm going to import watch from the fuel library.

Let's hit save to reformat it and then I'm going to import watch from the fuel library. Let's go back to the index page and we can remove this use form import. We don't need it anymore here. And let's take a look at this openEditModal function because that's now just setting this editing user F. So let's remove it and let's do it directly into the button. So let's scroll into our table. Where is it here? openEditModal.

So let's scroll into our table. Where is it here? Open edit model. We're just gonna set editingUser to user. And let's hit save. So this is really clean. Now we just have this added modal component with the user prop and the close event. And in our script setup block, we just have this editingUser. Rev, let's go to the browser and see if everything still works.

Rev, let's go to the browser and see if everything still works. Let's open the model check. A validation still works. Yeah, that seems fine. Let's update the User and sure enough, we have our flash message and the User has been updated, so this is really great. Uh, our new way of opening the model works and our index page is really clean. Again. Now the ultimate test would be

and our index page is really clean. Again. Now the ultimate test would be to implement this added model component on another page, but we also have a User profile, which is a bit simple, but you get the id. It also has an edit link that takes us to that dedicated edit route. And we have this edit the modal button that again, is not implemented yet. So let's do that right now.

is not implemented yet. So let's do that right now. Let's see if we can reuse our EditModal component. Let's go into the Editor and I'm going to grab the import statement and this rev and I'm gonna copy it to the Show component, which is the UserProfile. So let's base it right here. Let's move this below the props. Let's import rev from the fuel library from a few.

Let's move this below the props. Let's import rev from the fuel library from a few. And then we need to look for that button. So let's see. Here is a link and here's the button, add a tomoto. And when we click on that button, we want to set editingUser to user. Then below the layout we're gonna use our new EditModal component, EditModal. And as a user prop, we're gonna pass editingUser again. And when the close event is emitted, we want

And as a User prop, we're gonna pass editingUser again. And when the close event is emitted, we want to set editingUser back to null, just like on the index page. So let's hit save. Let's go to the browser and see if this uh works. Let's go to the profile, it's edit a modal. Let's update the User. Let's get rid of this 1, 2, 3 update. And this works, but we are redirected back to the index page and I would rather have been redirected back.

And this works, but we are redirected back to the index page and I would rather have been redirected back to the profile. So let's go back to the editor and see if we can fix that. I'm going to search for the UserController and let's scroll to the update method. Here it is. So first we're validating the incoming data if we're updating the User model. And then we are redirecting to this index route, users.index with our flash message.

And then we are redirecting to this index route, users index with our flash message. And instead of redirecting to this specific page, I'm just going to use the back helper method, which is built into Laravel. And this res us back to the page where we came from. So let's save it and let's see if it works. Let's go to the User profile, edit a model IT update, and yes, now we stay on that User profile page. Let's go to the index page, see if that still works.

and yes, now we stay on that User profile page. Let's go to the index page, see if that still works. Edit I modal it, update. And here as well, we are redirecting back to where we came from. So that's really great.