We now have a dusk end-to-end test suite that guarantees that our modal features keep working while we refactor. What I wanna refactor first is the AppServiceProvider. So in this provider we added quite a lot of macros. What I wanna do is move those to a dedicated ModalServiceProvider. I am gonna duplicate this file and call it ModalServiceProvider. Let's change the class name and then in AppServiceProvider, I can remove all.

Let's change the class name and then in AppServiceProvider, I can remove all of this stuff so that we're left with this feet prefetch call that we originally started with. And in ModerProvider, I'm gonna do the opposite. So I'm leaving the macros of course, and I'm removing this call. So we have a profiles file in Bootstrap now. So previously before Laravel 11,

So we have a profiles file in Bootstrap now. So previously before Laravel 11, it was in the app config, but now there's a providers.php and we are just gonna edit, whoops. We're just gonna duplicate this line and edit in here. So we now have ModalServiceProvider. Alright, the next thing I want to do is clean up our layout file. So off layout, because in here again, we have a lot of stuff for our model.

So off layout, because in here again, we have a lot of stuff for our model that's not specifically bound to this layout. In fact, it would be nice if we could reuse all of this logic in different layouts. So what I'm gonna do in resources/js, maybe in components, I'm gonna add a BackendModal component. Let's copy, uh, let's copy most of the stuff in there. So all of this stuff, including the template,

Let's copy, uh, let's copy most of the stuff in there. So all of this stuff, including the template, but not the layout itself, I'm gonna copy in backend model. Let's go close the template tag. I think the only thing we don't need is this showNavigationDropdown. So I'm gonna remove that. We also don't need this title prop. So we can also remove the rev import and the link import. Yeah, that should do.

So we can also remove the rev import and the link import. Yeah, that should do. And then in authenticated layout, instead of rendering this resolved mod component, I'm just gonna render backend model. And then we can do a nice cleanup in here, remove all of this stuff and then remove lots of imports. Let's save it and let's see if everything still works. So again, we can do this manually. Click on the added button.

So again, we can do this manually. Click on the added button. But now that we have a dusk test suite, let's use the test suite php artisan dusk browse, and let's see if everything still works and everything is still green. So let's go back to the editor and see what more we can do. You might remember on the index page we had two buttons. So we have an edit button and an edit in modal button. Here they are. So the edit button is just a regular

So we have an edit button and an edit in modal button. Here they are. So the edit button is just a regular Inertia link component that uses our new backend powered mods. So this is where we navigate to another page and we have a base URL as a backdrop, but before that we had this modal link component and that one actually doesn't work anymore. So we can click on edit that still works, but edit a model. That one is broken. So let's fix that one.

So we can click on edit that still works, but edit a model. That one is broken. So let's fix that one. Let's go to useModal, our helper file. And let's check out the open method. So here we are sending the x-modal-header and in our ModalServiceProvider, we had this macro to check if this header was sent along and we called that macro. Once modal, let's go to our UserController to the added page, to the added method In here.

Once modal, let's go to our UserController to the added page, to the added method In here. And before we had this modal macro, we would just call inertia render. So we need to check in our modal macro in here. We need to check if we requested this space through this modal link component. So we could just use our own helper. So if request wants modal,

So we could just use our own helper. So if request wants modal, so in that case we know this modal was requested with this modal link component. Then we just want to use the inertia render method. So inertia render, and then we just pass along the component and the props. So in that case, it would be the same if we would use render in here. It's now just proxy through this modal macro.

if we would use render in here. It's now just proxy through this modal macro. So we call inertiaModal, which is this macro. We check if we have that header in the request, which indicates if we are using the modalLink component. And then we just render it out like a regular inertia page. Let's see if this works. Let's refresh, hit edit. That still works. Let's hit edit the model. And now this one also works and notice how we didn't change the base URL.

And now this one also works and notice how we didn't change the base URL. So we are still on the users index page to make really sure that everything still works. I'm just gonna run the test suite once more also because I like it so much and everything is still green. So nice refactor. We now have a clean AppServiceProvider, again, fully cleaned up. We have a dedicated ModalServiceProvider where all

again, fully cleaned up. We have a dedicated ModalServiceProvider where all of our modal stuff goes and we've cleaned up our authenticated layout. So now with a single component, this BackendModel component, we can introduce backend powered models in any layout file.