Beautiful with our structure in place.
Now we can start working on our pageant function.
That is probably going to be the most important one because it's gonna set up all our pageant nation.
And then remember it was within the helpers.
So I'm going to had two helpers and then just to show you what we're gonna get.
I'm gonna console log everything that we're doing so I'm gonna go with the product and then I'm gonna
do inspect just so I can see what is happening within my function.
So within the console I should have an array with all my products.
That's what I'm passing in of course within the product context.
When I invoke the patch nation first thing we would need to decide is how many items we would want per
page.
Now I'm gonna go with four just for the simple reason that my C assess is set up this way where essentially
I have four columns but of course once we set up the functionality I'm going to show it it doesn't matter.
We can have five items per page.
We can have 10 items we can have twenty two thousand.
It doesn't really matter.
The only reason why I'm going with 4 is the simple fact that again I have four columns so I have four
column layout so that's why when I set up the page of course it looks a bit nicer where if you would
have I don't know five or six then you're just going to have two rows which is again not the end of
the world but that's the reason why I went with four items.
So like I said First we need to come up with how many items per page one.
And I'm gonna set this up as a variable so cost my items per page and we're gonna go with four or at
least I'm going to go with four.
You can go with any number and then again like I previously mentioned once we set up the functionality
I'm going to show you that everything is still going to work whether we're gonna have five items ten
items or fifty five thousand items.
And once we have decided how many items per page we're going to have then we're going to have to calculate
how many pages we're going to have.
And that is going to depend on how many products.
And of course how many items per page because if I have 15 products and then I would want four items
per page I'm going to have one value for the pages.
And then if I have 25 items and then I'm still going well let's say for items per page then of course
I'm going to have different amount of pages and we're going to do a little bit of math.
So we're going to go at cons then the variable name is gonna be number of pages and that is going to
be equal to a product's length.
So whatever is the length of my array divided by the items per page items per page.
Now the gotcha here is going to be that it is not gonna be a even number.
So if we console log number of pages you're going to see that it's three point seventy five.
And that's not what we're looking for.
So what I would want is to have an even number.
But I would want to have a even number but I would want that even number to be rounded up.
Why.
Because I don't want three pages with four items each which is going to give me twelve.
I would rather one have four pages so three of them are going to have four items and then the last one
is just going to have remaining items in that page.
So in order to set that up we're going to go with the math ceiling and we're just going to pass our
calculation.
So let me add the parentheses here.
Now you're going to see that our number is always going to be even and it's going to be rounded up so
that way if you have I don't know four point one pages then you know so five pages with the last one
not having the full amount of items of course.
Okay.
We have our calculation now what.
Well now we want to create a new product.
All right.
And again we're still returning product.
That's why everything is displayed correctly.
But now we're going to set up a new product.
All right.
And we're going to go with concept new products.
And in order to set this up we're going to use array from method so array from and then if we would
want to set up the array using array from method because essentially this is what it's doing.
So when we use array from method we're setting up a new.
All right.
And what's really cool about from method that if we pass in the object with a length property it's going
to create an array with that many items.
So in this case we're gonna go with length and length is going to be the number of pages.
So I'm going to have the array with this many items in this case this is gonna be before in other case
that would be three to one.
I don't know.
Again twelve or whatever.
So we're gonna have a length and that is going to be equal to number of pages.
So we're going to set this equal to number of pages.
And what's also cool about this from method that we have a second argument oh we have the first one
where we pass passing what we would want to use to create our new or a general case again was object
with a length property.
And the second one is a map method that allow us to iterate over our array and it works exactly the
same way how we have a regular map method where we can have access to things can have the access to
the item itself.
And the second one is in fact the index.
In this case we don't really care about Nero them but in next video when we do a bit different setup
you're going to see why index would matter because in this case we're going to use a splice method and
then in the next video we're going to use a slice.
The difference would be that Splice is going to in fact mutate the original right which is sometimes
not the best case scenario.
That's why I'm going to show you both of them.
So what happens here.
Well I'm gonna iterate over my array but I'm returning.
So each and every time I'm gonna run this function I'm gonna be accessing one of the items again I have
access to the item as well as the index.
Now in this case I don't care about either of them but what I would want is right return and I'm just
going to type in hello world and you let me see that whatever we are returning from this function is
going to be added as our item just to show that we're going to go with console log new products.
And you're clearly going to see that now I have the array of four items.
Now why I have four items because that of course is number of pages.
That is the value for my link property.
That's why I have four items and then whatever I return from my math method.
Well this is gonna be the value.
So now let's make things interesting because having the array of hello world is nice but what I would
really want.
Well I would want to badger Nate my product.
So how this is going to look like.
Well from the array I'm going to return products then we have a splice method.
And what happens would splice we need to say where we would want to start.
And how many items we would want to remove from the original array.
Please keep in mind that with each iteration a product array is gonna get smaller.
So the one that we're passing in and where I would want to start well on one start from the beginning
of the era.
How many items I would want to remove.
Well how many items I have per page I believe I have four.
So that of course is my variable.
So I'm just gonna go with items per page.
Now check it out what is going to be the new products right now.
It is going to be an array of arrays and then each array is going to have Max for items.
But of course the last one if we don't have 16 items in our case if we don't have the full page then
this is just going to have three.
So each iteration.
What I'm doing is I'm making my product array smaller by running the splice method.
I start from the beginning of the array and I remove with how many items I have per page you're at five.
Then of course you would remove five items if you have one.
Then you would remove one item and just to reiterate what's happening.
So we're passing in products that we have fetched from the API we came up with how many items per page.
We would want then we need to calculate how many pages we're going to have.
And again this is going to change depending on how big is your product array and how many items you
would want per page.
Again we're just doing the math operation we using the math ceiling because we always want to have a
round number for pages it doesn't make sense to have three point five pages you'd want four pages and
then of course the last page if it doesn't have full amount of items.
Well just going to display I don't know one or two items or whatever items fit in that page and then
we create a new product array where we use array from within the array from we first need to say what
we're going to use to create our Rea.
And one of the options is to have an object with a link properly and of course the number of pages is
going to be our length property and then we have a map method which iterate over each and every item
in that array and then wherever we're going to turn from that function is going to be placed within
that item and in our case we're using the splice method which again mutates the original products array
and we just run products splice and then we have where we would want to start and we always start with
zero index and then we're just removing whatever items that we have per page.
So in since this case we have for first iteration I remove four items next for Flanagan four and last
one since I had only 15 items it had only three.
So just one.
Okay.
So grab me the last three items and then of course I have the new product.
Now I'm not going to return right now to new products because I want to show you another way how we
can do that using this slice method which does not mutate right.
And then we're going to spend one video of accessing the information because please keep in mind right
now it's not anymore a simple array.
So it's not like just passing saw it and you're good to go and in fact we're going to have to refactor
our code a bit because remember when we access sorted within the page product there was nothing said
about array of arrays.
Our initial setup was that sword was just a simple array.
But now of course we have array of arrays.
And what you can also clearly see is that we're mutating the original array.
Why.
Well because notice we only have filters why we have filters because there's no items within the product
when we're returning.
So what happens.
We have the products then we run product splice and then we return the product.
However there's nothing left within the product because we were mutating the original product.
All right.