All right, so our functionality works once we scroll to the bottom of the page, we have some catalog,
but of course, the main goal is to fetch images once we get there.
Correct.
And how we can do that?
Well, we'll have to go back to the documentation.
And remember, when we're searching for the photos, what were available, perhaps we had a page, we
had per page and we had Oraibi.
The one that I'm looking for is this page one.
And by default, this is going to be one.
OK, so why don't we try this out?
We're going to navigate back to my map.
I'm looking for the URL and in order to avoid that problem, I just need to go with and align the parameter
name was page or so.
And then, of course, what I would want is to have some kind of value.
So in this case, I'm going to go with three.
And what I'm looking for here are different images.
So.
I can see that, yeah, I'm getting back different images, which is beautiful.
So here's the plan.
I would want to come up with state variable by the name of Page and by default is going to be one and
one in our event listener.
Once we get to the bottom of the page, I will change that state value by the name of Page.
And not only that, I will add that page to my dependencies so that when I'm fetching, of course I'll
be fetching with that value of the page and I'll start simply by adding this and then page and all that
into the separate variable.
So I'm going to go with const and then you are HelpAge is equal and now it's constructed.
I'm going to go with and.
One page and one equals, and then, of course, I'll access the state variable that at the moment I
don't have, but I'm going to, of course, remove my current setup.
And I'm just going to say that I would want to access the U.
RL page as well.
And then, of course, we would want to set up the state value.
So page and then set page.
Correct.
And we're going to go with your state and by default it is going to be one.
So keep in mind our default, which won't change since by default page is number one.
So the same is over here now.
So we have the URL, we just add that page and we should still get the same default images.
Now, the difference is that, of course, now when we're fetching for images, I also want to do that
when my page changes.
Correct.
So we're going to go here to dependency list and I'm going to say, yeah, refresh the images when my
page changes.
And then lastly, where we have the event listener.
Now, once we get to this point, of course, I would want to increase the page.
Correct.
So I'm going to say, yeah, once I get to the bottom of the document instead of logging it work.
If I'm not loading and then if in our height and scrollwork is bigger than the height of the body minus
the pixels, which was my preference, then of course I'm going to go set page and I'm just going to
use the function just because I want to.
And we're going to go here with old value.
So old page and we're just going to return from this function, a old page plus one lecture.
So plus one.
And then once we save, we should see something pretty practical.
So I'm going to navigate to the bigger brother now and then we start scrolling, scrolling, scrolling,
and then we're loading and then there's a gotcha.
And what do you think is gotcha?
Why are we right now have this clicker effect?
Well, if we go back north, we have data, correct.
And I just go with set photos and then pass in the data.
However, I already have some images.
So if my goal is to display all the images, the moment I'm overriding, I had some initial patch,
so I fetched initially some images.
And then once I get to the bottom page, I'm just changing those images instead of what I would want
is add those images to my current array.
So initially I have a..
Then I have those kind images.
And then once I scroll to the bottom, of course, I would want to add those next 10 images.
That's why I will pass in the function again.
And then in a functioning body, what I would want is to access old photos that is already, of course,
online or set up some functionality.
Now, we'll have to refactor it a little bit later because there's also going to be a query.
However, for the time being, we can just go with a return and then dot, dot, dot and then old photos.
So those are the current photos that I have in the array.
And then I would also want to point out the data.
So whatever photos I'm getting.
So once I say now, we shouldn't have that clicker.
So now I have all my images, my images.
And you want to let me refresh.
So we start from scratch and then I keep on scrolling, keep on scrolling, keep on scrolling.
I get here, I start loading and then I get the images.
And if I keep on scrolling, of course I'm fetching more images, I get to the bottom and then I fetch
another set of images.
And if you want to double check that, you can go to the network.
That and then you'll see all the requests that were made.
So notice we're looking for page number one, two, three and then four.
And let me just mention one more time that the reason why we added this not loading, because once I
get to the bottom of the page, I don't want to send out too many requests.
I still want to wait for the previous one to come back.
So, of course, the loading needs to be false and only then generate the new one.
So, of course, that's how we can add images with our.
And so once we scroll to the bottom of the page, notice we have our loading since we set up a new feature
request and then we just get those images.
So every time our page value will change will trigger images.
And of course, the page value at that point is going to be already updated, whether that's one, two,
three or whatever.
And then again, we send out a new budget request, or in this case, of course, we have a different
page.
Since we have a variable and service variable, we have a parameter where we have page is equal to Page,
and that's how we can add more images once we get to the bottom of the document.