Not bad, not bad.
We can get some default movies, meaning we have some kind of query that has the string and of course,
we can fetch for those movies now because we would want to make are dynamic where we have the input
form.
And as we're typing, we're changing the value in the context.
So we're changing the square eviler.
And as we're changing the value, remember, we are querying for the movies.
Correct, because we have our use of independent.
All right.
I have a query.
So every time this will change, I'll fetch for new movies with the same end point.
Just query, of course, is going to be different.
So I'll change this back to my movie, my Batman movie.
And of course, I would want to navigate to the search component.
We open up the sidebar and we're looking for the search for the moment.
We just have the hook imported U.S. global context, as well as the having to do with search form.
Now, what I'm actually looking for from the global context.
Well, in the context, I have query.
And I would want to set that query to be my input value, then I also would want some query because
as I'm typing, of course, I'm going to have my own change.
So this is going to be controlled input.
And then as I'm typing, of course, I'll set the value for the query equal to whenever I'm typing.
And the last thing is going to be error, because you'll notice in complete application that I'm displaying
errors over here because I just thought that it wouldn't look very good if I have to search form and
then if I cannot find the movies, then I'm going to go back to this text.
So I'm still displaying those old movies that were successful.
But if there is an error, there's going to be right below the input.
And this is going to be dynamic where we'll display exactly what comes back from the API.
So now, of course, let's navigate through our search form.
And once we have covered the basics, what we're looking for, we're going to go with query, we're
going to go with that query and we're going to go with error.
So those are the three things we're looking for, a service equal to my global context.
Of course, I will invoke it.
And where I have the heading to this will become my form, the class name here.
And we're going to go with search ununiformed and all right away set up on submit.
Now, why am I sitting this on?
Submit is simply because if the user presses enter button, then of course I wouldn't want to refresh
the page.
That's why I will go on submit and then we'll have our error function and we'll be looking for event
object and then event prevent default.
We invoke it and that way we avoid that scenario again.
I'm just skipping ahead because we have covered this already before.
So I just want to wait in line function and I'm in good shape then.
Instead of the forum we're going to go with heading to and there will have some kind of tax, so inside
of the form, let's say here heading to online, as far as the tax, I'm going to go search online movies,
movies like So Servet, there it is.
And then right below it, we're going to go ahead and put it online.
It's going to be a just text input and we're going to add a class name for styling and the name will
be form input.
So and then remember, I would want this input to be controlled input.
So what do I need to do?
I need to set up value and that one won't be equal to my state value, meaning the local state, whether
it actually will be equal to McQuary.
So state value that is coming from the context.
So and then the second thing is the on change.
So again, we go with our own change, we pass in our arrow function.
And then remember, we had access to the event object and I'll right away call my secretary.
So there's no function in between anymore.
I just take the function that controls directly the state value and I say that query and I pass an event
target and the value and once I save it, we should see the input and of course we have the text.
So as I start typing, notice we're getting the movies, but we're not displaying the error.
Correct.
We just look for moreish.
If we can get movies, of course we display great movies.
If we cannot get the movies, we still display the old ones.
So we're not changing the current.
All right.
So right below the input, I actually would want to also display the error.
So I'm going to go with error.
And remember, error was an object.
Correct.
So I only would want to display this error if the show property is true and if that is the case, then
I would want to show the text that is coming back from the API.
And in here I'm going to go with Def on line.
The class name is Error and then instead of there, we're going to go with error and message like so.
So we say it.
And then again, by default we get bad memories.
And in this case, I'm going to navigate to the bigger screen.
So my Batman movie.
And then once I start typing notes, this is the error.
So now I have movie not found.
However, as I keep on deleting the leading, eventually, of course, I will get my movies so that
I remove the error and I just display all the movies again.
We keep on deleting now we have different errors, but if I go with a different course result, there
is now I have the movies, so that should be set up for our input for research form as well as our movies
component.
So now of course, we can start dealing with this one with a single movie component.
Now, before we go any further, you don't have the code along right now, but I'm going to show you
what kind of error you might get at some point in your application, as well as my complete one.
You see, I'm just getting thousand requests per day.
I think that was the limit.
And I didn't sign up for the page down or nothing like that.
So when you go to complete application once in a while, you might see that, well, there's no more
requests.
So what I'm going to do right now is I'm going to grab my key.
My old key for sure, will have no more requests.
Again, you don't need to do this.
I'm just showing you what kind of error you're going to get.
When I get back to my project, I have a envy and I'm just going to paste this value instead.
Again, I do need to restart the server and we're going to go with NPM and and start like so.
And once we open up our dev server, there should be an error that there's no more request left.
OK, so hopefully their server spins up somewhat fast and then once we refresh the application, we'll
see that this is going to be the case.
If you have reached the limit again, just to give you an idea, if in your application you get this
response or if you navigate to my complete one and you see that result as well, because, of course,
the complete application is online.
So a lot of students go there and check out the application.
And of course, in the process, my requests are being used.
So I'll stop the video next video, start dealing with a single movie.
Of course, I'll switch back to my current one so we can make successful request.
But hopefully it is clear that, yes, there's also going to be an error that you.
We have reached the limit as far as your requests, because you get, I believe, a thousand requests
per day when you sign up for the free one.
If you go with and I'm not aware how many they give you, but it is obviously more.