Okay, the next feature I want to work on are filters. So we have the status filters on the top, a category dropdown here, one for other filters, and a search box. So before we work on that, we're gonna have to make some changes to how we fetch data. So for all of these ideas here, we are doing it the traditional way from a controller, and then outputting it to a Blade view. So if you go into our code, you'll see we have this IdeaController. And this is a query that grabs all of those ideas, and then we just output it in this idea.blade.php view. Now that's fine.

idea Blade view. Now that's fine. But if we want to make these filters work the Livewire way, this query has to be dynamic. And that's going to change based on whatever the user selects for a filter. So for example, for a status, for example, if we select considering, then we're going to have an extra where clause here that says where status_id equals whatever ID considering is. So we're gonna have to move this logic that grabs the ideas into a Livewire component. So let's do that. And I'm also going to include this as well.

So let's do that. And I'm also going to include this as well. And then we'll have a separate component for the status filters up here. So let's do that. Let's make a new one called or a new Livewire component. Let's call it IdeasIndex. And we already have one for a singular IdeaIndex. So that makes sense to me. Okay. So let's grab all the markup from our index.blade.php.

Okay. So let's grab all the markup from our index.blade.php. So it's basically all of this. And then we'll just make use of ideas.index here. So Livewire ideas.index, okay. And then from within there, we'll grab the data from the database. So we'll move what's in the controller into this Livewire component. So let's grab that or let's go into that. I mean, ideas.index, and it's pasted that in. Actually, it should have a root div.

I mean, ideas index, and it's pasted that in. Actually, it should have a root div. And right now I think it doesn't, does it? This one ends here. So it doesn't, but we can just wrap everything in a root div. So let's do that. Let me just reinvent this first. And now we can wrap everything in a root div. Okay. So let's save that.

Okay. So let's save that. And like I said, I want to grab the query from our controller and move it into the Livewire component. So let's grab this. So let's just grab the array here, and let's remove this. And it's going to our ideas index. And we can pass it in here. So let's go ahead and paste that in. Okay.

So let's go ahead and paste that in. Okay. And it's import Idea here and Vote as well. And let's see if I missed anything. Let's go ahead and refresh. Okay. So it still renders, but now we are making use of Livewire. Okay. Let's check if the pagination still works. And it does.

Let's check if the pagination still works. And it does. So let's change the pagination to make use of Livewire's pagination. And that's because there's some issues when you're trying to make it work with the filters here. So let's go ahead and do that. So ideasIndex, actually, it's the same thing here. I think all we have to do is go here and make use of a trait. I believe it's called WithPagination, I think. So import that.

I believe it's called with pagination, I think. So import that. Okay. Or sorry, use withPagination. And let's see if it's using Livewire now. So there shouldn't be a full page refresh. So let's go back to the main page, refresh. And now, yeah, it's making use of Livewire now. Okay. So I'm getting this error in the console when I'm trying to switch to other pages.

Okay. So I'm getting this error in the console when I'm trying to switch to other pages. So I believe this has to do with not using a key. So if you go to ideas.index, the view, we have a child component here. And usually when you're looping over a component, you want to make use of a key. So similar to how Vue enforces a key, when you're using v-for, we want to do the same thing for Livewire components, or there can be some unexpected results. So let's give it a key. And let's say the id is the key. Okay.

This one might have some failing tests. Okay, that one's fine, actually. But this one for sure will have some failing tests. Okay, so there's only two. So let's go ahead and fix that. Actually, there's three, sorry. So the first test to fix is this one. It says index page correctly receives votes count. But now it doesn't, because that logic is moved to the Livewire component. So let's change the name.

But now it doesn't, because that logic is moved to the Livewire component. So let's change the name. Instead of index page, let's say IdeasIndex Livewire component correctly receives vote count. Okay. So the setup is going to be the same. But now we're going to test the Livewire component instead. So let me just comment this out for now. And then let's go ahead and do Livewire test that new IdeasIndex component class. Let's make sure to import this.

And then let's go ahead and do Livewire test that new IdeasIndex component class. Let's make sure to import this. And before we were making use of this assertViewHas method, which checks if the rendered view has a key of ideas with this value. And in this case, it's a closure. And Livewire actually has the same assertion. So we can just grab this and paste it in here. So let's uncomment this. So again, it's checking if this new Livewire component that we just made. So IdeasIndex has this ideas key, which it does, because we're passing it in here.

So again, it's checking if this new Livewire component that we just made. So ideas index has this ideas key, which it does, because we're passing it in here. And we're checking if the first idea has a voteCount of two. And it does, because we created two votes here. So let's make sure Livewire is imported. It is. Let's go ahead and run this test. Okay, so it's passing now. So we can go ahead and remove this. So the next test that's failing is this one here.

So we can go ahead and remove this. So the next test that's failing is this one here. And that's because we were doing this thing where we had to go to the index page to add extra fields on the Idea. If you remember on the controller, we used to have this, which added extra fields on the Idea. And then we inspected that. But now it's on the component. So that doesn't work anymore. So go back to our test.

So that doesn't work anymore. So go back to our test. And instead of doing this, so these two lines are where it fails, because we're no longer grabbing it from the controller. So what is this test anyways? It's saying User who's logged in shows voted if the Idea is already voted for. Okay, so we can get rid of this. And we can just add those two fields manually that we need. So we can do ideaVotesCount and set it to 1, because there's only 1 vote here. And ideaVotedByUser, we can set that to 1 as well.

So we can do Idea votes count and set it to one, because there's only one vote here. And Idea voted by User, we can set that to one as well. And we can just pass in the idea here. And this should still work. Okay, let's run this test. And now it's passing. And the last test that's failing is this one here. So removing a vote. So same thing here, we can remove this and just replace it with the fields that we need on the idea.

So same thing here, we can remove this and just replace it with the fields that we need on the Idea. And everything else should be the same, except we're passing in the idea here. And let's see if this passes. So we're passing in five, they call vote, and there should be four after that. Okay, so that's passing now. This one shouldn't be affected, I believe. Let's try this. Okay, try everything. And we are at green.

Okay, try everything. And we are at green. So let's go ahead and make a commit here. Believe this is episode 23. Okay. Let's say, use Livewire component to fetch ideas.