All right, welcome back. Let's take it another step further. So now we have our search working next. In the sidebar, I'd like to have a list of filters. So in this case, I'd like to see all matching authors who are represented as part of these search results. So we've learned a little bit about facets. Now let's put it into practice. So let's start once again in our routes file. And like we did before, we're gonna return the results.

So let's start once again in our routes file. And like we did before, we're gonna return the results object from typeSense so we can see what we're working with. Alright, so once again, well, how do we, how do we grab the facets? How do we find the matching authors? Well, by default it's not included. We have to explicitly request faceting. So if I come back, I can say facetBy.

We have to explicitly request faceting. So if I come back, I can say facet by. And now we provide any fields that we have interest in, but also any fields that are designated as facets. So remember you designate that when you create the schema. And if you forgot how to do that, go back to the episode where we create our first schema. So yeah, in this case we're gonna facet by authors. Now, if I come back and give it a refresh, we're gonna get something a little different.

Now, if I come back and give it a refresh, we're gonna get something a little different. Now we're gonna have this facetCounts key. So you'll see it's an array and we have an object here that has counts. And yeah, just take a look at all of this. So here is the facetFieldName. So you can imagine looping over all of your facetCounts and saying for each one we have, 'cause we might facet by authors, we might facet

and saying for each one we have, 'cause we might facet by authors, we might facet by the decade that the book was released. Uh, it could be a number of things. The length, maybe if you wanna narrow it down to short, medium, long reads, uh, you can really filter however you want, uh, however would make sense. And then we have, um, the total values for this particular facet. Okay? So then finally, within accounts object, we have

for this particular facet. Okay? So then finally, within accounts object, we have all of the items, in this case, all of the authors who are represented or included as part of the search results. Alright, so, um, yeah, why don't we, why don't we just pluck what we need and then send it to the view. Alright, so let's do this. We'll say results = facetCounts. And once again, I'm gonna collect these so that I can easily map over them in an object oriented way.

And once again, I'm gonna collect these so that I can easily map over them in an object oriented way. Of course, you can use a rateMap if you prefer. So let's map over them. And for each facet, you know, once again, if I just die and dump immediately so that we're on the same page. Now we're gonna have an array. We have the fieldName, and then we have all of the matching, um, authors in this case. So I care about the fieldName.

authors in this case. So I care about the field name. So let's return an array and we'll have the name, we'll be facetFieldName. Alright, what else do we want? I would like all of the results here. So each one contains the count, the highlight, the value. We can keep that we'll say, uh, filters. Yeah, because if you think about it, each of those authors is kind of a, a filter.

Yeah, because if you think about it, each of those authors is kind of a, a filter. You select the author and then it should further filter the search results down to those that match the query. But also were written by, uh, the selected author. So we'll say filters equals, and yeah, if we wanted to grab that, but you know what? I think it's fine. We're just gonna do something like this. Okay, so this is our facets,

I think it's fine. We're just gonna do something like this. Okay, so this is our facets, and once again, if we do a sanity check to see what we got. Now we have an array, uh, of objects, and each object contains the facet name as well as the list of filters. And I think this looks pretty good. So now I'm gonna pass this to our view like this. Okay, now let's display it in our view. Go into search. And let's see here. This, let's wrap all of this here.

Okay, now let's display it in our view. Go into search. And let's see here. This, let's wrap all of this here. This will be, uh, excuse me, this will be sort of our main section. And then we're gonna have an aside, like, so. And then why don't we wrap this whole thing in a div so that it can be our grid. All right, so we'll say facets, go here. And if we come back, give it a refresh. Yep. It's top to bottom. So I'm gonna say no, I want a grid.

And if we come back, give it a refresh. Yep. It's top to bottom. So I'm gonna say no, I want a grid and I want it to be like a 12 column grid. So grid calls 12, the aside will be three, it'll span three, uh, grid rows or columns. And then the last one will be three plus nine equals 12, right? So call span nine, come back, give it a refresh. Now there's side to side. Uh, next, what should we do here? Actually, why don't we change this?

Now there's side to side. Uh, next, what should we do here? Actually, why don't we change this? Maybe, Hmm, maybe a little more space. And that'll narrow it a little bit. I'll add a gap. Yeah, it's good enough. Okay, so now let's loop over our facets. And remember there, there could be one as there is in this case, but in real life there could be, there could be many that you are faceting by.

but in real life there could be, there could be many that you are faceting by. All right, let's get started. So right here, we'll say foreach $facets as $facet. And yeah, remember if you're working along, you're just gonna forget what's inside these objects and that's totally fine. So remember to use dd. dd is your friend. If you're in a Blade file dump is your friend and you just quickly gotta check right what's in here.

If you're in a blade file dump is your friend and you just quickly gotta check right what's in here. Yep. Okay, so we have name, and then I'll say right here, this will be the facet name. What else do I need? Oh, we have filters. So I should loop over the filters. And for each one I display the value. Okay, so let's do that for each facet filters as filter. Then once again, um, maybe this is also an unordered list.

filters as filter. Then once again, um, maybe this is also an unordered list. Let's reformat. Um, I think later, uh, this will probably be a form, but for now we're just, we're just getting it on the page. And then we'll say filterValue. Give it a refresh. And there you go. So let's style it a little bit. We'll say you are fontBold. This will be ucwords. Uh, it'll capitalize the first letter.

This will be uc words. Uh, it'll capitalize the first letter. All right, uh, next, why don't we wrap this whole thing. This will be its own little component. Once again, that way I can say border-gray-300, um, padding-x-4 and I'm sorry, border. There you go. Add some padding-y. Of course we could extract these into reusable styles or components if we want. But yeah, you get the general idea here.

or components if we want. But yeah, you get the general idea here. So now if I look for matter, uh, the author's facet sidebar section, uh, will update as well. If I look for Harry, then of course we're gonna see JK Rolling at the top. It's working. Cool. So why don't we do this? Um, why don't we say border-b border-gray-300. Like I said, we're not trying to win any awards.

border gray 300. Like I said, we're not trying to win any awards. And even if we were trying, I'm not gonna win 'cause I'd barely know what I'm doing here. Uh, but we can do a couple things here. Let's remove the padding. Yeah. And then here I can manually add it back in and do it here as well. Yep. And then PY two. So we're just adjusting it. So we have, um, this, this solid line

Yep. And then PY two. So we're just adjusting it. So we have, um, this, this solid line that extends to the very bottom. Maybe I should do this as well. No, maybe just PBT or PB two. Good enough, uh, for our needs. So finally, should there be no padding on the bottom? I think that looks good. Okay. It doesn't matter. Uh, so now we have one section and of course, if we were faceting by more than one section,

Uh, so now we have one section and of course, if we were faceting by more than one section, uh, we could display those results as well. That's the entire point. Okay. So now that we can see which authors are represented as part of these search results, well that's only partially helpful. In the next episode, I wanna take it a step further. I'd like to see a little checkbox next to each name. And when I selected it will submit the form and refresh the results to include only the results.

And when I selected it will submit the form and refresh the results to include only the results that have in this case matter, uh, in the name, but also were written by whoever I happen to select here. So I hope you're excited. I'll see you in the next episode.