1 00:00:00,420 --> 00:00:00,870 Not bad. 2 00:00:00,900 --> 00:00:07,340 We have our infinite scroll in place, so now, of course, we can focus on our form. 3 00:00:08,040 --> 00:00:12,750 So what I would want is to add some kind of search term. 4 00:00:13,440 --> 00:00:20,940 And then once we click on Submit, we're fetching images that, of course, reflect of that search term. 5 00:00:21,480 --> 00:00:28,830 And I think if we're going to start with API documentation where we go with search here, we have search 6 00:00:28,830 --> 00:00:29,370 photos. 7 00:00:29,760 --> 00:00:36,780 And then again, the URL is going to be a bit different where instead of the end point, the root endpoint 8 00:00:36,780 --> 00:00:41,120 point and then plus photos between them, we place search online. 9 00:00:41,130 --> 00:00:45,090 Of course, we're going to have query of what we are searching. 10 00:00:45,600 --> 00:00:51,510 So we go with search photos and then question mark, of course, and then we go with query. 11 00:00:51,720 --> 00:00:56,160 But for the query, of course, we would want to pass in that search term. 12 00:00:56,410 --> 00:01:01,030 And yes, we'll also use the pages and you'll see in a second one. 13 00:01:01,380 --> 00:01:03,880 So that should be the general setup. 14 00:01:04,260 --> 00:01:07,260 Now, of course, I'm going to navigate back to my document. 15 00:01:07,510 --> 00:01:11,670 And first, I would want to set up that state value for the form. 16 00:01:11,820 --> 00:01:13,370 And that is going to be my query. 17 00:01:13,770 --> 00:01:19,140 So we need to understand that, of course, we can have the input and then I'm going to be getting the 18 00:01:19,140 --> 00:01:29,820 value from the input and I'll append to my YORO because now I have the specific URL for the search and 19 00:01:29,820 --> 00:01:31,560 then I just need a question mark. 20 00:01:31,560 --> 00:01:38,710 And then remember the parameter name was query and I'll set it equal to whatever I'm typing in the input. 21 00:01:38,940 --> 00:01:43,260 So for now I'll just remove it since we'll set up a separate variable for that part. 22 00:01:43,270 --> 00:01:51,690 We're going to go with const and then query, so query and then remember that query and that one is 23 00:01:51,690 --> 00:01:56,130 equal to your state and then it's just going to be an empty string. 24 00:01:56,640 --> 00:01:59,940 Then of course we need to navigate to our form. 25 00:01:59,940 --> 00:02:02,790 And remember, we need to add two things. 26 00:02:03,030 --> 00:02:07,780 We need to set up our value so we can always show our state value. 27 00:02:08,030 --> 00:02:09,990 And second one is on trend. 28 00:02:10,350 --> 00:02:14,760 And of course, why we're doing that, because we would want to have the controlled input. 29 00:02:15,030 --> 00:02:20,700 So value will be equal to much the value of query and on change is going to be equal to my our function 30 00:02:20,910 --> 00:02:22,720 of pass in the object. 31 00:02:22,740 --> 00:02:25,490 And so I would want to get the value from the input. 32 00:02:25,740 --> 00:02:32,920 So we go with set query and then we pass event target and then also value. 33 00:02:33,360 --> 00:02:40,200 So as we're typing something in the input, of course we're changing the state value and we can always 34 00:02:40,200 --> 00:02:43,860 double check that if we navigate to the bigger browser. 35 00:02:44,220 --> 00:02:51,030 And I'm going to go with components and if everything is set up correctly and now I have the state value 36 00:02:51,090 --> 00:02:57,180 of the query that is reflecting exactly what I'm typing in the input. 37 00:02:57,330 --> 00:02:59,850 And that is an awesome, awesome start. 38 00:03:00,330 --> 00:03:03,090 Then we would want to go back to our project. 39 00:03:03,660 --> 00:03:10,310 And what we're looking for is this Futcher function, because we need to understand that in the fetch, 40 00:03:10,650 --> 00:03:13,680 of course, all have to change a little bit. 41 00:03:13,830 --> 00:03:19,820 Our YORO, because we have one URL where we're just getting a list of photos. 42 00:03:20,250 --> 00:03:21,770 So that's going to be our default setup. 43 00:03:22,110 --> 00:03:28,830 But then there's going to be another one when actually the user type something insert so. 44 00:03:29,700 --> 00:03:37,800 Inside of the vetch images function, what I would want to do is set up another variable, so I have 45 00:03:37,800 --> 00:03:41,280 one for the page now, set up one for query. 46 00:03:41,580 --> 00:03:46,560 So I'm going to set CONSED and then the value will be neutral and then query. 47 00:03:46,800 --> 00:03:50,190 And again, I'll use my template literal again. 48 00:03:50,190 --> 00:03:52,120 I'm going to use the app because that's how we are. 49 00:03:52,210 --> 00:03:58,760 These your parameters and we're going to go with query is equal and then mystate value. 50 00:03:59,010 --> 00:04:01,050 And of course I'll pass in the query. 51 00:04:01,590 --> 00:04:03,330 And here's the big thing. 52 00:04:03,900 --> 00:04:09,890 I only would want to use this URL if there's nothing in the query. 53 00:04:10,500 --> 00:04:16,620 So if there's something already in input, of course I would want to use this Yoro the search. 54 00:04:17,070 --> 00:04:21,890 However, if there's nothing there, then of course I would just want to use my default setup. 55 00:04:22,110 --> 00:04:26,450 So instead of just setting up your URL to be this one value, I would want to check. 56 00:04:26,460 --> 00:04:34,380 Hey, listen, if there's something in the query, so essentially if the query is empty, then I'll 57 00:04:34,380 --> 00:04:36,320 use my default Sapporo. 58 00:04:36,600 --> 00:04:42,360 However, if there's something already in query and of course I'll construct that, you are all a bit 59 00:04:42,360 --> 00:04:42,810 different. 60 00:04:43,140 --> 00:04:44,670 So say if query. 61 00:04:44,880 --> 00:04:50,180 So if there's something there, then of course the URL is going to be equal to a new value. 62 00:04:50,520 --> 00:04:52,170 So have my template string. 63 00:04:52,530 --> 00:04:55,490 I'm going to have to use this search if you are instead. 64 00:04:55,950 --> 00:04:57,470 So let's access that value. 65 00:04:57,510 --> 00:05:00,450 So we're to search your URL then. 66 00:05:00,450 --> 00:05:05,370 We still need that client ID and that's the reason why we set up everything in the variables. 67 00:05:05,670 --> 00:05:07,160 So we go with clientelism. 68 00:05:07,530 --> 00:05:14,490 Then I also have a page because pages will be changing since I also would want to set up the functionality 69 00:05:14,730 --> 00:05:16,980 when the user searches for the cat. 70 00:05:17,250 --> 00:05:23,700 I also want to display multiple pages and that's why I pass in the variable off your page. 71 00:05:24,060 --> 00:05:25,560 This one over here. 72 00:05:25,950 --> 00:05:31,740 And by the way, I just noticed that I have a big fat typo actually there when apologies would go with 73 00:05:31,740 --> 00:05:32,760 you, old page. 74 00:05:32,760 --> 00:05:35,000 And now you are all page here as well. 75 00:05:35,400 --> 00:05:40,140 Make sure that you change that because otherwise I had it the opposite way. 76 00:05:40,530 --> 00:05:43,800 And lastly, I'll pass in that query. 77 00:05:44,040 --> 00:05:50,400 So the query variable that holds the value of my query and the parameter. 78 00:05:50,700 --> 00:05:52,020 So set it up over here. 79 00:05:52,620 --> 00:05:59,930 By the way, I have too many signs here and I'll pass in the euro and then query. 80 00:06:00,420 --> 00:06:02,690 So that is our URL. 81 00:06:03,030 --> 00:06:12,090 If there some query or if there's no query, then we just go with our basic setup, the one that we 82 00:06:12,090 --> 00:06:17,310 already had Manale client idea and then the You are HelpAge. 83 00:06:17,850 --> 00:06:18,750 OK, that's good. 84 00:06:19,110 --> 00:06:20,870 But there's going to be another Croucher. 85 00:06:21,270 --> 00:06:22,770 I'm not another Gotcher. 86 00:06:22,770 --> 00:06:28,410 Is that when we'll get back data when we have the query. 87 00:06:28,410 --> 00:06:32,810 So when we're searching the actual data is going to be in a different place. 88 00:06:33,240 --> 00:06:40,290 So before we do anything, let's just go with council log like so um, let's take a look at the data. 89 00:06:40,860 --> 00:06:47,460 And in order not to get a big fat error, I'm just going to comment this up for a second and eventually 90 00:06:47,460 --> 00:06:48,930 we'll set this up moment. 91 00:06:48,930 --> 00:06:54,240 We don't have any images, but we should be able to type here. 92 00:06:54,540 --> 00:06:55,110 Hello. 93 00:06:55,320 --> 00:06:57,060 And of course, we can fetch images. 94 00:06:57,360 --> 00:07:01,680 Now, the problem is going to be that, of course, we don't have the handle submit. 95 00:07:01,950 --> 00:07:04,040 That's something that we would still need to set up. 96 00:07:04,320 --> 00:07:07,230 So at the moment, I have the hello, by the way. 97 00:07:07,230 --> 00:07:12,090 We'll see whether we're getting anything as far as photos of that reflect. 98 00:07:12,090 --> 00:07:15,450 Hello, I'm not in the handle submit function. 99 00:07:15,450 --> 00:07:20,430 We created all the way in the beginning now would want to fetch images. 100 00:07:20,790 --> 00:07:23,970 So I will invoke this function. 101 00:07:24,360 --> 00:07:25,500 So I invoke it. 102 00:07:25,800 --> 00:07:28,740 And of course now I wiped out my hello anyway. 103 00:07:28,740 --> 00:07:34,800 So let me go with Kath and let's submit that so we have loading and I get some kind of there. 104 00:07:35,280 --> 00:07:43,230 Now what I'm trying to show you that in council we're going to have the data, but that is our initial 105 00:07:43,230 --> 00:07:43,620 Frege. 106 00:07:43,920 --> 00:07:50,160 So if we'll add some kind of value here, you'll notice that the response is a bit different. 107 00:07:50,700 --> 00:07:53,820 So by default, we get these ten values correct. 108 00:07:54,180 --> 00:08:00,930 But then when we're searching, notice how our array is actually sending in the object and the property 109 00:08:01,170 --> 00:08:02,190 is the result. 110 00:08:02,640 --> 00:08:09,660 And the reason why I comment everything out in our fetch images function is because, of course, we'll 111 00:08:09,660 --> 00:08:15,090 get a big fat error because I'm spreading out the data, which is going to be an object. 112 00:08:15,420 --> 00:08:21,300 So now, of course, we'll have to be a bit more vigilant of what we're actually getting back. 113 00:08:21,540 --> 00:08:22,230 And here. 114 00:08:22,230 --> 00:08:24,450 Let's just start by if query. 115 00:08:24,840 --> 00:08:29,100 So if it exists and of course, my data is. 116 00:08:29,230 --> 00:08:35,190 In a different place, my photos essentially are in a different place, so in here, heroes say return 117 00:08:35,500 --> 00:08:41,500 and then I would still want to spread out old photos of comma and now I would want to spread out data 118 00:08:42,160 --> 00:08:43,940 and then dot results. 119 00:08:44,170 --> 00:08:44,590 Why? 120 00:08:45,070 --> 00:08:48,940 Well, because we can see if we just get default images. 121 00:08:49,240 --> 00:08:50,800 And of course, we just get the data. 122 00:08:51,070 --> 00:08:53,470 We just have the array of images. 123 00:08:53,740 --> 00:09:00,580 And if we're searching, so if there's a search query, then of course we're getting back the object. 124 00:09:00,860 --> 00:09:04,240 That's why we go with object and then we're looking for results. 125 00:09:04,330 --> 00:09:11,200 If, however, this is still default, we still have the functionality of alse and then we're returning 126 00:09:11,200 --> 00:09:16,490 from this function, old photos and then comma and then we separate out the data. 127 00:09:17,020 --> 00:09:21,130 So if we have default images, this doesn't change. 128 00:09:21,520 --> 00:09:23,690 Please keep that in mind if our research. 129 00:09:23,710 --> 00:09:27,220 And then, of course, this value also changes.