Let's work on pagination,
so on being able to flip through multiple pages of products. That is something you require in quite a
bit of applications and for it to work,
we of course need some product data.
So what I'll do is I'll again go to my products.js file in the routes folder in the backend folder
and there, I'll grab some of that dummy data
I prepared, like the stylish backpack with the price of 79.99 maybe, let's grab that image url which
uses our local image
and here I can also copy the description, click create product and here it is.
Now let's add another product,
maybe the working MacBook which is not the case for all modern Macbooks but say for this price,
let's grab that image and let's grab that description here
and now we got that here too.
So now I got two products.
Now let's say for some reason I only want to display one per page and I'd like to control this with so-called
query parameters,
so here I could have page equal one to indicate that I'm on page one and I only want to have one item per
page maybe
and now I would be on page two and I only want to show that one item that belongs on page two,
so in my case here, the Macbook would be on page two, stylish backpack would be on page one. Right now,
adding this query parameter does not do anything but we can handle it,
we can handle it here when we get all products,
I had some dummy pagination in place before. Comment out the first two lines, this fetches the information
which page you want to view and it assigns a default page size which I'll now change to one,
so one item per page and this is the page I want to view as a user.
Now how can we implement pagination,
do you know that? Well on our cursor, there are two methods that help us with that
or three methods.
First of all, we can sort, we can sort our results and we can sort them let's say either by ID to keep
that order we see here or maybe we want to sort them by price,
we could do that too.
Let's mix it up,
so let's sort them by price, price descending.
If I now save this and I go back to my backend terminal and I restart that server, if I now reload the
starting page, they are still on one page but there are now reordered.
So that is already nice but of course now, I can also use skip and limit
and I want to skip the amount of pages I'm into times the items per page,
so here let's say I'm viewing page two, then I want to skip query page -1 because I want to skip
all previous pages and that should go into parentheses
times
how much is on a page, page size.
So if I'm on page two, I will skip the first one, two minus one,
so one times page size, so one I'll skip the first one product or products if it's more than that.
And then of course I also want to use limit to not view all other products but also only well as many as page
size says,
so if I want to view one item per product,
I'll limit my result to that.
Now with that added here, I need to switch to my react code really quick and make sure that I forward the query
parameter there and to keep this really simple, I'll remove it from that url and not parse it manually
from there,
you could do that
but here I simply want to show the mongodb functionality.
So here in fetch data,
you can simply add the query parameter here because this is the URL which reaches your node backend,
it's not the url you entered
but the browser, this is it.
And if you enter one here, you can reload the page and you should see the MacBook
and if I now enter two here, so to switch to page two and you reload the page, well it does it for us even,
you see a stylish backpack.
Now in reality, you would of course probably implement some buttons that do that for you, that allow you
to switch that in the react app
but since this is not a react course, I'll not focus so much on the react side, I'll simply not use pagination
here but I wanted to show you how you could implement pagination with sort, skip and limit which
I'll comment out here
if you want it to. So let me quickly restart the backend
and now I got all the data on the page again because I commented this out but this would be how you
can sort and how you can implement pagination.