All right.
And up next, let's work on the pagination.
Now, in this project, I'll show you two approaches.
So first, we'll set up a straight up pagination approach where effectively we'll display all of the
pages.
But since few students complain in the previous course iteration that in some cases, if you have tons
of jobs, you also have tons of buttons.
We will work on more complex approach where we only display limited amount of.
Page button.
So notice over here.
Technically, I have eight pages, but basically I only display one, two, three, four, five pages
at a time.
Now, of course, you'll be able to control these values.
And also keep in mind that even if you have, let's say, 50, you will still display only those five
page buttons.
And of course, I'll come back to this topic as we're working on the functionality.
So the main thing I want you to understand that there's going to be two approaches.
First, we'll go with the straight up approach and then we'll make it more complex.
And as a result, even if you have 100 pages, you'll be able to limit how many page buttons you actually
display.
So now let's navigate back to our project and we actually want to start in the components.
We want to create another one.
So in this case, I'm going to go with Page BTN Container.
Now please keep in mind that I'll use the same component, but you'll have the reference code in the
Readme just like previously.
So technically, if you want to set up two components, one for just regular buttons and then one for
more complex ones, you can definitely do so.
In my case I'll have one and I will refactor it in the scenario when we create a more complex approach.
So let's go with page BTN Container.
JS As far as the import export, I don't think we need to do it because we're only going to use it in
the jobs container.
So it's in the same one.
Yep, everything is correct.
So now let's just set up some kind of basic return.
We're going to go over here with heading one.
Okay, Beautiful.
Then you know what?
Let me close everything.
They're looking again for the client for source.
And then we want to grab the jobs container.
Over here.
So somewhere here we shouldn't have jobs.
Yep.
So we're here.
And then remember, we already grabbing the data, right?
So let's just log one more time just so we are on the same page.
Let me navigate back to the project.
That means packed.
And it looks like I have some previous logs, so let me remove them.
Let me refresh and check it out.
This is going to be the response from the server since we added those extra properties.
Correct.
We added how many jobs num of pages as well as the current page.
And lastly, we have jobs array which is set to ten jobs since we have a limit of ten.
So now back in the jobs container, I want to destructure out more properties, not only I want to get
the jobs, I also want to get total jobs.
And we want to get num of pages since we'll use that value to showcase our buttons.
Now this condition stays the same, so we're still checking whether the job's length is equal to zero.
We're not going to touch that.
However, in this wrapper above the div, we'll actually set up a heading five.
And in here I want to display how many jobs in total we have.
So we're going to go with total jobs then, since there might be one job or plenty of jobs.
I want to control the S, so I'll say, Hey, listen, if the job's length is bigger than one, then
I'm going to go with S.
So jobs found.
If.
It's only one job, then I'm just going to go with Job and you'll see what I'm talking about in a second.
So we're going to go here with jobs.
Length is bigger than one.
If that's the case, guess what?
We're going to go over here with S and we'll write found.
Now, if it's only one job, then of course we'll just say job and then after the div actually want
to go with num of pages and if it's bigger than one then I want to display the page button container.
In my opinion, what's the point of showing all the buttons if we have only one page anyway?
Correct.
So let's go over here with and operator and then we're going to look for Page.
Button container, which for some reason I'm not getting.
So.
BTN container.
Yep.
Unfortunately I didn't import.
Let me try here on the top.
So import page.
Button container.
From.
And then we're looking for the same folder.
Yep.
Over here.
I mean, it should work.
But again, for some reason, it doesn't.
Okay.
Let me try one more time.
Let's refresh.
Let's start from scratch.
Okay, let's keep on scrolling and notice since, of course, the total jobs is 100.
There's more than one page.
And of course, that's why we showcase the page button container.
And lastly, I guess in the page button container, let's just grab again some values from the context.
Remember when we were setting up everything here in the all Jobs page, we added a context.
Correct.
So let me go back over here to all jobs in here.
We have the context where we have the data.
And of course, I still want to have access to those things in the page button container.
And remember, we're passing them down from all jobs.
They're available in jobs container, and also they're going to be available in a page button container
once we set up all the proper imports.
So now let me look for me because I do want to quickly grab all of the imports we're going to use in
this page or I'm sorry, the component.
It's not really a page.
So in the page button container, we're going to have following imports.
So we'll have a few icons.
And also we have a wrapper, something we're going to style a little bit later and also use location,
link and use navigate from React router Dom and you'll see why we need these ones.
Essentially, once we set up the functionality and like I said, use all jobs context.
Why?
Well, because I want to access the num of pages and also the current page.
So let's invoke it here, const and there's a data and I know that in that data I have those two properties.
So we're just going to go with num of pages then comma, and then we're going to look for current page
and that is equal to use all jobs context.
And then again, just to stay on the safe side, I'm going to go with Num pages and also I want to see
the current page.
And once we navigate here, once we refresh and all that, we should see the result.
And notice here I have ten.
So that is going to be num of pages.
And the second value is the current page.
And with this in place now we can start working on our return.