1 00:00:00,330 --> 00:00:06,420 All right, so our functionality works once we scroll to the bottom of the page, we have some catalog, 2 00:00:06,420 --> 00:00:11,680 but of course, the main goal is to fetch images once we get there. 3 00:00:11,820 --> 00:00:12,270 Correct. 4 00:00:12,780 --> 00:00:14,110 And how we can do that? 5 00:00:14,130 --> 00:00:17,190 Well, we'll have to go back to the documentation. 6 00:00:17,850 --> 00:00:26,940 And remember, when we're searching for the photos, what were available, perhaps we had a page, we 7 00:00:26,940 --> 00:00:29,280 had per page and we had Oraibi. 8 00:00:29,850 --> 00:00:32,010 The one that I'm looking for is this page one. 9 00:00:32,670 --> 00:00:35,940 And by default, this is going to be one. 10 00:00:36,820 --> 00:00:39,500 OK, so why don't we try this out? 11 00:00:39,950 --> 00:00:42,180 We're going to navigate back to my map. 12 00:00:42,550 --> 00:00:50,410 I'm looking for the URL and in order to avoid that problem, I just need to go with and align the parameter 13 00:00:50,410 --> 00:00:53,230 name was page or so. 14 00:00:53,620 --> 00:00:57,800 And then, of course, what I would want is to have some kind of value. 15 00:00:58,180 --> 00:01:00,520 So in this case, I'm going to go with three. 16 00:01:01,180 --> 00:01:04,560 And what I'm looking for here are different images. 17 00:01:04,870 --> 00:01:05,380 So. 18 00:01:06,250 --> 00:01:10,690 I can see that, yeah, I'm getting back different images, which is beautiful. 19 00:01:11,170 --> 00:01:12,040 So here's the plan. 20 00:01:12,550 --> 00:01:19,300 I would want to come up with state variable by the name of Page and by default is going to be one and 21 00:01:19,300 --> 00:01:22,320 one in our event listener. 22 00:01:22,630 --> 00:01:30,570 Once we get to the bottom of the page, I will change that state value by the name of Page. 23 00:01:31,150 --> 00:01:39,340 And not only that, I will add that page to my dependencies so that when I'm fetching, of course I'll 24 00:01:39,340 --> 00:01:48,820 be fetching with that value of the page and I'll start simply by adding this and then page and all that 25 00:01:49,150 --> 00:01:50,950 into the separate variable. 26 00:01:51,220 --> 00:01:56,800 So I'm going to go with const and then you are HelpAge is equal and now it's constructed. 27 00:01:57,230 --> 00:01:58,510 I'm going to go with and. 28 00:01:59,590 --> 00:02:05,650 One page and one equals, and then, of course, I'll access the state variable that at the moment I 29 00:02:05,650 --> 00:02:10,420 don't have, but I'm going to, of course, remove my current setup. 30 00:02:10,810 --> 00:02:15,000 And I'm just going to say that I would want to access the U. 31 00:02:15,010 --> 00:02:16,730 RL page as well. 32 00:02:17,170 --> 00:02:20,670 And then, of course, we would want to set up the state value. 33 00:02:20,770 --> 00:02:23,320 So page and then set page. 34 00:02:23,440 --> 00:02:23,950 Correct. 35 00:02:24,250 --> 00:02:28,600 And we're going to go with your state and by default it is going to be one. 36 00:02:29,170 --> 00:02:35,260 So keep in mind our default, which won't change since by default page is number one. 37 00:02:35,290 --> 00:02:37,620 So the same is over here now. 38 00:02:37,960 --> 00:02:44,950 So we have the URL, we just add that page and we should still get the same default images. 39 00:02:45,370 --> 00:02:51,520 Now, the difference is that, of course, now when we're fetching for images, I also want to do that 40 00:02:51,760 --> 00:02:54,700 when my page changes. 41 00:02:54,700 --> 00:02:55,120 Correct. 42 00:02:55,420 --> 00:03:02,950 So we're going to go here to dependency list and I'm going to say, yeah, refresh the images when my 43 00:03:02,950 --> 00:03:03,810 page changes. 44 00:03:04,120 --> 00:03:07,770 And then lastly, where we have the event listener. 45 00:03:08,140 --> 00:03:13,000 Now, once we get to this point, of course, I would want to increase the page. 46 00:03:13,300 --> 00:03:13,710 Correct. 47 00:03:14,080 --> 00:03:20,170 So I'm going to say, yeah, once I get to the bottom of the document instead of logging it work. 48 00:03:21,010 --> 00:03:29,950 If I'm not loading and then if in our height and scrollwork is bigger than the height of the body minus 49 00:03:29,950 --> 00:03:37,150 the pixels, which was my preference, then of course I'm going to go set page and I'm just going to 50 00:03:37,150 --> 00:03:39,940 use the function just because I want to. 51 00:03:40,210 --> 00:03:42,550 And we're going to go here with old value. 52 00:03:42,700 --> 00:03:51,110 So old page and we're just going to return from this function, a old page plus one lecture. 53 00:03:51,410 --> 00:03:53,110 So plus one. 54 00:03:53,500 --> 00:03:58,940 And then once we save, we should see something pretty practical. 55 00:03:59,440 --> 00:04:06,100 So I'm going to navigate to the bigger brother now and then we start scrolling, scrolling, scrolling, 56 00:04:06,520 --> 00:04:10,170 and then we're loading and then there's a gotcha. 57 00:04:10,720 --> 00:04:12,200 And what do you think is gotcha? 58 00:04:12,220 --> 00:04:14,810 Why are we right now have this clicker effect? 59 00:04:15,280 --> 00:04:20,380 Well, if we go back north, we have data, correct. 60 00:04:20,620 --> 00:04:24,170 And I just go with set photos and then pass in the data. 61 00:04:24,450 --> 00:04:26,980 However, I already have some images. 62 00:04:27,760 --> 00:04:36,130 So if my goal is to display all the images, the moment I'm overriding, I had some initial patch, 63 00:04:36,610 --> 00:04:39,010 so I fetched initially some images. 64 00:04:39,670 --> 00:04:45,250 And then once I get to the bottom page, I'm just changing those images instead of what I would want 65 00:04:45,700 --> 00:04:49,040 is add those images to my current array. 66 00:04:49,690 --> 00:04:51,870 So initially I have a.. 67 00:04:52,120 --> 00:04:53,460 Then I have those kind images. 68 00:04:53,680 --> 00:04:59,130 And then once I scroll to the bottom, of course, I would want to add those next 10 images. 69 00:04:59,470 --> 00:05:01,330 That's why I will pass in the function again. 70 00:05:02,670 --> 00:05:11,100 And then in a functioning body, what I would want is to access old photos that is already, of course, 71 00:05:11,670 --> 00:05:13,900 online or set up some functionality. 72 00:05:14,360 --> 00:05:19,500 Now, we'll have to refactor it a little bit later because there's also going to be a query. 73 00:05:19,800 --> 00:05:27,150 However, for the time being, we can just go with a return and then dot, dot, dot and then old photos. 74 00:05:27,690 --> 00:05:31,230 So those are the current photos that I have in the array. 75 00:05:31,530 --> 00:05:35,460 And then I would also want to point out the data. 76 00:05:35,790 --> 00:05:37,700 So whatever photos I'm getting. 77 00:05:38,100 --> 00:05:41,450 So once I say now, we shouldn't have that clicker. 78 00:05:41,940 --> 00:05:45,510 So now I have all my images, my images. 79 00:05:45,780 --> 00:05:47,080 And you want to let me refresh. 80 00:05:47,100 --> 00:05:51,750 So we start from scratch and then I keep on scrolling, keep on scrolling, keep on scrolling. 81 00:05:52,080 --> 00:05:56,640 I get here, I start loading and then I get the images. 82 00:05:56,700 --> 00:06:03,810 And if I keep on scrolling, of course I'm fetching more images, I get to the bottom and then I fetch 83 00:06:04,050 --> 00:06:06,450 another set of images. 84 00:06:06,750 --> 00:06:10,050 And if you want to double check that, you can go to the network. 85 00:06:10,050 --> 00:06:14,340 That and then you'll see all the requests that were made. 86 00:06:14,880 --> 00:06:20,670 So notice we're looking for page number one, two, three and then four. 87 00:06:20,910 --> 00:06:27,810 And let me just mention one more time that the reason why we added this not loading, because once I 88 00:06:27,810 --> 00:06:33,300 get to the bottom of the page, I don't want to send out too many requests. 89 00:06:33,780 --> 00:06:36,630 I still want to wait for the previous one to come back. 90 00:06:37,050 --> 00:06:42,130 So, of course, the loading needs to be false and only then generate the new one. 91 00:06:42,480 --> 00:06:46,290 So, of course, that's how we can add images with our. 92 00:06:46,740 --> 00:06:55,230 And so once we scroll to the bottom of the page, notice we have our loading since we set up a new feature 93 00:06:55,290 --> 00:06:57,750 request and then we just get those images. 94 00:06:58,020 --> 00:07:04,080 So every time our page value will change will trigger images. 95 00:07:04,620 --> 00:07:10,640 And of course, the page value at that point is going to be already updated, whether that's one, two, 96 00:07:10,650 --> 00:07:12,120 three or whatever. 97 00:07:12,510 --> 00:07:19,320 And then again, we send out a new budget request, or in this case, of course, we have a different 98 00:07:19,320 --> 00:07:19,680 page. 99 00:07:20,070 --> 00:07:27,240 Since we have a variable and service variable, we have a parameter where we have page is equal to Page, 100 00:07:27,480 --> 00:07:33,390 and that's how we can add more images once we get to the bottom of the document.