Not bad.
We have our infinite scroll in place, so now, of course, we can focus on our form.
So what I would want is to add some kind of search term.
And then once we click on Submit, we're fetching images that, of course, reflect of that search term.
And I think if we're going to start with API documentation where we go with search here, we have search
photos.
And then again, the URL is going to be a bit different where instead of the end point, the root endpoint
point and then plus photos between them, we place search online.
Of course, we're going to have query of what we are searching.
So we go with search photos and then question mark, of course, and then we go with query.
But for the query, of course, we would want to pass in that search term.
And yes, we'll also use the pages and you'll see in a second one.
So that should be the general setup.
Now, of course, I'm going to navigate back to my document.
And first, I would want to set up that state value for the form.
And that is going to be my query.
So we need to understand that, of course, we can have the input and then I'm going to be getting the
value from the input and I'll append to my YORO because now I have the specific URL for the search and
then I just need a question mark.
And then remember the parameter name was query and I'll set it equal to whatever I'm typing in the input.
So for now I'll just remove it since we'll set up a separate variable for that part.
We're going to go with const and then query, so query and then remember that query and that one is
equal to your state and then it's just going to be an empty string.
Then of course we need to navigate to our form.
And remember, we need to add two things.
We need to set up our value so we can always show our state value.
And second one is on trend.
And of course, why we're doing that, because we would want to have the controlled input.
So value will be equal to much the value of query and on change is going to be equal to my our function
of pass in the object.
And so I would want to get the value from the input.
So we go with set query and then we pass event target and then also value.
So as we're typing something in the input, of course we're changing the state value and we can always
double check that if we navigate to the bigger browser.
And I'm going to go with components and if everything is set up correctly and now I have the state value
of the query that is reflecting exactly what I'm typing in the input.
And that is an awesome, awesome start.
Then we would want to go back to our project.
And what we're looking for is this Futcher function, because we need to understand that in the fetch,
of course, all have to change a little bit.
Our YORO, because we have one URL where we're just getting a list of photos.
So that's going to be our default setup.
But then there's going to be another one when actually the user type something insert so.
Inside of the vetch images function, what I would want to do is set up another variable, so I have
one for the page now, set up one for query.
So I'm going to set CONSED and then the value will be neutral and then query.
And again, I'll use my template literal again.
I'm going to use the app because that's how we are.
These your parameters and we're going to go with query is equal and then mystate value.
And of course I'll pass in the query.
And here's the big thing.
I only would want to use this URL if there's nothing in the query.
So if there's something already in input, of course I would want to use this Yoro the search.
However, if there's nothing there, then of course I would just want to use my default setup.
So instead of just setting up your URL to be this one value, I would want to check.
Hey, listen, if there's something in the query, so essentially if the query is empty, then I'll
use my default Sapporo.
However, if there's something already in query and of course I'll construct that, you are all a bit
different.
So say if query.
So if there's something there, then of course the URL is going to be equal to a new value.
So have my template string.
I'm going to have to use this search if you are instead.
So let's access that value.
So we're to search your URL then.
We still need that client ID and that's the reason why we set up everything in the variables.
So we go with clientelism.
Then I also have a page because pages will be changing since I also would want to set up the functionality
when the user searches for the cat.
I also want to display multiple pages and that's why I pass in the variable off your page.
This one over here.
And by the way, I just noticed that I have a big fat typo actually there when apologies would go with
you, old page.
And now you are all page here as well.
Make sure that you change that because otherwise I had it the opposite way.
And lastly, I'll pass in that query.
So the query variable that holds the value of my query and the parameter.
So set it up over here.
By the way, I have too many signs here and I'll pass in the euro and then query.
So that is our URL.
If there some query or if there's no query, then we just go with our basic setup, the one that we
already had Manale client idea and then the You are HelpAge.
OK, that's good.
But there's going to be another Croucher.
I'm not another Gotcher.
Is that when we'll get back data when we have the query.
So when we're searching the actual data is going to be in a different place.
So before we do anything, let's just go with council log like so um, let's take a look at the data.
And in order not to get a big fat error, I'm just going to comment this up for a second and eventually
we'll set this up moment.
We don't have any images, but we should be able to type here.
Hello.
And of course, we can fetch images.
Now, the problem is going to be that, of course, we don't have the handle submit.
That's something that we would still need to set up.
So at the moment, I have the hello, by the way.
We'll see whether we're getting anything as far as photos of that reflect.
Hello, I'm not in the handle submit function.
We created all the way in the beginning now would want to fetch images.
So I will invoke this function.
So I invoke it.
And of course now I wiped out my hello anyway.
So let me go with Kath and let's submit that so we have loading and I get some kind of there.
Now what I'm trying to show you that in council we're going to have the data, but that is our initial
Frege.
So if we'll add some kind of value here, you'll notice that the response is a bit different.
So by default, we get these ten values correct.
But then when we're searching, notice how our array is actually sending in the object and the property
is the result.
And the reason why I comment everything out in our fetch images function is because, of course, we'll
get a big fat error because I'm spreading out the data, which is going to be an object.
So now, of course, we'll have to be a bit more vigilant of what we're actually getting back.
And here.
Let's just start by if query.
So if it exists and of course, my data is.
In a different place, my photos essentially are in a different place, so in here, heroes say return
and then I would still want to spread out old photos of comma and now I would want to spread out data
and then dot results.
Why?
Well, because we can see if we just get default images.
And of course, we just get the data.
We just have the array of images.
And if we're searching, so if there's a search query, then of course we're getting back the object.
That's why we go with object and then we're looking for results.
If, however, this is still default, we still have the functionality of alse and then we're returning
from this function, old photos and then comma and then we separate out the data.
So if we have default images, this doesn't change.
Please keep that in mind if our research.
And then, of course, this value also changes.