1
00:00:00,170 --> 00:00:00,560
All right.

2
00:00:00,560 --> 00:00:05,510
And I guess the first thing we want to do is to display something on the screen.

3
00:00:05,510 --> 00:00:12,680
So for now, let's just display the buttons and we'll set up the actual functionality in the upcoming

4
00:00:12,680 --> 00:00:13,590
video.

5
00:00:13,610 --> 00:00:19,220
So for starters, let's I guess display the prev and next buttons.

6
00:00:19,220 --> 00:00:22,520
That's going to be the easiest one since we'll just hard code that.

7
00:00:22,520 --> 00:00:27,920
So we're going to go here with a wrapper and then inside of the wrapper we're going to have three things.

8
00:00:28,160 --> 00:00:29,630
We'll have the prev button.

9
00:00:29,630 --> 00:00:34,010
So let's just set up a button, let's add a class name here.

10
00:00:34,340 --> 00:00:38,750
We're looking for BTN then prev hyphen btn.

11
00:00:39,550 --> 00:00:42,820
And eventually we'll have the on click as well.

12
00:00:42,820 --> 00:00:48,950
For now, we simply want to display something inside of the button and therefore we're going to go with

13
00:00:48,950 --> 00:00:50,680
the Chevron left.

14
00:00:51,040 --> 00:00:52,150
So let me take a look.

15
00:00:52,180 --> 00:00:52,480
Yep.

16
00:00:52,480 --> 00:00:54,080
That's the one that I'm looking for.

17
00:00:54,100 --> 00:00:57,340
And then let's add some kind of text brief.

18
00:00:57,370 --> 00:00:58,090
Okay, good.

19
00:00:58,120 --> 00:01:04,720
Then all of the buttons are going to be inside of the button container, but we still need to construct

20
00:01:04,720 --> 00:01:05,560
our array.

21
00:01:05,590 --> 00:01:10,320
So for now, let's just go with Div and let's add a class of BTN container.

22
00:01:10,330 --> 00:01:13,020
And for now let's not place anything inside.

23
00:01:13,030 --> 00:01:15,910
And then I want to take my prev button.

24
00:01:16,620 --> 00:01:21,840
Set it up after the div and now we just want to change some things around.

25
00:01:21,990 --> 00:01:23,430
This is not going to be pre.

26
00:01:23,460 --> 00:01:24,810
It's going to be next.

27
00:01:25,050 --> 00:01:26,580
Text is also going to be next.

28
00:01:26,580 --> 00:01:31,230
And you can probably already imagine that we'll use the other one, the icon.

29
00:01:31,930 --> 00:01:33,490
That ends with the right.

30
00:01:33,850 --> 00:01:34,990
Okay, good.

31
00:01:35,020 --> 00:01:35,770
Let's save it.

32
00:01:35,800 --> 00:01:36,760
Let's take a look.

33
00:01:36,790 --> 00:01:37,300
Yep.

34
00:01:37,300 --> 00:01:38,170
We have pre.

35
00:01:38,170 --> 00:01:39,310
And we have next.

36
00:01:39,340 --> 00:01:41,500
Now it looks like I have a tiny bug.

37
00:01:41,890 --> 00:01:43,690
Essentially, I want to move this one up.

38
00:01:43,690 --> 00:01:46,000
And now, of course, everything is correct.

39
00:01:46,090 --> 00:01:51,040
Then I guess I can just remove the num of pages and current page.

40
00:01:51,040 --> 00:01:55,480
And now let's construct the buttons we're going to display over here.

41
00:01:55,480 --> 00:02:03,100
And the way we're going to do that first, I'll use that number and I'll construct an array of the pages.

42
00:02:03,130 --> 00:02:08,800
Now in here we'll just use pretty much the index and you'll see what I'm talking about in a second.

43
00:02:08,830 --> 00:02:11,290
So there's going to be a pages array.

44
00:02:11,290 --> 00:02:13,870
We're going to use array dot from.

45
00:02:14,290 --> 00:02:17,440
And in here we want to pass in two things.

46
00:02:17,470 --> 00:02:22,660
First, we want to construct it and we can actually construct an array by providing a length.

47
00:02:22,690 --> 00:02:25,780
Now what is our length that is going to be num of pages.

48
00:02:25,780 --> 00:02:30,490
So this is going to be some kind of number and basically based on that number.

49
00:02:31,070 --> 00:02:31,560
All right.

50
00:02:31,560 --> 00:02:34,350
That from is going to create an array.

51
00:02:34,380 --> 00:02:39,840
Now, initially, all the values are going to be undefined, but there's going to be this number of

52
00:02:39,840 --> 00:02:40,500
items.

53
00:02:40,500 --> 00:02:41,730
And if you don't believe me.

54
00:02:42,620 --> 00:02:43,720
Let's go to pages.

55
00:02:43,730 --> 00:02:45,700
Let's log it and check it out.

56
00:02:45,710 --> 00:02:50,150
Since I have ten pages since the value over here is ten.

57
00:02:50,420 --> 00:02:53,450
Therefore I have an array with ten items.

58
00:02:53,630 --> 00:02:56,510
And like I said, the value here is undefined.

59
00:02:56,510 --> 00:03:01,280
And in order to change that, we want to pass in the callback function, which is going to be invoked

60
00:03:01,280 --> 00:03:05,570
for every item and we'll use the index and we'll return it.

61
00:03:05,570 --> 00:03:12,050
And as a result we'll actually get back an array starting with one all the way up to ten.

62
00:03:12,050 --> 00:03:15,830
So let's navigate back, let's add a callback function.

63
00:03:15,830 --> 00:03:22,880
And in here, since I only care about the index, I'm not going to use that undefined value.

64
00:03:22,880 --> 00:03:27,980
I'm going to add underscore and then comma, please keep in mind that we can write pretty much anything

65
00:03:27,980 --> 00:03:29,270
we want over here.

66
00:03:29,360 --> 00:03:31,610
I'm just trying to access the index.

67
00:03:31,610 --> 00:03:34,090
I don't care about that undefined.

68
00:03:34,100 --> 00:03:38,240
Let me set it up and it looks like I have a tiny bug.

69
00:03:38,270 --> 00:03:39,140
My apologies.

70
00:03:39,140 --> 00:03:40,730
It's not in the object.

71
00:03:40,730 --> 00:03:41,360
My bad.

72
00:03:41,360 --> 00:03:44,700
So we want to set it up over here as a second argument.

73
00:03:44,700 --> 00:03:48,480
Again, underscore means that we're going to access the undefined.

74
00:03:48,480 --> 00:03:53,850
And I don't care about undefined, I'm just looking for index, which is the second argument.

75
00:03:53,850 --> 00:03:57,960
And then whatever we return from, this function is going to be that value.

76
00:03:57,960 --> 00:04:01,110
So in my case, I want to return index plus one.

77
00:04:01,110 --> 00:04:01,700
Why?

78
00:04:01,710 --> 00:04:02,730
Well, because.

79
00:04:03,360 --> 00:04:06,030
Remember, arrays are zero index based.

80
00:04:06,060 --> 00:04:10,010
And when it comes to my pages, I want to start with one.

81
00:04:10,020 --> 00:04:12,690
So in here, let's just go with index.

82
00:04:12,690 --> 00:04:15,300
Plus not to my bad.

83
00:04:15,360 --> 00:04:18,040
We're going to go with one and now check it out again.

84
00:04:18,060 --> 00:04:21,920
Yes, I know it's probably annoying to some people, but I'm going to navigate back.

85
00:04:21,930 --> 00:04:25,950
I'm going to refresh and for some reason it says undefined.

86
00:04:25,990 --> 00:04:28,080
Oh, yeah, because in here.

87
00:04:28,820 --> 00:04:32,990
I set up the explicit return and I actually didn't return anything.

88
00:04:32,990 --> 00:04:34,970
So of course we can shorten this up.

89
00:04:34,970 --> 00:04:36,260
We have two approaches.

90
00:04:36,260 --> 00:04:40,340
We can either return from here or you can set up the implicit return.

91
00:04:40,340 --> 00:04:43,400
And I believe in the Readme, you'll see the implicit return.

92
00:04:43,400 --> 00:04:46,100
I don't think it's that important, so I'll leave it the way it is.

93
00:04:46,100 --> 00:04:54,400
And now notice I have an array with ten values and pretty much each value is a number correct.

94
00:04:54,410 --> 00:04:59,300
So the last thing we want to do as far as displaying those buttons, well, we want to navigate to our

95
00:04:59,300 --> 00:05:04,910
button container over here and then essentially we'll go with pages.

96
00:05:04,910 --> 00:05:06,530
So that's our array.

97
00:05:06,710 --> 00:05:11,420
And when it comes to a callback function, I'm going to say page number over here.

98
00:05:11,420 --> 00:05:12,920
So what am I referencing?

99
00:05:12,920 --> 00:05:18,110
I'm referencing that number from one all the way up to 810.

100
00:05:18,110 --> 00:05:18,710
Correct.

101
00:05:18,710 --> 00:05:23,690
And then from this iteration, I want to return a button.

102
00:05:23,690 --> 00:05:29,850
So pretty much for every item there's going to be a button and we'll right away set up dynamic classes

103
00:05:29,850 --> 00:05:37,470
because for the active button, basically the button which references the current page, we want to

104
00:05:37,500 --> 00:05:41,190
have different styles and therefore in here we'll go with curlies.

105
00:05:41,220 --> 00:05:43,110
Then we'll set up template string.

106
00:05:43,110 --> 00:05:46,350
We're going to go with button page BTN.

107
00:05:46,970 --> 00:05:48,690
And then let's set up the logic.

108
00:05:48,710 --> 00:05:56,720
If the page number so this sucker over here is equal to the current page, the one that we're getting

109
00:05:56,720 --> 00:05:58,250
back from the server like.

110
00:05:58,250 --> 00:06:02,840
So if it's equal, then we'll use the active class.

111
00:06:02,840 --> 00:06:07,810
So let's use the and operator and let's just add active over here.

112
00:06:07,820 --> 00:06:14,360
Now, also, remember, we do need to add the key and for this we're going to essentially use the page

113
00:06:14,360 --> 00:06:15,050
number.

114
00:06:15,050 --> 00:06:21,500
So right after our class name, we're going to go with Key and we'll set it equal to page number.

115
00:06:21,500 --> 00:06:23,690
Eventually there's going to be on click.

116
00:06:23,720 --> 00:06:25,550
Let's not worry about it right now.

117
00:06:26,150 --> 00:06:34,220
Effectively, we just want to display the page number and if everything is correct, notice over here

118
00:06:34,370 --> 00:06:39,410
we have prev and next and also a list of buttons.

119
00:06:39,440 --> 00:06:45,620
Now of course, if I'm going to navigate over here and if I'm going to look for interview, I only have

120
00:06:45,720 --> 00:06:47,040
32 jobs.

121
00:06:47,220 --> 00:06:49,800
So how many pages that I'm going to have?

122
00:06:50,100 --> 00:06:51,000
Well, four.

123
00:06:51,000 --> 00:06:51,630
Correct.

124
00:06:51,630 --> 00:06:55,440
And of course we're also now displaying four buttons.

125
00:06:55,440 --> 00:07:01,980
And in the following video, we'll set up the functionality where every time we will click on a button,

126
00:07:01,980 --> 00:07:10,130
we'll actually make a new request and we're just going to change that page value in the query params.