Right.
And now let's set up the functionality.
So basically every time we'll click on a button, we'll make a new request in the query params.
We'll also have the page.
For starters, let's navigate back to our page button container.
I don't think we need to log pages anymore.
And now let's set up the function we're going to invoke.
For now, let's just pass in some kind of parameter and let's log it now.
In my case, I'm going to call it page number.
So let's go with handle page change.
This is something we're going to invoke and we're looking for one thing and one thing only, and that
is the page number.
Like I said, for now, let's just log it.
Let's see whether we're getting the correct value.
Now, when do we want to invoke it?
Well.
When we click on Breve, when we click on any of the buttons as well as the next one.
And I think let's start with all of the buttons, since functionality is going to be extremely straightforward.
So we're have the button right after the key I'm going to set up on Click.
And essentially every time I click on a button, I just want to pass in the page number to the handle
page.
Again, we don't have any functionality yet, we're just logging.
Don't worry, we'll set it up in a second.
So let's go with the handle page change and let's pass in the page number and if everything is correct.
Once we navigate to the browser, take a look at the console.
Basically we'll see the page number.
Correct.
So two, three, four.
And of course we can also see one.
Now let's also do the same thing for the prev and next, we just need to keep in mind that of course.
There is a set number of pages.
So effectively, if the page is less than one, I actually want to set it equal to the number of pages.
I want to go all the way to the last page.
Now, alternatively, you can always set it equal to one.
That's also an option.
But I chose this route.
So let's look for pre first.
Then let's go with on click.
Let's set up our callback function and we're not going to invoke it right away.
Handle page change.
We're going to go with Let brief page and we'll calculate by setting up current page minus one.
Like I said, everything is awesome, but.
We might also face the situation where this is going to be equal to zero.
Let's say that at the moment we are on page one and we want to go to previous page.
One minus one is going to be zero.
Now, in order to avoid such scenario, we're going to go with brief page, less than one.
So if it's less than one, like I said, we have few options.
If you want, you can always set it equal to one.
Now, in my case, I'm going to go with num pages, so I'm going to go to the end of the array.
That's going to be my approach and then we're going to go with handle page change and we'll pass in
the brief page.
So that's our brief page functionality.
And when it comes to the next page, pretty much the logic is almost the same.
We just need to look for the last page in our array.
So let's navigate over here and let's go with on click.
And let me just pass it in or I'm sorry.
I was copying the entire thing so there was no need for on click.
And now we just want to change this around where we're not looking for the proof page.
We're actually going to look for next page.
And as far as the condition we're going to look for next page, bigger than Num of pages.
And I'll say note, since we want to look for next page, we're going to go with plus one.
And like I said, next page bigger.
And we're going to look for number of pages.
Again, this is totally up to you.
You can leave this logic or in my case, I'm going to go back to the first page, so I'll set it equal
to one.
Now, at the moment we won't see the prev and next in the browser just because we're not changing those
pages in our URL.
So in order to complete our functionality, we want to navigate back to handle page change.
And for starters, we want to grab the search and path name from use location as well as the navigate.
So once we invoke handle page change, we'll actually we'll invoke a navigate and in there we'll pass
in the URL.
So let's go somewhere here.
I guess right after the pages doesn't really matter.
I'm going to go with const and search.
Pathname.
So those are the two things I can get from use location hook, which is provided by React router Dom.
And then also remember, in order to programmatically navigate, we want to go navigate and we want
to set it equal to use, navigate hook.
Now before we continue, let me just log the search as well as the path name, just so you can see what
we're going to be working with.
I notice once we navigate back to the browser, this is going to be our search.
And then right after that we have the path name.
So of course, path name is our page.
And then when it comes to search, these are going to be our query params.
So now we want to navigate back to the handle page change and essentially I want to use new URL search
params and pass in the search.
So we want to use again one of the JavaScript constructors.
So we'll go with search params, that's going to be my name and we'll set it equal to new URL search
params and we want to pass in the search and as a result I can add extra query param which one will
the page?
So now we'll send a request to the server with the page included.
So let's go with search params.
So that's our object.
We have a set method.
We need to come up with a name and this is very very important.
Remember on the server, the query parameter we're looking for is the page and therefore we go here
with page comma, and then we pass in the page number.
So whatever we get over here and then we want to navigate basically back to our all jobs.
However, in this case we'll have all of the search params, including the page.
So let's go with navigate.
Then we want to construct it and therefore I'm going to go with template string.
First of all, I'll grab the path name again.
This is going to go back to forward slash dashboard, forward slash all jobs.
Then let's add here a question mark since that's the syntax and one more time let's access the search
params only in this case, essentially I want to set it equal to a string.
So first I get back my instance.
On the instance, I add an extra query param by the name of page, and of course the value is equal
to page number, whatever it is.
And then we navigate back to the same page.
In this case, we have the page and we need to turn this into a string.
And as a result, if you notice again, let me start from the scratch.
So we navigate over here to all jobs.
We have those ten pages and if I click on three now notice we make a request.
Since we don't have anything in the inputs.
Of course we only have the page, but this is added to our URL.
So now when we go to a server, we actually request the third page.
And if you don't believe me, I can set up over here interview.
Now I'm going to have 32.
Let's scroll down and if I go to the fourth page, I'm only going to have two jobs and of course, since
we have already functionality for Prevnext notice once I click on next, I actually go to page number
one and then if I click on Prove, now I go back to the last one.
Now if I click one more time, then of course I'll have three, two, one and.
On and on and on and on.
So this is how we can set up straight up pagination in our project.