Okay, so we have our pagination implemented now we just need a component to display it.
So we're going to create inside components a new file called Paginate Dot JS and Bootstrap actually
has a pagination component, so we're going to import that from React Bootstrap.
And I mean obviously it's just the UI component we have to add to it, but we're also going to import
the link container from React router bootstrap.
And let's create our component.
And let's see in the return here, I want to first just make sure that there's more than one page.
So we're going to say if pages is greater than one, then we're going to continue on here.
Because if there's if there's only one page, then we don't want to show our pagination.
All right.
So we're going to open up the React Bootstrap pagination component.
And then inside here, basically we want to map through the pages.
And the way we can do that is I'll just type this out.
The way we can do that is have an array we're going to spread across and then use the array constructor
and pass in pages, and then we're going to get the keys for that, which is going to start at zero.
Okay.
So we're going to so basically we have zero through however many pages and we want to map through that.
So on the other side of the brackets, let's say map.
And we'll say for each one we'll call it X because we already have.
We didn't have it yet, but we'll have a prop passed in here.
Actually, let's do that now.
So this is going to take in the total pages the current page and also is admin, which I'm going to
set to false.
And the reason that we're bringing in is admin is because I want to use this in the admin page list
screen as well.
All right, so back to down here and I'm using Page here, so I'm not going to use it here.
Let's open up some parentheses and for each page we want to have a link container and that link container
is going to have a key and we're setting it to x plus one because X is zero.
You know, it's zero base, so we're just making it one and then the two is going to be different depending
on if it is an admin.
So I'm just going to I'll explain this after I just get it in here.
All right.
So basically we're saying if not admin, then we want this link container to go to page slash and then
x plus one, which will be whatever page it is else.
Then we want it to go to slash admin slash product list and then whatever the page is.
Okay.
And then let's see if we can end the link container.
And inside the link container, we're going to have our page pagination item.
And let's see inside here, we'll have X plus one.
And then we can end this pagination item.
All right.
So basically, our active page is going to be whatever.
Whatever this is.
So if X plus one equals this, then that's going to be the active link.
Or item, I should say.
So let's save this.
And now we can bring this into wherever we want to use it, which is going to be the home screen.
So in home screen, I'm going to import.
Paginate.
And we're going to put this.
Let's see.
We're going to put this right under the row here.
So paginate.
And we want to pass in pages, which is going to come from our data.
Right?
Right here from the Get products query, we changed it to not only return the products, but also return
the total number of pages as well as the current page.
So here we're going to set pages to that data dot pages, and then page to data dot page.
We don't need that keyword yet.
That's later.
So in here, actually, no, not in here because this is going to be self closing.
Oops.
We want a slash here and we don't need an ending tag.
All right, so now let's check it out.
So now we have one, two, three.
So the the active is one right now, right?
So if we look in our right here, so active is one.
And just just by using the pagination component from React Bootstrap we get the nice styling and the
colored for the active.
If I go to two, it's going to go to slash page slash two.
If I go to three goes to slash page slash three and however many items you want, you can just change
that in the back end.
So in our get products, let's say we want four, we'll save that.
Come back here.
And let's see.
Yeah.
So if I go to the route, that should also just show four and then I can go to page two.
Now I also want to implement this in the admin section, so let's go ahead and log out.
Well, if you're logged in as a regular user, log out and then log in as an admin user.
And right now, the product list page isn't going to work.
And the reason for that is if we go to front end screens, admin, product list, screen, we're still
trying to get products directly from use Get products query where now it returns not only the products,
but it's an object with the products, the page and the pages.
So to make this work again, we can get rid of products.
So we just have data and then come down here where we we map through the products right here and let's
add data, dot map or data dot products, dot map.
Now if we come back here, it's still not working because this query expects a page number and that's
going to come from the URL.
So let's bring in.
Use params from react router dom.
So we want to bring in use params and then we want to get the page number using that.
So here we're going to say const.
Page number equals use params and then pass in here as an object will pass in the page number.
So now if we go back and reload, we should see we see four products because that's what we have set
for each page is four.
All right.
Now we need a route that will go to product list, slash page, slash two and work.
So let's go into our index.js and let's add that.
Okay.
And you want to come down to where all the admin routes are and then this product list right here,
this route, I'm just going to copy that down and then I'm going to add on to it.
Slash.
Colon page number.
Uh, capital N, So.
Page number.
Yeah, we're just going to do that.
You could do slash page slash page number, but we're just going to do it like that.
So we'll save.
And that's what it what it is in our component, I believe.
Yeah.
So product list slash and then whatever the page number.
So if we try this now.
Actually, this isn't going to work because I'm putting Page in here, so I want to get rid of Page.
It should just be product list slash two and now I'm on page two and you can see I have the final two
products.
So now we just need to bring the component in.
So back in product list screen, which is the admin screen we're going to import.
Paginate.
And let's see.
We're going to bring it.
Let's go all the way down, just right below the table.
And we're going to put in paginate and then set pages to data, dot pages, page to data dot page.
And admin is going to be set to true because now we are on the admin page.
So now let's take a look.
So we're on the second page, let's click one.
So that brings us back and forth.
All right, cool.
So if you want to implement pagination on the other admin pages, you can do that.
But I'm just going to keep it for products for now.
Now in the next video, we're going to start on the search, which is going to be a few parts.
First of all, we need to implement search in the back end for the in the get products function.
And then we also need to create the component.
We're going to have a search box up here that will let us search or filter products.