Now, we're about to create a Livewire component, but before we do, why don't we wrap some of this container into the master or the layout file. So let's open this up, and yeah, we're gonna spit all of this out here, reformat, I'm gonna grab the slot, and that's gonna go where the main section, so all of this would be part of the welcome page, like that. Alright, so if I come on back and give it a refresh, yeah, now we see the same thing, but the header and all of that is part of the layout file, which makes more sense. So we're now gonna change things up and wrap this in a Livewire component. We'll call this makeLivewireDeleteUser. Alright, so if we scroll on up, it created your delete user component, as well as the

We'll call this makeLivewireDeleteUser. Alright, so if we scroll on up, it created your deleteUser component, as well as the associated file. Okay, so this would then allow us to do this. We could write it like this, LivewireDeleteUser, or you could call it again as a directive. Now if we come back, we're not gonna see anything, because if I open this in a split view, this is blank. Hello world, and now we do see it. Okay, so why don't we fill that with the form that we had earlier, and that'll bring it back.

Okay, so why don't we fill that with the form that we had earlier, and that'll bring it back. But now, we could use, let's clean that up, we could use the Livewire component to control and determine whether or not the modal should display. For example, let's go to the component itself, and real quick, a quick recap, anything I set as a public property is then available to the component as a variable, so myName. And if I were to switch back, spit out the name here, we're gonna see JeffreyWay. So it's really easy to work with. Anyways, come on back. Why don't we have a property here called showModal, and we're gonna set that to false.

Anyways, come on back. Why don't we have a property here called showModal, and we're gonna set that to false. Next, if we come on back, I'm gonna take our confirmation modal here and throw it into the Livewire component. So that can go here at the bottom. And this is what we have. Okay, let's clean this up now. Because we're using Livewire here, it's not a traditional form submission, so I can get rid of all of that. And now, we're no longer gonna use the URL approach.

And then if we switch over here, let's just toggle that for now. All right, does that make sense? So we have a showModal property set on the Livewire component. It's false by default. But if it changes to true for any reason, we immediately show a modal. Okay, so now think about it. What if this button, when you click on it, and I can use wire:click for that, what if we just set showModal equal to true? So set is kind of a magic variable that Livewire provides that allows you to, as you'd expect, set the value for a property.

So set is kind of a magic variable that Livewire provides that allows you to, as you'd expect, set the value for a property. So the alternative would be showModal, and this would say showModal equals true, right? And then you could say, when you click on it, showModal. Alternatively, if it's just a setter, you can use this. So let's come on back, get rid of that, and it's an option. Okay, so let's think about what happens. We now have a form, we have a button. When you click on the button, we want it to update showModal to true.

We now have a form, we have a button. When you click on the button, we want it to update showModal to true. That will then return the updated view. That's how Livewire works. It gets inserted into the DOM. Where this then evaluates, it now returns true, so we display the confirmation modal. But you know what? I think I just realized something. Let's have a look. Let's run it.

So what I'm going to do is move that into the button component itself. So we could say right here, actually, why don't we make it a default? type isButton. There we go. So now I can keep it nice and simple like this, and if I click on it, at least it's not going to submit the form. But also, it doesn't seem to be doing what I want it to. So let's have a look. I'm going to open up the Network tab, give it a run. I will click on this, and I think we should see a network request.

I'm going to open up the Network tab, give it a run. I will click on this, and I think we should see a network request. And we do. So let's have a look here and see what Livewire is doing. It is making a POST request here to Livewire Message. This is the component name. As part of the request, it is sending through an update, where it calls the method set, and it wants to set showModal to true. Now as part of the response, here is the payload that gets returned. And now if we scroll down, yeah, here is the response.

Now as part of the response, here is the payload that gets returned. And now if we scroll down, yeah, here is the response. It has been updated. But we're still not seeing the modal. So let's have a look. We come on back. Oh yeah, we still have it set to display of none. Okay, one more time. We run it, and there you go. So if you think about it, there's a lot going on here, but it's actually pretty amazing.

We run it, and there you go. So if you think about it, there's a lot going on here, but it's actually pretty amazing. We clicked on this button. Using Livewire, it submits a network request. The network request is updating a PHP class you have here, just a standard property. Using that change, it then re-renders the view and returns it as part of the response, where we now get to see the modal. So now think about it. Right down here, when we're ready to continue, we could just say wire.click.continue or whatever needs to happen there.

Right down here, when we're ready to continue, we could just say wire.click.continue or whatever needs to happen there. Why don't we call it handle. All right, delete User. Here's our method handle, and I'm just going to dd delete the User. Okay, let's give it a shot. Refresh the page. Submit the button. We see the modal. If I click continue, there we go.

We see the modal. If I click continue, there we go. We called the Livewire method, where this would then officially delete the User. Let's now make sure that the modal can cancel. I run it. It's not working anymore, because we're no longer using that location hash approach. Okay, how would we deal with that? First, I can switch back to a traditional button, and we'll say cancel, and then swap this out with gray. Okay, so in this case, if you want to cancel when you click on it, why don't we set show

Are you sure? Continue. And now we do delete the User. Now we're getting somewhere. I still think we can do a bit more here. So a couple things. First, we're not doing Alpine at the moment. I think we'll bring it back, though. We now have a Livewire component that uses a Blade component. And for now, we're just going to get rid of that to keep this nice and simple.

We now have a Livewire component that uses a Blade component. And for now, we're just going to get rid of that to keep this nice and simple. There you go. So your confirmation modal is laughably basic, and we'll add some transitions later to make it nice and pretty. But that's very simple, which I like. Switch back. The Livewire component is also very simple. You have your form for whatever action that needs to take place. We can even remove the ID.

You have your form for whatever action that needs to take place. We can even remove the ID. And now we can show the modal very easily using WireClick. So it is true, at this point, when we call WireClick, a network request is taking place. And that might feel weird. Like, are you kidding me? I want to show a modal, and you're making me submit a full HTTP request? And I think that's fair. In the grand scheme of things, I don't think it matters nearly as much as you might think. You're not Facebook or Twitter.