Okay, let's continue and make this Comment actually work with this setStatus dialog. So let's open up that component, it's called setStatus, I believe. And we can just add the logic for adding a Comment in here. So let's go to our addComment. And we can just take this and make use of it here. Okay, let's import Comment. And $userId is the logged in user. $ideaId is this ideaId. And the $statusId is this status. So this is what the user selects.

And the status ID is this status. So this is what the User selects. Okay, so the body is whatever the User types in here. So we have to add a new wire:model for that. So let's call it comment. And let's add it here. public $comment. Okay, let's go to setStatus. Let's add a wire:model on that. So where's my wire:model here?

Let's add a wire:model on that. So where's my wire:model here? So we have one for status. And let's add one for the textarea. So textarea, okay. And let's say wire:model comment, okay. And now let's go back here, down here. So the body is going to be the comment. But if there's no comment, so let me just add this comment here. But if there's no comment, let's add a default one here.

But if there's no comment, so let me just add this comment here. But if there's no comment, let's add a default one here. So let's just say no comment was added. You can leave a blank too, but it looks kind of weird without any content here. So if we take a look at how that looks. If I were to just delete this body of text here, you'll see that it looks pretty weird without one. So we'll just add a default one here. And the last thing here is that new field we added on the comment. So is status update.

And the last thing here is that new field we added on the Comment. So is status update. And that should be true, okay. So let's see if this works. It might not update the page yet, but let's just see if it does add it as a comment. So I'm going to change this to in progress. This is a status update comment. And let's go ahead and update, okay. So that changed. Let's see if I added one down here when I refresh.

So that changed. Let's see if I added one down here when I refresh. And it looks like it does, cool. So it looks like the line is back. And we'll fix that in a second. Let's just make it appear here automatically. So we just have to go to our IdeaComment and listen for this event. So status was updated. So we should already have one here for these two. So we're listening for when a comment was added or deleted.

So we should already have one here for these two. So we're listening for when a Comment was added or deleted. And now for that new one or status was updated. Status was updated, okay. And we can pretty much just copy what we have in here or duplicate it, but change the name. So status was updated. Okay. Does this work? Let's change it from inProgress to implemented. Actually, let's test it without any Comment update status was updated.

Let's see if it goes away if I just mess with these values. Okay. So it looks like it does when it's only on -37. So yeah, that's pretty brittle, but I'm going to stick with this solution for now. So -37 for the CSS should be up here. Comments container before -37 pixels. Okay. NPM run dev. Okay. And let's see if it fixes it.

Okay. And let's see if it fixes it. And it doesn't. Sorry, wrong one. It's not this. It's this one up here. Negative 37. The comments container. Okay. Let's try that again.

Okay. Let's try that again. npm run dev. Should be done. Okay. Try again. And it's gone. Cool. Okay. Next, I have my debug bar open here again, and I believe we do have an N plus one issue.

Okay. Next, I have my debug bar open here again, and I believe we do have an N+1 issue here. So if we go to our Idea Comment, we are grabbing the status off of the Comment here. So comment status here and everywhere else. Okay. So if you take a look at the number of queries, we have 16. So I think if we go to ideaComments and eager load the status along with the user, so we can just do this user and the status. I believe it works without an array as well, but we'll stick to array syntax.

So let's see if you can do the same thing here. And it looks like we do have that issue again. I will fix that later. So the code for scrolling down to the Comment is in. Where is it? I believe it's an addComment. Yeah. So here it is. So this is for pagination, but this one is for checking the event here. So we're listening for the commentWasAdded Livewire event.

So this is for pagination, but this one is for checking the event here. So we're listening for the commentWasAdded Livewire event. So now we have to listen for that new event. So in this case, it's what is it? setStatus, right? Status was updated. Okay. So this is getting quite long, but let's just see if it works. So let's add an or on this first condition or this, and it should be this condition or this event.

Let's change it. Oops. 37. npm run dev. Let's make sure that's done. Okay. And hopefully it works. Looks like it does. One more time to make sure it doesn't happen for the status update as well. Let's add another one back to implemented and let's update.

It can just make use of Tailwind utilities. But this is the way I have it. So I just kept it this way. And it does work. Okay. Let's go ahead and write a test for this case. So it's for setting a status, but we're also setting a comment. So we do have a class for that. AdminSetStatusTest. Okay.

Admin set status test. Okay. And we can just make use of one of these. Let's grab this one here. Can setStatus correctly. Let's say noComment. Okay. And what are we asserting here? We are asserting that this Idea changed status, but let's also assert that there's a comment now.

We are asserting that this Idea changed status, but let's also assert that there's a Comment now. Even though we didn't add one, there is a default Comment that gets added. So let's just say the body of the Comment is the default message. So no Comment was added. And let's also check the isStatusUpdate field, and that should be true or 1. Okay. Not sure if true will work here. Let's try this pass. It does not.

Okay. So it does pass. Now we can grab this and do pretty much the same thing, but add a comment. Can set status correctly with comment down here when we're setting the status. Let's also set the comment. Say this is a comment when setting a status. Okay. So let's grab this and we can do the same thing here. Let's update this comment, space that in and let's see if this works. Okay.

Let's update this Comment, space that in and let's see if this works. Okay. And it does. Oh yeah. I forgot to change the or here so we can clean this up a bit. So let's grab this and we'll make use of includes like we did above. So we'll grab this. Let's get rid of this. Actually, I should have just commented it out, but we'll do it again. Comment was added and also status was updated are the events we're listening for.

Actually, I should have just commented it out, but we'll do it again. Comment was added and also status was updated are the events we're listening for. And we can use the includes method on the array includes this. Okay. Then this should still work, hopefully. So let's try that again for both cases. So regular comment, hopefully it still scrolls and it does. And let's try for status comment, change the status, that is comment. Did that work? Did it look like it worked?

It seems to work now after hard refreshing a few times. So let's try one more time. Regular comment. Okay. Scrolls. Let's try setting a comment in here. Set a comment. Okay. So it does work. I don't know what happened the first time.

So it does work. I don't know what happened the first time. Okay. So it looks like there's an issue here as well. The menu does show, but it's showing in white for some reason. So let's just force it to a gray color. So that should be an IdeaComment. So where's this menu here? x-data. So, yeah, let's just force this to text-gray-900.

If you keep an eye on the comments count here, if I vote for it, you'll see that it disappears. So what's going on here? If you go to ideas index, you'll see that we're grabbing the votes count from here, but after we vote for it, the Idea gets refreshed and this field that this adds is no longer there. So the easiest fix, which I will do here is just to ignore that. So let's go to idea index. Let's look for the comments count. And let's just say wire:ignore here. wire:ignore.

Okay. So that works. Awesome. So now our Comment works here and we have a nice history of all the statuses that change on this Idea. So for this particular Idea, it's in progress, we change it to implemented. This is the new feature you requested. Enjoy. Update and it does update and scroll to it here and it adds a Comment. Awesome.

Let me just grab this. Episode 58. git add. git commit. 58. Part 2.