My job.
I think we can start stretching our memories now before we start any work in the context.
Yes, I would want to navigate you home and display two components.
One is going to be form, and the second one is going to be the movie's component.
So essentially, the way it's going to work, we're going to have the form where, of course, we type
our query and then in the movie's component, we will display.
Now, both of them will use the context.
Yes, that's the whole point.
Why we're setting up our global context so that I, I don't have to do the prop drilling where I'm passing
from one component to the next one, even though the one component in the middle doesn't really need
that info.
So in this case, yes, we have one component.
But to tell you honestly, the moment we render form and movies, we're done in this component.
There's really not much that we can do anymore in here.
So we're going to go with one that is going to be our first component.
And then we have a movie component.
We serve it.
And now in the home page, we should see something different.
Now, of course, we don't see anything because I'm at the single movie, but if I navigate to the local
host or the home page, then of course I have such form and movies component.
So leave the search form alone for now and we'll just deal with getting some movies.
So what I would want is to close the sidebar and then we're going to navigate back to the context of
jazz.
So we already have the end point.
That's an awesome start.
So now of course, I can start working with the component with the app provider.
And here again, we get the children and we make sure that we pass the children down and we actually
render them because otherwise you won't be able to see anything.
And as far as the value.
Well, that's the one that we use to pass our data.
And of course, in this case, we just have the dialo.
So if you would like to test it, of course, you can navigate to any of those components, the movies
or the form.
And I already imported the EU's global context.
And if you would want to see whether your functionality works, just go here with CONSED and then I'll
call this data.
And that is going to be equal to a huge global context.
And then, of course, I need to invoke it.
So if you cancel log there, you should see Halo on screen.
So I think I will close all the tabs as far as the API because I think we are in good shape.
We will recover that.
And if you take a look at the star, you should see the halo in the console.
And what that simply means is that once we have our global context anywhere in my application, I can
just import my U.S. global context.
OK, then invoke it.
And whatever data I'm going to be passing from the context.
Yes, well, I'll be able to access.
Correct.
And at this point it is just silly.
A little hello.
But don't worry, we're just going to get way more complicated than that.
Now what is next?
I think I'm going to start by setting up the state values in my context.
That's going to be my first step.
And essentially, I have four values.
One is going to be for loading.
Since we're fetching data, then there's going to be one for error, because this is going to be interesting
application where we are getting specific errors back with our is too many requests, whether that is
that no more, we've matched the search and all that kind of good stuff.
So that's why there's going to be also a error state failure.
Now, I also have movies since of course I would want to render my movies and we already know that most
likely that is going to be an array and then the query because remember, we will be typing something
eventually in the input.
So let's start with loading.
We go with is loading and then we go with set is loading, of course, loading on line that is equal
to use and then state and we pass intro.
So by default we always are going to be loading so const and then error.
Now error is going to be an object because there's going to be different messages.
So we're going to go set error.
And that one is equal to you state, and then I'll have my default one, where there's going to be a
show property, which by default is going to be false.
So we're not going to display that.
And the second one is a message.
A message, of course, is going to change.
That was the whole point.
Why we're setting this up as an object and we have movies and the query.
So we'll go with concert and movies, online set movies.
OK, good.
And then, of course, that is going to be equal to my U.S. state.
So I go with your state and it's just going to be an empty row.
And then last thing is the query where as we're typing something in the input value will change.
But since I would want to display some movies by default, so it would go back noticed, once you refresh
the application, you're getting some kind of movie.
I will right away have my value as a Batman.
Like I said, I'm not the biggest movie buff, so that is pretty much the only movie that I know, meaning
I'm overexaggerating, of course.
But as far as the name, that is probably the easiest one.
So I'm going to go over here with CONSED online query and I'll set some query and we're just going to
go with Years State and in my case I'm going to go with Batman, so I'll save it.
I have my state values and since we have done that already quite a few times out right away, set up
my first movie function more.
Of course I have the URL.
I just need to construct it to get specific movies.
In this case, of course, that is going to be movies about Batman.
So we go here first.
I guess with usufruct doesn't really matter.
The order is relevant again.
We have done that quite a few times and for the time being I'll just say Ampera.
However, eventually there's going to be a query, but I would just want to cover why I'm out of there
and my only function name is going to be fetch and line movies.
Now, I'll also eventually set up the URL.
So for the time being I'm just going to go with Template String and then we'll go with API and then
end.
Don't worry, of course we'll have to add something here, but for the time being we'll just pass this
one in here.
And then of course we have our memory.
So we got Consed and then fetch then movies.
That is my function and in this case I would want to set it up that I pass in the euro.
So yes, of course I can pass it directly, but I just thought that to change it around and pass this
URL as a parameter.
Now as far as logic, well again remember that eventually we will run this function every time we type
something in the input.
Correct.
So what I would want is when I'm searching for that new movie, I would want that loading to be displayed.
Correct.
So that's why every time we invoke the function, I'll start by set is loading and I'll start at the
true, even though we're loading by default.
Again, the reason why we're doing that, because there's going to be an input and every time we type
something in input, we want to invoke this function.
And then once I invoke it first, I would want to set loading strew to display the user that, listen,
we are loading then again for no particular reason.
Just so we can remember how we did that, I'm going to go with try and catch.
And of course, I would want to set it up.
And I think that's something that I missed out.
So this is going to be a function and I want to use the built and fetch API.
So we go online response here and that one is equal to await and then fetch.
And of course I'll be using the URL as fast and as a parameter.
So I pass it here as a parameter.
I set up my fetch and where I have the user, of course I pass in the API endpoint.
So that's my route and point.
At the moment.
I still need to construct a little bit, but for the time being that's my route endpoint and I'm waiting
for response.
And then I'm going to go with data and of course I'll set that they are equal to your response and land
adjacent.
And then I would want to console log data just so I can see what is happening and remember the API.
So at the moment we have the root endpoint, correct, where we have the euro and then the API.
But in order to construct it, why did we need to do?
Well, we needed to add and and then we have the URL parameters.
So in this case, I would want to go with S, so I would want to search and of course all set it equal
to whatever my query is now at the moment.
What is the query.
Well in my case that is Batmen might be in your case that is Avenger's or Superman or whatever.
So are you set up this URL by adding the parameter offers so you'll be searching online?
I would want to pass in my query, in my case, Batman and also our right away and the query in my dependency
here.
Why?
Well, because I would want to run watch movies every single time when I type something in input.
Correct.
And then I also will set up the log.
So we'll go here with a log.
And of course I'll just cancel log the error.
We will say it.
And now let's take a look at what we're getting back as far as data.
So I'm going to go to my starter and notice here.
I have a search, I have array, and that gives me back ten results.
And not, by the way, I'm going to navigate two movies.
And I don't think we need this data at the moment.
Eventually, yes, we'll get something there.
But the moment that comes along is just in our way.
And then what's interesting about this API, that they have the property names capitalized.
So we have the search and that is there.
And then also we have total results and the response is true.
So if we know that response is beautiful, we, of course, have the right.
Now, I also would like to showcase that.
Of course not always that response will be true.
So if we're going to go, for example, we want a nice letter n now of course, the response is equal
to false.
And as far as the error message, well it just says here movie not from.
So we will need to deal with that.
And how do we deal with that.
Well in the try where we're getting there, of course I would want to check well what is the value for
response.
If the response is true, then I would want to do one thing.
And if the response is not true, meaning it is false, then of course I would want to set the.
So in this case, I'm going to say if I'm not data and then dot and then remember the property names
are capitalized.
So that's one got you need to remember about this API.
So I'm going to set this equal to true.
So I need to make sure that the actual casing matches.
Exactly.
Otherwise it's not going to make sense.
And then we go with set movies and we're passing data.
So my object and then I remember it was in the search.
Correct.
And then also I would want to set my error to be false because again, we will be typing.
So as you're typing notes here, for example, in this case says movie not found, but if I actually
get the movie, I would want to remove that error.
Correct.
It doesn't make sense displaying it.
That's why when we set up set movies and data that search and we also want to go set error and outside
equal to false.
Now, of course, this is an object.
So in here I go would show up on false like so.
So.
Go with shovels and then as far as the message.
Well, I'm just going to say message is equal to empty strength, then I have the false one as well.
I go else and then set error.
So this is the case where if the response is not true now, of course, I would want to display that
error.
So again, we pass in the object and I say show is equal to true.
OK, so, um, as far as the message we go with whatever message that we're getting back, and if you
want to take a look at the message, you'll see that it is in the error property.
So we go back and we say messages equal to my data and line error.
OK, so now last thing that I would want still within my try, I would want to say set is loading and
that one is equal to false.
We it and we should have the successful Frege function where we pass in of course the URL now we constructed
the you are all by setting up the root endpoint plus our as parameter we is the query.
And then of course if there's an error when displayed, if we successfully get the moisture then of
course we get them always.
So now the last thing before we start working in the moon, which component are we want to pass all
those things down.
So when I have the value, I'm going to go back to the jobs plan, sets up the colors, and then I would
want to pass in the object.
What am I looking for?
Is loading that must add value.
Then I would want the error if there is one.
And also I want to get all the movies that I'm getting back.
So that is my error and also the query.
And in this case, I'll directly pass insectary.
Remember, previously we were setting up the functions and then in that function we call this set query.
Well, since there's not much functionality in the function, I just went the route where I'm passing
in the whole function.
So set query and then of course we use it in my search form.
So query and then set query.
And once we're done with our context API, I think we are in good shape.
Where, of course, we can start working in the movies component and display some movies and of course,
eventually we'll get to the search form as well.
So I think I can just make this one a little bit bigger because now it will matter what we say.
And let's start working on a movie component.