Hello and welcome back.
Today we're going to be discussing how
to create this pagination for our flat list that we have been talking about.
So great, what we're going to need is a pagination function and we're going
to have to control the state of these items as well.
But we are going to be getting the whole
list of categories from our Reducers still and we're going to have to define some
initial states so we're going to need to use state for those.
I'm just going to sort the selectors
and dispatches so that they're exactly visible as we need them to be.
And then what I want to do is create
a content for category pages here and a setter for category page.
And by default, let's say the categories
are on page one and then what we're going to need is
the truncated list of the items that should be visible and as the user is
going to be scrolling we're going to be adding more items as needed.
So we're going to say that we're going
to need a category list and a setter of this category list.
And initially, it's going to be empty,
and now we're going to have to use this category list here instead of categories.
And that is going to get rid of our flat
list because there's no data to be displayed.
But what we're also going to do is define how many items of the categories should be
displayed on our page at the initial state on the page one.
And as the users call, how many items per page do we want to get.
So I think if we say that category page
size for each page is four items should be good enough for us to see the results.
And then what we need to do is we're going
to have to build this pagination function so I'm just going to call it pagination
and we're going to say that it takes the items list that we're paginating
through and it needs a page number that we're on and that it needs page size.
And then we're going to create a function
that gets the starting inter and the starting index is going to be page
number minus one page size and the ending index is going to be
whatever starting index was plus the page size so that we get that many elements.
And then let's check that if starting
index is more than or equal to the whole list of items that we have,
then we just want to return an empty array because there's nothing to return.
And otherwise we're going to use the items
and slice it and give it the starting index and give it ending index so that we
get exactly the part of the array of categories list
that we're going to be using that represents exactly that page's items.
So then what we're going to have to do is
we're going to have to display some items on the page load and we're going to use
effect for that and we're going to say that on page load
set the category list to pagination and let's give it initial setup.
So let's give it the categories categories list.
Let's say that page number is whatever
category page is and let's say that page size is whatever category page size is
and then we're going to have to increase the category page because we're going
to be fetching the data for the first page already.
So we're going to say set category page two, previous take plus one.
Now if we save this, well first we need to import the use effect.
If we save this, let's check that we're using category list here.
Great, we should be able to see the first four items.
But when we scroll, nothing is really happening.
We don't have anything for the pagination function here.
So what we need to set up from our
previous flat list knowledge, I hope that you do remember.
If not then you can always hop back
to that video where we first explored our flat list.
We're going to need an on end reached
threshold and we're going to say that it's 50%.
And whenever the user scrolls through the 50% of the items that they have
displayed, we're going to fetch more items for them so that they don't have to wait
up on the fetch once they completely reach the end.
And then we're going to say that on end reached we're going to call a function.
And what this function will do is first
of all get the new data and to get the new data we're going to use
pagination and we're going to pass it the categories list,
we're going to pass it the current page number and we're going to pass it
category page and we'll pass it the category page size.
So this should get us the new data.
But then we want to use this new data to set the category list, right?
So we're going to say if new data length is more than zero and it did return us
something other than an empty array, then we want to resend the category list
and we're going to grab the previous state and we're going to say return an array
with all the items in the previous state plus the new data.
And also we're going to have to update
the page so that we're ready for the next fetch when the user scrolls more.
So we're going to say set category page to previous state, previous state plus one.
So now let's say that we console log here, that user has reached the end and we are
getting more data for page number and then category page.
And now let's save this
and let's reload our application and we see that once we reload.
We have the first four items here.
But if we start scrolling and we scroll
through the half of the items, we're going to see user has reached
the end, we're getting more data for page number two.
And if we scroll more and we reach halfway through our data again,
we're going to see that we're getting more data for page number three.
And that's going to continue so until we reach the end and we see the arts
and craft supplies, which is our last element here.
And actually if we console log categorylist length,
which should tell us how many items are inside our category,
we should be able to see that it increases up to 13.
And
we did get this item many more times because we don't control when we're
loading the data, which we technically could.
So we could say that we have an is loading
and set is loading categories and set is loading categories here which has a state
of false here and we could say that set is loading categories here is true
and then once it is done with that, it is false again.
And then what we could do here is the same.
Let's set is loading categories to true
and then let's set is loading categories
to false and here we can have a check and if we're already
is loading categories, if it's true we can return and not do anything.
So now if we reload our application again,
we can see that even if we scroll through
really fast, we're going to be only loading the categories
when we're not actually calling and updating the categories already.
So we have a list of 13 items here and if we go here, we actually have 13 items here
as well in our reducer, which means that our
scrolling is working just fine and we're able to paginate through
the items and we're able to click on the items and activate them.
So this is great.
We're all done with paginating our flat list and what we're going to do
in the next video is set up a new reducer for our donation items.
And I can't wait for that because our categories are actually going to control
which donation items are going to be visible on the screen.
So thanks so much for watching and I'll see you in the next video.