Okay, let's refactor some of our code for our models. So for DeleteIdea, MarkAsSpam and MarkAsNotSpam, if you look at the code for them, which you can see here, you'll see that a lot of the code is the same and duplicated. So let's see how we can clean this up. So first thing I'm going to do is just make use of a Blade component, and we'll call that ModelConfirm. So let's make a new component here in the Components folder. And all of these components came with Laravel Breeze. But let's make a new one called ModelConfirm.blade.php. And for now, let's start with DeleteIdea.

But let's make a new one called ModelConfirm.blade.php. And for now, let's start with DeleteIdea. And let's just put everything in there for now. And we'll use it here. So XModelConfirm, okay. And let's just paste everything in here. So this should still work. All we've done is move it to a Blade component. Okay. So back to our code.

Okay. So back to our code. So let's extract everything that's dynamic and make use of props. And then from the component that's calling it, we'll pass in the props here. So if you have an anonymous component like we do here, you can accept props like this. Say AddProps, and we'll give it an array of props. So like I said, let's extract everything that's dynamic. So the first thing is this event. So we want this right here to be one prop. And let's name that prop, let's name it EventToOpenModel.

So we want this right here to be one prop. And let's name that prop, let's name it EventToOpenModel. And if you want a default value, you can give it a value here for the array. But in this case, I want it to be required. So I'm not going to give it a default value. So now this value, CustomShowDeleteModel, will be passed in from the parent component. And we can do something like this. So just accept it here and say EventToOpenModel. And Laravel takes care of changing the case from kebab case to camel case here. Now we can't make use of the at sign because that's reserved in Blade.

And Laravel takes care of changing the case from kebab case to camel case here. Now we can't make use of the @ sign because that's reserved in Blade. So let's just put it within the curly braces here. We'll say @ and then we'll append it like that. Okay. And now from the parent component, so DeleteIdea, we can accept the prop like this. So I named it eventToOpenModel. And I think it's in my clipboard. And let's just paste it in. Okay.

And let's just paste it in. Okay. So if I save that, this looks good. Let's see if the model still opens. So I'm going to hard refresh. And it does still open. Okay, let's continue here. So the next piece of dynamic data is this event here. So in this case, this Idea was deleted. So let's go ahead and accept that.

So in this case, this Idea was deleted. So let's go ahead and accept that. So Idea, sorry, we're going to name it EventToCloseModel. Okay. And we can accept it up here as well. So EventToCloseModel. And let's go ahead and accept that prop in the component here. So EventToCloseModel is going to be Idea was deleted. So let's continue here and take a look at the next piece of dynamic data. So that would be the title here.

So let's continue here and take a look at the next piece of dynamic data. So that would be the title here. So let's say ModelTitle. And let's accept that. It's named ModelTitle. And again, let's add that here. That's ModelTitle. And it was deleteIdea. Okay. Next is the description.

Okay. Next is the description. So let's accept that. And let's change this description. Actually, let me cut it. And we'll say ModelDescription. Let's pass that in. ModelDescription is that. Okay. What's next?

Okay. What's next? Next is, I think it's the text for confirming. So in this case, it's delete. So let's name it ModelConfirmButtonText. Let's accept that. Model. Okay. And let's accept that in the parent. ModelConfirmButtonTest.

And let's accept that in the parent. ModelConfirmButtonTest. It's just delete in this case. And the last thing is the action we want to take using Livewire. So in this case, I named it, let's see, wire:click, I believe. And we can accept that here. In this case, it's deleteIdea. So let's say wire:click. Okay. And let's add that here.

Okay. And let's add that here. Let's name to WireClick. And the method we're calling on the Livewire component is deleteIdea. Okay. So let's see if this model still works. And it looks like we have an error here. Undefined variable. Sorry, not test, text. Try that again.

Cool. So now let's do the same for the other two models here. So one for markAsSpam and one for notSpam. Actually, let me go to an Idea with all of those models. So my ideas. And it's markItAsSpam. Okay. So I'm just going to paste it in for markAsSpam. So it's this one here. We can just get rid of all of this since we now extracted it to the Blade.

So it's this one here. We can just get rid of all of this since we now extracted it to the Blade component, and I'm just going to paste in the dynamic data here. Okay. And let's do the same for markIdeaAsNotSpam. Okay. Get rid of this and paste in the dynamic data. So let's go ahead and try this out for markAsSpam. Let's go ahead and markItAsSpam. The counter does go up, so it does work.

Let's go ahead and mark it as spam. The counter does go up, so it does work. Let's reset the counter for not spam. And it does work. Cool. Let's go ahead and run our tests here to make sure everything is still passing, and it is cool. So another refactor we could do is if we go into our show blade here, you'll see that we're rendering these models in the middle of the show blade, which is fine.

you'll see that we're rendering these models in the middle of the show Blade, which is fine. But a good rule of thumb is to render your models at the end of the document. So this will avoid any rendering issues or any Z index issues. So in this case, I don't see any issues with rendering. So I'm just going to leave it here. But if you did have issues with rendering, you can do something like this. So for each one of these models, we could push it to a section called, say, models and push. And then we can go to our main layout.

say, models and push. And then we can go to our main layout. So app.blade.php, and we can have a section down here. So say right here, and it would get rendered in this section here. So we can say @stack('models'), and that would work. I believe that's the syntax for stacks. Yes, it is. So you can see the documentation here, and you can push whatever you want onto this stack, and it will render here instead of where we had it here. But like I said, in our case, it renders fine, so I'm not going to do that.

onto this stack, and it will render here instead of where we had it here. But like I said, in our case, it renders fine, so I'm not going to do that. So let me just undo this, and let me undo this. But I am going to extract these models into a container. So let's grab all of this, including the editing Idea. So let me just cut this, and let's just make a new Blade component here called x-models-container. Or maybe we can name it ideas-model-container, because we might have one for comments later on. But for now, I'm OK with this name.

because we might have one for comments later on. But for now, I'm OK with this name. And let's pass in the idea here, and then we can make a new component named models-container. So let's go ahead and do that right here. models-container.blade.php, and we can paste that in. Actually, I'm not sure if we need a root div here. Let's just see if it works without a root div. And it looks like it still works fine. OK, so we'll just leave it.

And it looks like it still works fine. OK, so we'll just leave it. So let's edit. Editing still works fine. Say change. Yeah, so it looks like it still works. Mark as spam, not spam. So yeah, everything is working. So like I said, we might have the same functionality, edit, delete, mark as spam, mark as not spam for Comments whenever we get to that.

So like I said, we might have the same functionality, edit, delete, mark as spam, mark as not spam for comments whenever we get to that. So I might change the name later. But for now, this is a successful refactor. Again, let's run our tests. And everything is still passing. So as always, let's make a commit here. Episode 45, git add, git commit, episode 45, refactor, models-to-blade-component. OK, so I noticed a typo here when I was editing.

models-to-blade-component. OK, so I noticed a typo here when I was editing. Should be text. But to my surprise, it actually worked with that typo. So if you take a look at the confirm button text, it is correct. So delete, mark as spam, and reset spam counter. So let's fix that typo. But if you don't have default values, you actually don't have to specify this props here. So if I delete this, save it, this should still work.

don't have to specify this props here. So if I delete this, save it, this should still work. And it does. So it's up to you if you want to add that props array. I kind of like it. Kind of forces you to be explicit. And when you're reading this component, you know that it expects these props. So I'm just going to leave it in there with the correct typo that I fixed here.

So I'm just going to leave it in there with the correct typo that I fixed here. So let me undo that commit. Let's go ahead and git add. And let's use the same commit message.