1
00:00:02,210 --> 00:00:04,030
Let's work on pagination,

2
00:00:04,070 --> 00:00:10,490
so on being able to flip through multiple pages of products. That is something you require in quite a

3
00:00:10,490 --> 00:00:13,100
bit of applications and for it to work,

4
00:00:13,100 --> 00:00:15,320
we of course need some product data.

5
00:00:15,620 --> 00:00:20,330
So what I'll do is I'll again go to my products.js file in the routes folder in the backend folder

6
00:00:21,080 --> 00:00:23,970
and there, I'll grab some of that dummy data

7
00:00:24,020 --> 00:00:32,120
I prepared, like the stylish backpack with the price of 79.99 maybe, let's grab that image url which

8
00:00:32,120 --> 00:00:35,730
uses our local image

9
00:00:35,880 --> 00:00:43,150
and here I can also copy the description, click create product and here it is.

10
00:00:43,150 --> 00:00:45,040
Now let's add another product,

11
00:00:45,040 --> 00:00:54,070
maybe the working MacBook which is not the case for all modern Macbooks but say for this price,

12
00:00:54,160 --> 00:01:06,270
let's grab that image and let's grab that description here

13
00:01:06,480 --> 00:01:07,620
and now we got that here too.

14
00:01:07,710 --> 00:01:09,110
So now I got two products.

15
00:01:09,120 --> 00:01:14,490
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

16
00:01:14,490 --> 00:01:15,880
query parameters,

17
00:01:15,930 --> 00:01:21,480
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

18
00:01:21,480 --> 00:01:22,380
page maybe

19
00:01:22,500 --> 00:01:26,850
and now I would be on page two and I only want to show that one item that belongs on page two,

20
00:01:26,850 --> 00:01:32,760
so in my case here, the Macbook would be on page two, stylish backpack would be on page one. Right now,

21
00:01:32,760 --> 00:01:37,000
adding this query parameter does not do anything but we can handle it,

22
00:01:37,020 --> 00:01:40,370
we can handle it here when we get all products,

23
00:01:40,380 --> 00:01:48,320
I had some dummy pagination in place before. Comment out the first two lines, this fetches the information

24
00:01:48,340 --> 00:01:53,470
which page you want to view and it assigns a default page size which I'll now change to one,

25
00:01:53,520 --> 00:01:57,790
so one item per page and this is the page I want to view as a user.

26
00:01:57,810 --> 00:02:00,080
Now how can we implement pagination,

27
00:02:00,150 --> 00:02:06,670
do you know that? Well on our cursor, there are two methods that help us with that

28
00:02:07,090 --> 00:02:08,240
or three methods.

29
00:02:08,470 --> 00:02:16,630
First of all, we can sort, we can sort our results and we can sort them let's say either by ID to keep

30
00:02:16,630 --> 00:02:20,240
that order we see here or maybe we want to sort them by price,

31
00:02:20,350 --> 00:02:21,170
we could do that too.

32
00:02:21,190 --> 00:02:21,820
Let's mix it up,

33
00:02:21,820 --> 00:02:25,570
so let's sort them by price, price descending.

34
00:02:25,780 --> 00:02:34,460
If I now save this and I go back to my backend terminal and I restart that server, if I now reload the

35
00:02:34,470 --> 00:02:38,970
starting page, they are still on one page but there are now reordered.

36
00:02:39,160 --> 00:02:44,160
So that is already nice but of course now, I can also use skip and limit

37
00:02:44,470 --> 00:02:52,900
and I want to skip the amount of pages I'm into times the items per page,

38
00:02:52,900 --> 00:02:59,830
so here let's say I'm viewing page two, then I want to skip query page -1 because I want to skip

39
00:02:59,830 --> 00:03:04,630
all previous pages and that should go into parentheses

40
00:03:07,280 --> 00:03:08,280
times

41
00:03:08,420 --> 00:03:10,950
how much is on a page, page size.

42
00:03:11,000 --> 00:03:16,750
So if I'm on page two, I will skip the first one, two minus one,

43
00:03:16,760 --> 00:03:24,380
so one times page size, so one I'll skip the first one product or products if it's more than that.

44
00:03:24,620 --> 00:03:30,950
And then of course I also want to use limit to not view all other products but also only well as many as page

45
00:03:30,950 --> 00:03:32,030
size says,

46
00:03:32,090 --> 00:03:34,270
so if I want to view one item per product,

47
00:03:34,380 --> 00:03:36,920
I'll limit my result to that.

48
00:03:36,920 --> 00:03:43,760
Now with that added here, I need to switch to my react code really quick and make sure that I forward the query

49
00:03:43,760 --> 00:03:50,420
parameter there and to keep this really simple, I'll remove it from that url and not parse it manually

50
00:03:50,420 --> 00:03:50,920
from there,

51
00:03:50,930 --> 00:03:51,820
you could do that

52
00:03:51,950 --> 00:03:54,970
but here I simply want to show the mongodb functionality.

53
00:03:55,010 --> 00:03:56,480
So here in fetch data,

54
00:03:56,570 --> 00:04:02,210
you can simply add the query parameter here because this is the URL which reaches your node backend,

55
00:04:02,240 --> 00:04:03,620
it's not the url you entered

56
00:04:03,620 --> 00:04:05,370
but the browser, this is it.

57
00:04:05,430 --> 00:04:12,410
And if you enter one here, you can reload the page and you should see the MacBook

58
00:04:12,620 --> 00:04:18,940
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,

59
00:04:19,100 --> 00:04:20,620
you see a stylish backpack.

60
00:04:20,660 --> 00:04:26,150
Now in reality, you would of course probably implement some buttons that do that for you, that allow you

61
00:04:26,150 --> 00:04:27,900
to switch that in the react app

62
00:04:27,920 --> 00:04:34,710
but since this is not a react course, I'll not focus so much on the react side, I'll simply not use pagination

63
00:04:34,790 --> 00:04:40,610
here but I wanted to show you how you could implement pagination with sort, skip and limit which

64
00:04:40,610 --> 00:04:41,710
I'll comment out here

65
00:04:41,870 --> 00:04:47,970
if you want it to. So let me quickly restart the backend

66
00:04:48,350 --> 00:04:53,120
and now I got all the data on the page again because I commented this out but this would be how you

67
00:04:53,120 --> 00:04:55,930
can sort and how you can implement pagination.