So now we want to be able to search or filter products.
And the way this is going to work is in the URL.
I want to be able to go to search slash and then whatever the keyword.
So phone for instance.
So that's ultimately what I want to be able to do.
So this is going to be the keyword that we can get using in the back end using request dot, query,
dot, keyword.
So let's head to the back end because that's where we first need to implement this.
I'm going to close the rest of this stuff up and we're going to go to our controllers product controller
and again, we're going to get products because this is ultimately this is the function that's going
to be called.
So let's go right under.
Let's see.
We'll go right under page here and let's say const.
Keyword.
And we're going to set that equal to request dot query, dot keyword.
And if that's there, then we're going to have an object.
Actually, we can we can do that.
So basically we're going to just use a regular expression here to match, to match that keyword and
it can match it anywhere in the title or the name of the product.
And the reason we're using a regular expression and not just matching it directly is because let's say
it says iPhone ten, but we just send in a keyword of phone.
We want that to match.
Okay.
So we're not we don't want it to match only if it's directly the same exact word.
And we want it to be case insensitive.
So after regex here, we'll put a comma and let's put in options.
And set that to a string of lowercase I that will make it a case insensitive.
Else, then we're not going to have anything here because there's no keyword.
Now, where we want to put this is let's see down here where we.
First of all, we want to implement it in the count because if there's a keyword.
Then that's going to limit the count, right?
Or we want it to limit the count.
So we're going to pass in here an object and then just spread across keyword.
Okay, so it'll only match with if it matches that keyword.
And then also in find, we're going to do the same thing because we only want it to find products with
that keyword if there is a keyword.
And that should be all we have to do here.
So let's save this.
And everything should still work.
Fine.
And I'm just going to change the pagination number.
I'm going to change it to, let's say, eight.
And if I do that, we're not going to see any component at the bottom, which is how it should be.
So next thing for the keyword, we're going to go to the front end.
And go into our slice, our product slice and go back to the get products query.
And just like we passed in a page number here, we're also going to pass in a keyword like that.
And then in the params we're also going to pass in a keyword.
So let's save that.
Now let's go to the home screen.
And.
Let's see.
So from.
The URL.
We're also going to check for our keyword.
And then we're going to pass that in.
To the query and we put keyword first.
So let's say keyword.
Okay.
So we're going to pass both of those in.
We'll save that.
Now we need to add our routes because remember, I want it to go to slash search slash and then whatever
the keyword.
And we also need a route if there's going to be a page number as well because we want pagination with
our filtered results, too.
So let's go into Index.js.
And let's see, we're going to go up to the top here.
And right under where we have this page number.
Actually, let's put it above it.
So I'm just going to copy that down.
And then for this one, it's going to be.
Slash.
Search.
Slash search and then slash colon keyword.
Okay.
And that will be the home screen.
And then.
I'm going to copy this down again.
And this one is going to be if it's slash search.
Slash keyword slash page slash page number.
So let's save that.
And now if I come over here and I go to, let's say, slash search, slash phone.
There we go.
So it's working.
So it matches phone here.
And also in the title we have headphones because it doesn't have to match just the whole word phone
as long as the word phone is in another word that will also come up.
So let's try.
Play.
So for that we have our PlayStation comes up and then we should also be able to do slash page slash
one.
Or.
Wait a minute.
Key search keyword.
Page.
Uh oh.
I'm sorry.
This should be.
This should have a colon because it shouldn't be straight keyword.
It's a placeholder.
So make sure you have a colon there.
All right, so now that works.
Good.
So the next thing we want to do before we actually create the component is, is add it to the pagination.
So.
Let's go to our pagination component.
Because if we don't do this, then pagination isn't going to work correctly on filtered results.
So we're going to add where we have is admin.
We're checking for is admin and then we're going to check for keyword.
So after the question mark, let's check for keyword and let's also pass that in up here.
So after is admin false?
We'll say keyword and set that to a default of just an empty string.
And then down here we'll say keyword and if there is a keyword.
So another question mark, then we're going to have the link be in Backticks.
Will do slash search.
Slash.
And then.
Whatever the keyword slash page and then slash.
Our x value plus one.
And then else.
Then the rest of it.
So that.
Yeah, that should work.
So I actually want to turn pagination back on so we can test it.
So let's go back to our product controller and change this.
Two.
Actually, you know what?
I'm going to change it to one because we know we can get if we put in phone, we can get two matches.
So let's go back.
Here.
So we're on our home page and you can see we have a bunch of links here because we only have one per
page.
But now I want to do a search.
For.
Search slash phone.
And now we have to write.
And if I click this, it should go to slash search, slash phone slash page, and then the page number.
Which it didn't.
So let's see, why did that happen?
And that's because we didn't pass in.
Keyword into our paginate component.
So we have to go back to the home screen.
And down here we need to account for keyword.
So let's say key word.
If keyword else, then nothing.
Wait.
What am I doing?
This should be.
Keyword equals.
That.
Yeah.
Now where we get.
Keyword.
Is from the URL, which we're getting right here.
All right, so let's try that now.
So I'm going to reload the search result and then click two again.
And now you can see it's only giving us the next item that matches.
And the URL is search phone page two.
So now, whether we're searching or not, the pagination works.
All right, cool.
So now let's.
Change this back.
Let's see, page size.
I'm going to change that back to eight.
And then we can close this stuff up.
And now obviously we need a way to search our products.
So in the next video, we're going to create our search box component.