1
00:00:00,320 --> 00:00:05,510
Okay, so now we're going to implement some pagination because if we have, you know, 500 products,

2
00:00:05,510 --> 00:00:07,430
I don't want to show all of those here.

3
00:00:07,430 --> 00:00:10,910
I want to show 10 or 20, something like that.

4
00:00:10,910 --> 00:00:12,980
So there's a few steps involved.

5
00:00:12,980 --> 00:00:19,040
We need to edit the back end, get products function so that we can have a page and we're actually going

6
00:00:19,040 --> 00:00:21,200
to change the data that we're getting back.

7
00:00:21,200 --> 00:00:27,770
Right now we're just getting back an array of products, but we want to get back an object that has

8
00:00:27,770 --> 00:00:34,280
not just the products but also the page that we're on and the total number of pages, and then we can

9
00:00:34,280 --> 00:00:37,310
implement that into a pagination component.

10
00:00:37,550 --> 00:00:37,850
All right.

11
00:00:37,850 --> 00:00:44,300
So let's head to the back end controllers and product controller, and we're going to go up to get products,

12
00:00:44,300 --> 00:00:46,130
which right now is extremely simple.

13
00:00:46,130 --> 00:00:48,350
It just gets all the products.

14
00:00:48,350 --> 00:00:50,420
But we're going to add on to this.

15
00:00:50,420 --> 00:00:58,940
So first thing I'm going to do is create a page size variable and I'm going to set this not to eight.

16
00:00:58,940 --> 00:01:05,489
I'm going to set it to something small right now, like let's do two just so we can test it out because

17
00:01:05,489 --> 00:01:08,100
we only have what, 5 or 6 products.

18
00:01:08,100 --> 00:01:09,870
So we'll set it to two for now.

19
00:01:09,900 --> 00:01:15,450
Ultimately, I'll probably set it to like 8 or 12 or something like that.

20
00:01:15,450 --> 00:01:23,040
And then we're going to create a page variable and we're going to set that to the page number that's

21
00:01:23,040 --> 00:01:24,330
in the URL.

22
00:01:24,330 --> 00:01:30,960
So to get a value, a query query parameter from the URL, we use request dot query, and then whatever

23
00:01:30,960 --> 00:01:35,160
we call it in this case page number, and then we're just casting it to a number.

24
00:01:35,160 --> 00:01:39,060
Now if that's not there, then it's obviously it'll be page one.

25
00:01:39,750 --> 00:01:43,500
Okay, Now we need to get the total number of pages.

26
00:01:43,500 --> 00:01:48,150
So I'm going to say const count and we're going to set that to await.

27
00:01:48,150 --> 00:01:55,050
And then there's actually a method, a mongoose method that we can use on model, on models like product

28
00:01:55,050 --> 00:01:57,060
called count documents.

29
00:01:57,150 --> 00:02:03,480
And we actually don't need to pass that in and that will just get the total number of, in this case,

30
00:02:03,480 --> 00:02:04,620
products.

31
00:02:05,160 --> 00:02:05,520
Okay.

32
00:02:05,520 --> 00:02:13,500
Then for products, we're going to do the same thing here find but we're going to tack on to this a

33
00:02:13,500 --> 00:02:13,860
limit.

34
00:02:13,860 --> 00:02:18,960
So I'm going to say dot limit, and then we pass in the page size.

35
00:02:18,960 --> 00:02:22,530
So it's only in this case it'll only get two.

36
00:02:22,710 --> 00:02:30,390
And then we also want to specify Skip, because if we're on like the second page, then obviously we

37
00:02:30,390 --> 00:02:32,790
want to skip the products that are on the first page.

38
00:02:32,790 --> 00:02:38,100
If we're on the third page, we want to skip the products that are on the first and second page.

39
00:02:38,100 --> 00:02:45,630
So here we're just passing in whatever the page size multiplied by whatever the page is, minus one.

40
00:02:45,630 --> 00:02:48,990
And then what we want to return is not going to be just products.

41
00:02:48,990 --> 00:02:56,040
Now, it's going to be an object that has products in it, but it's also going to have the page.

42
00:02:56,040 --> 00:03:03,090
And then to get the pages, we're going to first off, first just round up and then it's going to be

43
00:03:03,090 --> 00:03:06,390
whatever the count is divided by the page size.

44
00:03:07,690 --> 00:03:10,070
Okay, let's see what's going on here.

45
00:03:10,090 --> 00:03:11,950
Page This should be a comma.

46
00:03:12,750 --> 00:03:13,170
Yeah.

47
00:03:13,170 --> 00:03:16,530
So page and then pages, which is going to be this.

48
00:03:17,540 --> 00:03:17,900
All right.

49
00:03:17,900 --> 00:03:24,050
So now if we save this and we go back to the front end.

50
00:03:25,090 --> 00:03:26,170
It's going to break.

51
00:03:26,170 --> 00:03:30,490
And the reason is because now we're not just remember, we're not just getting products.

52
00:03:30,490 --> 00:03:31,110
So let's go back.

53
00:03:31,120 --> 00:03:34,870
Let's go to the front end and let's go into.

54
00:03:35,920 --> 00:03:40,030
Our let's see screens go into the home screen here.

55
00:03:40,180 --> 00:03:46,150
And what's happening is data is no longer just the products.

56
00:03:46,150 --> 00:03:50,580
So right here, I'm actually going to get rid of products.

57
00:03:50,590 --> 00:03:56,440
Now, data is going to include what I just showed you, the products, the page and the page size.

58
00:03:56,440 --> 00:04:03,190
So if we still want to loop through the products, we'll come down here and just say data dot products

59
00:04:03,220 --> 00:04:07,210
because products is in the the data object.

60
00:04:07,210 --> 00:04:09,970
So if I save that and we come back.

61
00:04:11,360 --> 00:04:12,320
Now it works.

62
00:04:12,320 --> 00:04:15,610
And notice we're only getting two because that's the page size.

63
00:04:15,620 --> 00:04:23,450
And then ultimately, if we wanted to go to the second page, we would do slash page slash two.

64
00:04:23,600 --> 00:04:23,930
Okay.

65
00:04:23,930 --> 00:04:25,430
Right now that's not going to work.

66
00:04:25,430 --> 00:04:27,530
It's just because we haven't created that route.

67
00:04:27,530 --> 00:04:28,760
But that's what I want.

68
00:04:28,790 --> 00:04:32,430
Now we have to change in our slice.

69
00:04:32,450 --> 00:04:39,170
Let's go to our products API slice and up here we have get products.

70
00:04:39,170 --> 00:04:42,590
Now we're going to have a page number query our param.

71
00:04:42,620 --> 00:04:47,330
So let's see inside query right here.

72
00:04:47,330 --> 00:04:52,160
Let's, let's destructure and we're going to have a page number.

73
00:04:53,580 --> 00:04:53,910
Okay.

74
00:04:53,910 --> 00:05:02,370
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

75
00:05:02,370 --> 00:05:03,450
number in here.

76
00:05:03,480 --> 00:05:06,000
This is going to break again if I.

77
00:05:06,030 --> 00:05:06,330
Oops.

78
00:05:06,330 --> 00:05:13,500
If I reload this because we're not passing the page number parameter to the get products function or

79
00:05:13,500 --> 00:05:15,630
the the get products query.

80
00:05:15,630 --> 00:05:16,890
So back in our.

81
00:05:17,610 --> 00:05:23,640
Let's go back to the home screen and where we're actually getting from this query.

82
00:05:23,670 --> 00:05:25,530
Let's add in.

83
00:05:25,650 --> 00:05:26,190
Let's see.

84
00:05:26,190 --> 00:05:28,590
So right here we're going to add in.

85
00:05:29,710 --> 00:05:31,160
The page number.

86
00:05:31,180 --> 00:05:33,570
Let's see that we need to get from the URL.

87
00:05:33,580 --> 00:05:37,450
So we need to bring in use params from react router dom.

88
00:05:37,450 --> 00:05:38,560
So let's say.

89
00:05:39,540 --> 00:05:40,770
Import.

90
00:05:42,230 --> 00:05:47,630
Use params and then we can just go right above here.

91
00:05:48,870 --> 00:05:51,750
And actually we don't need to do that.

92
00:05:51,750 --> 00:05:55,640
So we'll just get the page number from the URL and then pass it in.

93
00:05:55,650 --> 00:05:58,440
So now let's come back over here.

94
00:05:58,440 --> 00:06:00,240
And now this is working again.

95
00:06:00,240 --> 00:06:05,490
Now, like I said, I want to be able to go to slash page slash two and have that work.

96
00:06:05,490 --> 00:06:07,320
So let's create a route for that.

97
00:06:07,320 --> 00:06:16,890
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

98
00:06:16,890 --> 00:06:21,750
we're still going to load the home screen and instead we don't need true here.

99
00:06:21,750 --> 00:06:23,760
That's only for the first top.

100
00:06:23,760 --> 00:06:28,440
But the path for this is now going to be slash page.

101
00:06:29,250 --> 00:06:33,480
And then slash and then colon page number.

102
00:06:34,030 --> 00:06:36,100
And that's going to load the home screen.

103
00:06:36,800 --> 00:06:37,250
Okay.

104
00:06:37,250 --> 00:06:40,130
And we can test that out.

105
00:06:40,130 --> 00:06:41,600
And you can see it's working.

106
00:06:41,600 --> 00:06:42,860
I didn't even have to reload.

107
00:06:42,860 --> 00:06:44,660
So now it's showing the second two.

108
00:06:44,660 --> 00:06:51,530
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

109
00:06:51,530 --> 00:06:52,340
first two.

110
00:06:52,340 --> 00:06:57,890
And it's the same as if I just go to the route without specifying a page.

111
00:06:58,460 --> 00:07:01,040
So our pagination is now working.

112
00:07:01,040 --> 00:07:07,520
We just don't have a way to change pages other than manually changing the URL, which obviously we can't

113
00:07:07,520 --> 00:07:09,080
expect our users to do.

114
00:07:09,110 --> 00:07:13,400
So in the next video we're going to build our paginate component.