1 00:00:00,300 --> 00:00:06,650 Now we're in good shape and we're almost done, but there are two gotchas in our current application, 2 00:00:07,110 --> 00:00:08,360 so everything works fine. 3 00:00:08,670 --> 00:00:09,870 We check for the query. 4 00:00:10,110 --> 00:00:15,090 We know that if we're getting back to query, then of course, we have the object and then the array 5 00:00:15,510 --> 00:00:19,690 is in the data object and the name is the result. 6 00:00:19,720 --> 00:00:25,050 However, if we're just getting default photos, then of course we separate out the old photos and then 7 00:00:25,050 --> 00:00:26,440 we add that data. 8 00:00:26,760 --> 00:00:31,050 So I think I can remove the console plug and I'll show you both of the gotchas. 9 00:00:31,350 --> 00:00:39,170 So the first gotcha is if we type here cat and if we search for it, technically our functionality works. 10 00:00:39,570 --> 00:00:42,540 But notice how we're not changing those default ones. 11 00:00:42,930 --> 00:00:48,090 So if we do it over here, yeah, I'm getting this right and I can clear notice that I'm getting more 12 00:00:48,090 --> 00:00:51,930 items right now, but I'm not wiping out the old ones. 13 00:00:52,350 --> 00:00:59,820 And what I would want instead is that when we type something instead of just upending them to our country, 14 00:00:59,850 --> 00:01:05,660 because notice now, of course, we have 90, I would want instead wipe out the old ones. 15 00:01:06,030 --> 00:01:10,110 So, yes, we'll still use this functionality when it comes to query. 16 00:01:10,350 --> 00:01:19,800 But then if the page is number one, so if I know that I'm typing a brand new query, then I also don't 17 00:01:19,800 --> 00:01:21,690 want to wipe out the old values. 18 00:01:21,990 --> 00:01:25,220 So we'll scroll down here and we'll add one more. 19 00:01:25,260 --> 00:01:35,000 If so, say if I'm on query and the page is equal to one, then we'll wipe out the old values. 20 00:01:35,250 --> 00:01:42,780 So if page is equal to one, then instead of upending to our country where we're going to do that or 21 00:01:42,780 --> 00:01:48,180 say return and remember whatever, we're returning and we'll just say data results. 22 00:01:48,360 --> 00:01:53,280 Now, of course, in this case, this is going to become else F, of course. 23 00:01:53,580 --> 00:01:56,350 So that's why it will say here else. 24 00:01:56,400 --> 00:02:01,290 If so, if the query, then of course everything is going to be exactly the same. 25 00:02:01,770 --> 00:02:08,850 Now, one thing over here is going to be the simple fact that it's going to work or here with the dog. 26 00:02:09,060 --> 00:02:10,470 And yeah, we get the results. 27 00:02:10,470 --> 00:02:13,920 But what do you think happens when we start scrolling? 28 00:02:13,920 --> 00:02:19,230 And again, I'm going to do that on a bigger screen because what I want you to see how the values change 29 00:02:19,680 --> 00:02:20,310 are going to go. 30 00:02:20,310 --> 00:02:23,220 Dog, we're getting dog photos online. 31 00:02:23,370 --> 00:02:24,120 Let me refresh. 32 00:02:24,120 --> 00:02:26,160 For some reason, I don't see the components now. 33 00:02:26,160 --> 00:02:26,490 I do. 34 00:02:26,820 --> 00:02:29,610 And notice how the value is changing for the pages. 35 00:02:29,890 --> 00:02:35,250 So now we have, of course, page five three and then we keep on scrolling, keep on scrolling and keep 36 00:02:35,250 --> 00:02:36,160 on changing this value. 37 00:02:36,570 --> 00:02:40,500 So now of course, when we type well, it's not going to be equal to one. 38 00:02:40,680 --> 00:02:41,070 Correct. 39 00:02:41,080 --> 00:02:46,470 So when I have a new query of QUAT, then again I'm appending to my current one. 40 00:02:46,590 --> 00:02:49,170 And that's not what I would want in here. 41 00:02:50,040 --> 00:02:56,670 If I scroll down and notice where we're fetching images instead, I would want to set page two one. 42 00:02:57,120 --> 00:02:57,570 Correct. 43 00:02:57,840 --> 00:03:02,400 So we're going to go set page and set it equal to one and two things are happening. 44 00:03:02,400 --> 00:03:04,580 First of all, we are resetting the page value. 45 00:03:04,950 --> 00:03:10,590 And the second thing is we technically even don't need to call such images because we already have a 46 00:03:10,590 --> 00:03:12,510 user that is listening for the page. 47 00:03:12,960 --> 00:03:14,850 So that should work. 48 00:03:14,850 --> 00:03:17,600 But then there's one last gotcha. 49 00:03:17,880 --> 00:03:24,150 So let me save this one and let's just type over here, dog, and then we're going to keep on scrolling 50 00:03:24,150 --> 00:03:26,700 and technically we'll get dark photos. 51 00:03:26,970 --> 00:03:31,350 But notice how normally we didn't wipe out the old values. 52 00:03:31,740 --> 00:03:32,880 So that was the issue. 53 00:03:33,120 --> 00:03:35,210 So why do you think that is happening now? 54 00:03:35,250 --> 00:03:36,540 Because if I refresh. 55 00:03:37,800 --> 00:03:44,430 And if I start typing from the scratch and dog, check it out, once I submit the form, the value is 56 00:03:44,430 --> 00:03:48,070 already one, so I'm getting already page number one. 57 00:03:48,180 --> 00:03:51,930 So that's why nothing is happening and we simply need to fix it. 58 00:03:52,170 --> 00:03:55,230 If we scroll up and check out the page. 59 00:03:55,620 --> 00:03:58,320 I'll get the default one to be zero. 60 00:03:58,740 --> 00:04:07,140 So now my functionality will still work where once I submit McQuary, I'll always set my page to be 61 00:04:07,140 --> 00:04:08,850 equal to one correct. 62 00:04:09,030 --> 00:04:13,940 But my default one is zero, meaning there's going to be a re render. 63 00:04:14,340 --> 00:04:16,400 So now let's start out by default. 64 00:04:16,410 --> 00:04:18,960 I'm getting these images with page zero. 65 00:04:19,770 --> 00:04:27,270 But then if I typed the dog now set my page equal to one, so I'll wipe out the old values and then 66 00:04:27,270 --> 00:04:31,890 everything works as I keep on scrolling, I'm going to be getting my dog images. 67 00:04:31,890 --> 00:04:38,550 So of course my pages will be changing and so will be the new fetch request. 68 00:04:38,950 --> 00:04:40,070 That was the project. 69 00:04:40,080 --> 00:04:46,320 I understand that this was somewhat big, but like I warned you in the beginning of the section, these 70 00:04:46,320 --> 00:04:47,670 are advanced projects. 71 00:04:47,680 --> 00:04:50,990 Of course, there's going to be a lot of moving pieces. 72 00:04:51,270 --> 00:04:54,900 Hopefully everyone enjoyed the project and I hope to see the next one.