Okay, so now we're going to implement some pagination because if we have, you know, 500 products,
I don't want to show all of those here.
I want to show 10 or 20, something like that.
So there's a few steps involved.
We need to edit the back end, get products function so that we can have a page and we're actually going
to change the data that we're getting back.
Right now we're just getting back an array of products, but we want to get back an object that has
not just the products but also the page that we're on and the total number of pages, and then we can
implement that into a pagination component.
All right.
So let's head to the back end controllers and product controller, and we're going to go up to get products,
which right now is extremely simple.
It just gets all the products.
But we're going to add on to this.
So first thing I'm going to do is create a page size variable and I'm going to set this not to eight.
I'm going to set it to something small right now, like let's do two just so we can test it out because
we only have what, 5 or 6 products.
So we'll set it to two for now.
Ultimately, I'll probably set it to like 8 or 12 or something like that.
And then we're going to create a page variable and we're going to set that to the page number that's
in the URL.
So to get a value, a query query parameter from the URL, we use request dot query, and then whatever
we call it in this case page number, and then we're just casting it to a number.
Now if that's not there, then it's obviously it'll be page one.
Okay, Now we need to get the total number of pages.
So I'm going to say const count and we're going to set that to await.
And then there's actually a method, a mongoose method that we can use on model, on models like product
called count documents.
And we actually don't need to pass that in and that will just get the total number of, in this case,
products.
Okay.
Then for products, we're going to do the same thing here find but we're going to tack on to this a
limit.
So I'm going to say dot limit, and then we pass in the page size.
So it's only in this case it'll only get two.
And then we also want to specify Skip, because if we're on like the second page, then obviously we
want to skip the products that are on the first page.
If we're on the third page, we want to skip the products that are on the first and second page.
So here we're just passing in whatever the page size multiplied by whatever the page is, minus one.
And then what we want to return is not going to be just products.
Now, it's going to be an object that has products in it, but it's also going to have the page.
And then to get the pages, we're going to first off, first just round up and then it's going to be
whatever the count is divided by the page size.
Okay, let's see what's going on here.
Page This should be a comma.
Yeah.
So page and then pages, which is going to be this.
All right.
So now if we save this and we go back to the front end.
It's going to break.
And the reason is because now we're not just remember, we're not just getting products.
So let's go back.
Let's go to the front end and let's go into.
Our let's see screens go into the home screen here.
And what's happening is data is no longer just the products.
So right here, I'm actually going to get rid of products.
Now, data is going to include what I just showed you, the products, the page and the page size.
So if we still want to loop through the products, we'll come down here and just say data dot products
because products is in the the data object.
So if I save that and we come back.
Now it works.
And notice we're only getting two because that's the page size.
And then ultimately, if we wanted to go to the second page, we would do slash page slash two.
Okay.
Right now that's not going to work.
It's just because we haven't created that route.
But that's what I want.
Now we have to change in our slice.
Let's go to our products API slice and up here we have get products.
Now we're going to have a page number query our param.
So let's see inside query right here.
Let's, let's destructure and we're going to have a page number.
Okay.
And then let's see, we have our URL and then I'm going to add on to this params and we want our page
number in here.
This is going to break again if I.
Oops.
If I reload this because we're not passing the page number parameter to the get products function or
the the get products query.
So back in our.
Let's go back to the home screen and where we're actually getting from this query.
Let's add in.
Let's see.
So right here we're going to add in.
The page number.
Let's see that we need to get from the URL.
So we need to bring in use params from react router dom.
So let's say.
Import.
Use params and then we can just go right above here.
And actually we don't need to do that.
So we'll just get the page number from the URL and then pass it in.
So now let's come back over here.
And now this is working again.
Now, like I said, I want to be able to go to slash page slash two and have that work.
So let's create a route for that.
So in the index.js we're going to go, let's see up here and I'm just going to copy this down because
we're still going to load the home screen and instead we don't need true here.
That's only for the first top.
But the path for this is now going to be slash page.
And then slash and then colon page number.
And that's going to load the home screen.
Okay.
And we can test that out.
And you can see it's working.
I didn't even have to reload.
So now it's showing the second two.
If I go to page three, it's going to show those, okay, If I go to page one, it's going to show the
first two.
And it's the same as if I just go to the route without specifying a page.
So our pagination is now working.
We just don't have a way to change pages other than manually changing the URL, which obviously we can't
expect our users to do.
So in the next video we're going to build our paginate component.