All right.
And I guess the first thing we want to do is to display something on the screen.
So for now, let's just display the buttons and we'll set up the actual functionality in the upcoming
video.
So for starters, let's I guess display the prev and next buttons.
That's going to be the easiest one since we'll just hard code that.
So we're going to go here with a wrapper and then inside of the wrapper we're going to have three things.
We'll have the prev button.
So let's just set up a button, let's add a class name here.
We're looking for BTN then prev hyphen btn.
And eventually we'll have the on click as well.
For now, we simply want to display something inside of the button and therefore we're going to go with
the Chevron left.
So let me take a look.
Yep.
That's the one that I'm looking for.
And then let's add some kind of text brief.
Okay, good.
Then all of the buttons are going to be inside of the button container, but we still need to construct
our array.
So for now, let's just go with Div and let's add a class of BTN container.
And for now let's not place anything inside.
And then I want to take my prev button.
Set it up after the div and now we just want to change some things around.
This is not going to be pre.
It's going to be next.
Text is also going to be next.
And you can probably already imagine that we'll use the other one, the icon.
That ends with the right.
Okay, good.
Let's save it.
Let's take a look.
Yep.
We have pre.
And we have next.
Now it looks like I have a tiny bug.
Essentially, I want to move this one up.
And now, of course, everything is correct.
Then I guess I can just remove the num of pages and current page.
And now let's construct the buttons we're going to display over here.
And the way we're going to do that first, I'll use that number and I'll construct an array of the pages.
Now in here we'll just use pretty much the index and you'll see what I'm talking about in a second.
So there's going to be a pages array.
We're going to use array dot from.
And in here we want to pass in two things.
First, we want to construct it and we can actually construct an array by providing a length.
Now what is our length that is going to be num of pages.
So this is going to be some kind of number and basically based on that number.
All right.
That from is going to create an array.
Now, initially, all the values are going to be undefined, but there's going to be this number of
items.
And if you don't believe me.
Let's go to pages.
Let's log it and check it out.
Since I have ten pages since the value over here is ten.
Therefore I have an array with ten items.
And like I said, the value here is undefined.
And in order to change that, we want to pass in the callback function, which is going to be invoked
for every item and we'll use the index and we'll return it.
And as a result we'll actually get back an array starting with one all the way up to ten.
So let's navigate back, let's add a callback function.
And in here, since I only care about the index, I'm not going to use that undefined value.
I'm going to add underscore and then comma, please keep in mind that we can write pretty much anything
we want over here.
I'm just trying to access the index.
I don't care about that undefined.
Let me set it up and it looks like I have a tiny bug.
My apologies.
It's not in the object.
My bad.
So we want to set it up over here as a second argument.
Again, underscore means that we're going to access the undefined.
And I don't care about undefined, I'm just looking for index, which is the second argument.
And then whatever we return from, this function is going to be that value.
So in my case, I want to return index plus one.
Why?
Well, because.
Remember, arrays are zero index based.
And when it comes to my pages, I want to start with one.
So in here, let's just go with index.
Plus not to my bad.
We're going to go with one and now check it out again.
Yes, I know it's probably annoying to some people, but I'm going to navigate back.
I'm going to refresh and for some reason it says undefined.
Oh, yeah, because in here.
I set up the explicit return and I actually didn't return anything.
So of course we can shorten this up.
We have two approaches.
We can either return from here or you can set up the implicit return.
And I believe in the Readme, you'll see the implicit return.
I don't think it's that important, so I'll leave it the way it is.
And now notice I have an array with ten values and pretty much each value is a number correct.
So the last thing we want to do as far as displaying those buttons, well, we want to navigate to our
button container over here and then essentially we'll go with pages.
So that's our array.
And when it comes to a callback function, I'm going to say page number over here.
So what am I referencing?
I'm referencing that number from one all the way up to 810.
Correct.
And then from this iteration, I want to return a button.
So pretty much for every item there's going to be a button and we'll right away set up dynamic classes
because for the active button, basically the button which references the current page, we want to
have different styles and therefore in here we'll go with curlies.
Then we'll set up template string.
We're going to go with button page BTN.
And then let's set up the logic.
If the page number so this sucker over here is equal to the current page, the one that we're getting
back from the server like.
So if it's equal, then we'll use the active class.
So let's use the and operator and let's just add active over here.
Now, also, remember, we do need to add the key and for this we're going to essentially use the page
number.
So right after our class name, we're going to go with Key and we'll set it equal to page number.
Eventually there's going to be on click.
Let's not worry about it right now.
Effectively, we just want to display the page number and if everything is correct, notice over here
we have prev and next and also a list of buttons.
Now of course, if I'm going to navigate over here and if I'm going to look for interview, I only have
32 jobs.
So how many pages that I'm going to have?
Well, four.
Correct.
And of course we're also now displaying four buttons.
And in the following video, we'll set up the functionality where every time we will click on a button,
we'll actually make a new request and we're just going to change that page value in the query params.