Okay, let's continue and work on the category filters. So this drop down here, I want to be able to filter by the category. So the way I want it to work is I want it to be an and clause for all the filters. So say, for example, I select considering and then I select category two. I want all the ideas that are in considering status and in category two, and the same for the other filters here when we get to them. So these drop downs already live within the IdeasIndex Livewire component. So we don't have to make a new one. So since we have a new query string variable for categories, I initially went to the IdeasIndex Livewire component, and I also added a query string for the category like this.

So since we have a new query string variable for categories, I initially went to the ideas index Livewire component, and I also added a query string for the category like this. So within here, I just added a new query string. So this quickly broke down because I had two places where I was trying to manage the query string one in here and then one in the status filters. So after that field, I realized you should have one global place where you should manage your query string. So I removed it from here and I just left it wherever it currently was. So in the status filters, and then I added category here and then to communicate between components, you can make use of Livewire events, and that's what we'll do.

So in the status filters, and then I added category here and then to communicate between components, you can make use of Livewire events, and that's what we'll do. And this worked for the most part, but I eventually ran into issues as well. So let me just put this back. So like I said, I was managing it in here, but I realized that the thing we're trying to make dynamic is this query here. So whatever the user selects, this query will change, and then it will rerender whatever the results are in here. So I needed a quick access to those variables within this component. And then I realized the query string should be managed within here.

So I needed a quick access to those variables within this component. And then I realized the query string should be managed within here. So that's what we'll do. So first we'll move the query string logic from the status filters into ideas index. So I'm going to grab this, put it in ideas index up here, and then we can make some variables for the different query strings. So public status for the existing one, and we're going to work on category as well. So let's first fix the status and use events to communicate between these two components. So this one and this one. So that's part of the reason I put this and this within the same component, because it's

So this one and this one. So that's part of the reason I put this and this within the same component, because it's just easier to do the filtering that way. Now if you want, you can separate this into its own component and then have events communicate between these two. But I'm okay with just combining them into one component. There really isn't too much going on with this, it's just fetching the ideas. So yeah, I'm okay with joining it into one component. Okay, so let's make sure the status is still working. So I moved the queryString to this ideas index.

So let's move it here. Okay. So let's put this back. So if you remember a few videos ago, we made it so that when we're on the index page, like we are now, I want this to function like a Livewire component. So there's no full page refresh. But when we're on the show page, then I do want a full page refresh, because I want it to go back to this page. So let's put this back. So we don't need this.

So let's put this back. So we don't need this. Let's put this back. And let's do this. Okay. So now since the query string logic is now in the other component, we need to fire an event and then listen for it on the IdeasIndex Livewire component. So we can do this emit name of the event will be queryStringUpdated. And we are updating the status. And we'll pass through this status.

And we are updating the status. And we'll pass through this status. Okay. So let's go ahead and make a listener on the other component. So let me just grab this. And if you don't know about listeners, you can read about it in the Livewire documentation here. But it should make sense once I do it here, if you haven't done it before. So we're going to fire an event when we change the status. And we want to listen for that event on our ideas index.

So we're going to fire an event when we change the status. And we want to listen for that event on our ideas index. And let's do that underneath here. Let's just say protected $listeners equals. And you can give it a key and a value. So if you do foo bar, it will listen for an event named foo and then call the method bar. But if they're named the same, then you can just provide the key so we can do queryString.updatedStatus. And then we have to make a method with the same name. So let's grab this.

And then we have to make a method with the same name. So let's grab this. Let's make a new method here. So it would be let's put it here. And have this name, we are taking in a new status. And we're just updating the variable here. So this status equals new status. Okay. So let's see if this works now. So back here, back here.

So let's see if this works now. So back here, back here. Okay, it looks like we lost the selected up here. But let's see if this still works. Okay, so it looks like it does. So it doesn't update. But when we refresh, it does work. Okay. So it's not updating because down here, when we're doing the when clause, we are looking at the query string.

So it's not updating because down here, when we're doing the when clause, we are looking at the query string. And now since we have a property on the Livewire component here called status, we can just use that instead. So let's grab all of these request statuses and just change it to this->status. So just these three over here, this->status, see if that updates now. Okay. All Ideas, considering, and it looks like it does cool. Okay. And why is not showing the initial status here?

Okay. And why is not showing the initial status here? Okay, so I think it's not showing it because we removed the default status used to be all here. So let's put that back. So I'm gonna put it in the mount method instead. So say $status. And let's do something like this. So let's grab it from the query string if it exists. And if it doesn't, we'll default it to all using the ?? operator.

So let's grab it from the query string if it exists. And if it doesn't, we'll default it to all using the null coalesce operator. Okay. So does that bring it back on the index page? And it does. And it works the Livewire way. So I'm scrolling down a bit and you'll see that it does not do a full page refresh. But it's just refreshing the component here. Okay. Let's see if the redirect still happens on the show page here.

Okay. Let's see if the redirect still happens on the show page here. And it does. Cool. And I think I'm also going to put pagination back to the Livewire way. Still works. But I know that later on, I encountered some issues. So let's just put that back. So that would be in the ideas index as well. So let's just put this back.

So that would be in the ideas index as well. So let's just put this back. And pagination should now be using Livewire. Okay. So let's make sure to also reset the pagination after we change the filter. So right now we're on page two of considering. If I go to all ideas, it's still on page two, which I don't want to happen. So there's actually a section on the docs here, resetting pagination after filtering data. And all we have to do is call the resetPage whenever that field is updated.

So first I want the actual categories to go in here. So let's do that first. So I want to pass in something else here called categories. So that would be after this. And that would just be the categories in our database. categories is categoryAll, okay. And let's make sure to import that. Let's go to our ideas index. And we still want one hard coded, which will be for all categories. So let's keep this one here.

And we still want one hard coded, which will be for all categories. So let's keep this one here. So this is essentially no filter and just show all the categories. But for these ones, we want to loop over them. So let's do that. So say foreach, we have categories as category, and then we have a name. So we can just move this. Okay. And this will be category name. So let's just grab this and say category name.

And this will be category name. So let's just grab this and say categoryName. Okay. So does that work? All categories as our first one and the four from our database. Okay. And I believe they should automatically be synchronized with the queryString. So three and doesn't work. Did I add that to the ideas index queryString? So I did not.

Did I add that to the ideas index query string? So I did not. Okay. It's not working. So let's do category. We have a variable for it already. Okay. Let's try that again. So category still doesn't seem to work. Oh, yeah, that's right.

So category one still doesn't seem to work. Oh, yeah, that's right. I forgot to add the wire:model. So let's add that. So for our select, we can do wire:model equals category. And that should do it, hopefully. So we select category three, and it does update the query string here. And if I just visit it directly. So let's open up incognito here, and it is synchronized. Cool.

So let's open up incognito here, and it is synchronized. Cool. Okay. So let's make sure it preserves it. If we switch statuses as well, and it looks like it does school. Okay. So now we just have to do something similar to what we did for the statuses. So here in our query here, we have this when clause to check if the status is not all. And if that's the case, then we want to add this where clause on our entire query. So let's do something similar for category.

And if that's the case, then we want to add this where clause on our entire query. So let's do something similar for category. So I'm just going to duplicate this, and let's change this to category. Okay. And this will be all categories, because that's what I named it. And we need the categories in here. And I have it down here, but I have it in line. So I'm just going to make a variable for this as well called categories. Or you can inline it, but I'll just use it here. Okay.

Or you can inline it, but I'll just use it here. Okay. Actually, I could inline this one because I'm only using it once. But for categories, I'm using it twice. So once here, categories, and then once down here. Okay. So this one's going to be categoryId instead of statusId, because we have the same relationship. So if you take a look at the ideas table here, you can see this categoryId, which is what we're filtering by. So I'm not plucking it here.

we're filtering by. So I'm not plucking it here. So we have to pluck it over here. So if you don't remember, this is what we did for the statuses to map the name in the query string. So we have this friendly name here, categoryFour, in this case, to the actual ID of that category. So we have to pluck it here. So pluck the ID and the name. Okay.

So pluck the id and the name. Okay. And I guess we can move this up a line. And hopefully I did everything correctly. Let's see if it filters. So let's just start from nothing. Okay. So it's still showing all categories by default. But if I change it, categoryOne, it looks like it works. So all of these are just categoryOne.

So considering category four, considering category three, and so on and so forth. And let's make sure it resets the page. Actually I don't think I can because I don't have enough ideas here. But that should work like it did for the statuses here. And one last change here. You don't have to do this, but I just want to stay consistent with what I did in status filters where I'm setting the status like this. So I'm going to grab this and I'll do the same up here. Let me remove this as well. And there is no mount method here.

Let me remove this as well. And there is no mount method here. So let's add it. Let's remove this. And let's add a mount method. mount. Let's paste that in. And this should still work. Refresh. Change the category.

Refresh. Change the category. And everything's still working. Let's make sure it defaults to all when there is no query string. And it does. Cool. And if you want, you can also have a default variable for the category, but I'm okay with just this one. So if you do something like this, so instead of status, it'll be category and all categories. And that should be the default when you don't add anything.

So if you do something like this, so instead of status, it'll be category and all categories. And that should be the default when you don't add anything. There we go. But like I said, I'm okay with just the status for the default. Okay. Let's put that back. And yeah, I think this is a good place to break. We'll test it in the next video. And I also want to make a few changes to our status test or status filter test. So what is this?

And I also want to make a few changes to our statusTest or statusFilterTest. So what is this? Episode 27. git add. git commit. Episode 27. Say categoryFilters. And that should be good.