1
00:00:00,200 --> 00:00:05,930
Okay, so we have our pagination implemented now we just need a component to display it.

2
00:00:05,930 --> 00:00:14,270
So we're going to create inside components a new file called Paginate Dot JS and Bootstrap actually

3
00:00:14,270 --> 00:00:19,940
has a pagination component, so we're going to import that from React Bootstrap.

4
00:00:19,940 --> 00:00:28,610
And I mean obviously it's just the UI component we have to add to it, but we're also going to import

5
00:00:28,610 --> 00:00:31,400
the link container from React router bootstrap.

6
00:00:32,130 --> 00:00:34,770
And let's create our component.

7
00:00:34,860 --> 00:00:41,700
And let's see in the return here, I want to first just make sure that there's more than one page.

8
00:00:41,700 --> 00:00:49,020
So we're going to say if pages is greater than one, then we're going to continue on here.

9
00:00:49,020 --> 00:00:54,120
Because if there's if there's only one page, then we don't want to show our pagination.

10
00:00:54,630 --> 00:00:54,930
All right.

11
00:00:54,930 --> 00:00:58,500
So we're going to open up the React Bootstrap pagination component.

12
00:00:58,500 --> 00:01:03,390
And then inside here, basically we want to map through the pages.

13
00:01:03,390 --> 00:01:06,900
And the way we can do that is I'll just type this out.

14
00:01:06,930 --> 00:01:14,580
The way we can do that is have an array we're going to spread across and then use the array constructor

15
00:01:14,580 --> 00:01:21,390
and pass in pages, and then we're going to get the keys for that, which is going to start at zero.

16
00:01:21,720 --> 00:01:22,080
Okay.

17
00:01:22,080 --> 00:01:28,440
So we're going to so basically we have zero through however many pages and we want to map through that.

18
00:01:28,440 --> 00:01:31,260
So on the other side of the brackets, let's say map.

19
00:01:32,600 --> 00:01:37,340
And we'll say for each one we'll call it X because we already have.

20
00:01:37,940 --> 00:01:41,940
We didn't have it yet, but we'll have a prop passed in here.

21
00:01:41,960 --> 00:01:43,190
Actually, let's do that now.

22
00:01:43,190 --> 00:01:51,020
So this is going to take in the total pages the current page and also is admin, which I'm going to

23
00:01:51,020 --> 00:01:51,800
set to false.

24
00:01:51,800 --> 00:01:57,980
And the reason that we're bringing in is admin is because I want to use this in the admin page list

25
00:01:57,980 --> 00:01:59,630
screen as well.

26
00:01:59,840 --> 00:02:05,420
All right, so back to down here and I'm using Page here, so I'm not going to use it here.

27
00:02:06,500 --> 00:02:13,100
Let's open up some parentheses and for each page we want to have a link container and that link container

28
00:02:13,100 --> 00:02:18,590
is going to have a key and we're setting it to x plus one because X is zero.

29
00:02:19,520 --> 00:02:24,950
You know, it's zero base, so we're just making it one and then the two is going to be different depending

30
00:02:24,950 --> 00:02:26,780
on if it is an admin.

31
00:02:26,780 --> 00:02:30,590
So I'm just going to I'll explain this after I just get it in here.

32
00:02:32,220 --> 00:02:32,580
All right.

33
00:02:32,580 --> 00:02:39,090
So basically we're saying if not admin, then we want this link container to go to page slash and then

34
00:02:39,090 --> 00:02:42,690
x plus one, which will be whatever page it is else.

35
00:02:42,690 --> 00:02:48,030
Then we want it to go to slash admin slash product list and then whatever the page is.

36
00:02:48,820 --> 00:02:49,330
Okay.

37
00:02:49,330 --> 00:02:51,970
And then let's see if we can end the link container.

38
00:02:51,970 --> 00:02:57,760
And inside the link container, we're going to have our page pagination item.

39
00:02:58,620 --> 00:03:02,490
And let's see inside here, we'll have X plus one.

40
00:03:04,180 --> 00:03:07,420
And then we can end this pagination item.

41
00:03:08,080 --> 00:03:08,530
All right.

42
00:03:08,530 --> 00:03:13,450
So basically, our active page is going to be whatever.

43
00:03:14,540 --> 00:03:15,620
Whatever this is.

44
00:03:15,620 --> 00:03:20,510
So if X plus one equals this, then that's going to be the active link.

45
00:03:21,260 --> 00:03:22,910
Or item, I should say.

46
00:03:23,120 --> 00:03:25,640
So let's save this.

47
00:03:25,850 --> 00:03:31,260
And now we can bring this into wherever we want to use it, which is going to be the home screen.

48
00:03:31,280 --> 00:03:33,860
So in home screen, I'm going to import.

49
00:03:35,240 --> 00:03:36,350
Paginate.

50
00:03:37,850 --> 00:03:39,860
And we're going to put this.

51
00:03:40,840 --> 00:03:41,220
Let's see.

52
00:03:41,230 --> 00:03:43,690
We're going to put this right under the row here.

53
00:03:43,690 --> 00:03:44,660
So paginate.

54
00:03:44,660 --> 00:03:48,610
And we want to pass in pages, which is going to come from our data.

55
00:03:48,610 --> 00:03:48,940
Right?

56
00:03:48,940 --> 00:03:55,090
Right here from the Get products query, we changed it to not only return the products, but also return

57
00:03:55,090 --> 00:03:58,960
the total number of pages as well as the current page.

58
00:03:59,750 --> 00:04:06,260
So here we're going to set pages to that data dot pages, and then page to data dot page.

59
00:04:06,350 --> 00:04:08,180
We don't need that keyword yet.

60
00:04:08,180 --> 00:04:09,200
That's later.

61
00:04:09,230 --> 00:04:15,160
So in here, actually, no, not in here because this is going to be self closing.

62
00:04:15,180 --> 00:04:15,710
Oops.

63
00:04:16,899 --> 00:04:21,310
We want a slash here and we don't need an ending tag.

64
00:04:23,630 --> 00:04:25,580
All right, so now let's check it out.

65
00:04:25,700 --> 00:04:28,120
So now we have one, two, three.

66
00:04:28,130 --> 00:04:32,650
So the the active is one right now, right?

67
00:04:32,660 --> 00:04:36,680
So if we look in our right here, so active is one.

68
00:04:36,680 --> 00:04:43,610
And just just by using the pagination component from React Bootstrap we get the nice styling and the

69
00:04:43,610 --> 00:04:45,110
colored for the active.

70
00:04:45,140 --> 00:04:49,430
If I go to two, it's going to go to slash page slash two.

71
00:04:49,670 --> 00:04:57,170
If I go to three goes to slash page slash three and however many items you want, you can just change

72
00:04:57,170 --> 00:04:58,850
that in the back end.

73
00:04:58,970 --> 00:05:03,920
So in our get products, let's say we want four, we'll save that.

74
00:05:03,920 --> 00:05:05,270
Come back here.

75
00:05:06,810 --> 00:05:08,340
And let's see.

76
00:05:08,340 --> 00:05:08,550
Yeah.

77
00:05:08,580 --> 00:05:15,570
So if I go to the route, that should also just show four and then I can go to page two.

78
00:05:15,750 --> 00:05:22,610
Now I also want to implement this in the admin section, so let's go ahead and log out.

79
00:05:22,620 --> 00:05:27,990
Well, if you're logged in as a regular user, log out and then log in as an admin user.

80
00:05:30,810 --> 00:05:34,740
And right now, the product list page isn't going to work.

81
00:05:34,920 --> 00:05:44,340
And the reason for that is if we go to front end screens, admin, product list, screen, we're still

82
00:05:44,340 --> 00:05:52,260
trying to get products directly from use Get products query where now it returns not only the products,

83
00:05:52,260 --> 00:05:56,250
but it's an object with the products, the page and the pages.

84
00:05:56,250 --> 00:05:59,370
So to make this work again, we can get rid of products.

85
00:05:59,370 --> 00:06:06,810
So we just have data and then come down here where we we map through the products right here and let's

86
00:06:06,840 --> 00:06:12,270
add data, dot map or data dot products, dot map.

87
00:06:12,270 --> 00:06:22,980
Now if we come back here, it's still not working because this query expects a page number and that's

88
00:06:22,980 --> 00:06:24,300
going to come from the URL.

89
00:06:24,300 --> 00:06:25,980
So let's bring in.

90
00:06:26,580 --> 00:06:29,610
Use params from react router dom.

91
00:06:29,880 --> 00:06:35,850
So we want to bring in use params and then we want to get the page number using that.

92
00:06:35,850 --> 00:06:38,820
So here we're going to say const.

93
00:06:39,890 --> 00:06:48,800
Page number equals use params and then pass in here as an object will pass in the page number.

94
00:06:51,530 --> 00:06:59,300
So now if we go back and reload, we should see we see four products because that's what we have set

95
00:06:59,300 --> 00:07:01,220
for each page is four.

96
00:07:01,880 --> 00:07:02,270
All right.

97
00:07:02,300 --> 00:07:14,090
Now we need a route that will go to product list, slash page, slash two and work.

98
00:07:15,220 --> 00:07:19,480
So let's go into our index.js and let's add that.

99
00:07:20,200 --> 00:07:20,500
Okay.

100
00:07:20,590 --> 00:07:25,780
And you want to come down to where all the admin routes are and then this product list right here,

101
00:07:25,780 --> 00:07:31,960
this route, I'm just going to copy that down and then I'm going to add on to it.

102
00:07:32,730 --> 00:07:34,140
Slash.

103
00:07:35,420 --> 00:07:37,280
Colon page number.

104
00:07:38,960 --> 00:07:40,160
Uh, capital N, So.

105
00:07:40,160 --> 00:07:41,180
Page number.

106
00:07:42,310 --> 00:07:43,480
Yeah, we're just going to do that.

107
00:07:43,480 --> 00:07:48,160
You could do slash page slash page number, but we're just going to do it like that.

108
00:07:49,500 --> 00:07:50,820
So we'll save.

109
00:07:50,820 --> 00:07:53,970
And that's what it what it is in our component, I believe.

110
00:07:54,000 --> 00:07:54,330
Yeah.

111
00:07:54,330 --> 00:07:57,870
So product list slash and then whatever the page number.

112
00:07:57,870 --> 00:08:00,150
So if we try this now.

113
00:08:02,930 --> 00:08:06,890
Actually, this isn't going to work because I'm putting Page in here, so I want to get rid of Page.

114
00:08:06,890 --> 00:08:13,040
It should just be product list slash two and now I'm on page two and you can see I have the final two

115
00:08:13,040 --> 00:08:14,030
products.

116
00:08:14,210 --> 00:08:16,750
So now we just need to bring the component in.

117
00:08:16,760 --> 00:08:22,850
So back in product list screen, which is the admin screen we're going to import.

118
00:08:24,800 --> 00:08:25,850
Paginate.

119
00:08:26,900 --> 00:08:28,040
And let's see.

120
00:08:28,040 --> 00:08:29,510
We're going to bring it.

121
00:08:31,730 --> 00:08:35,210
Let's go all the way down, just right below the table.

122
00:08:36,100 --> 00:08:43,840
And we're going to put in paginate and then set pages to data, dot pages, page to data dot page.

123
00:08:43,840 --> 00:08:48,570
And admin is going to be set to true because now we are on the admin page.

124
00:08:48,580 --> 00:08:50,050
So now let's take a look.

125
00:08:50,050 --> 00:08:52,360
So we're on the second page, let's click one.

126
00:08:52,360 --> 00:08:54,940
So that brings us back and forth.

127
00:08:56,220 --> 00:08:57,210
All right, cool.

128
00:08:58,550 --> 00:09:03,800
So if you want to implement pagination on the other admin pages, you can do that.

129
00:09:03,800 --> 00:09:06,650
But I'm just going to keep it for products for now.

130
00:09:06,800 --> 00:09:12,350
Now in the next video, we're going to start on the search, which is going to be a few parts.

131
00:09:12,350 --> 00:09:19,100
First of all, we need to implement search in the back end for the in the get products function.

132
00:09:19,100 --> 00:09:21,410
And then we also need to create the component.

133
00:09:21,410 --> 00:09:26,120
We're going to have a search box up here that will let us search or filter products.