Okay.
At the moment, what we have is we have a fixed list of movies movie one and movie two.
This is what we done in the previous video, and we've done it like hard coded reference here as a simple
strings.
What we want to do is we want to remove that from our movie list component.
And what we want to do is we want to fetch the list of movies from our API.
And how can we do that?
If first thing first, we need to have something in our component to start fetching.
So whatever we render that component, we want to start fetching the list of movies.
And we can do it with another hook that is coming from react.
And I will use use effect.
And here so we will import use effect from here.
And we can use it inside our component.
So use effect and that will require two arguments.
First is a function we can put an arrow function here like that.
And second after that curly braces we can specify what variables change will trigger that use effect
at the moment.
We can.
We can do empty array.
That means it will trigger only once when this component will render.
So empty array will render it only once.
So what we can put here in the Useeffect is basically we can a get the data from from the API from here.
How can we do that?
There is a few ways we can do it.
We could use library like access, or we could use a fetch function that is actually built in JavaScript.
So what we can do is we can use that function here.
So fetch.
And basically what we need to provide in that function is a URL that we will get that data from.
So if we will go here and I will go this is my admin here, but this is the URL that we are running
that with.
So if I will put it here and then API slash movies, this is the URL that we want to get it from.
Another argument will be a option.
So if I will open the object here.
Curly braces I can specify some options.
First thing first, what I need to specify is a method.
So if a method like this and our method we want to use get.
Basically we are using the get method to get the list of the movies.
Another thing is headers.
Headers will create another object here with a curly braces.
And we provide two things.
So first will be content type.
And we will say its application slash JSON.
So basically that's what we are requesting from the our API.
And another thing what we need to do is we need to how to authorization like that.
And we need to provide a token and put a token here at the moment we don't have a login yet.
So we don't we can't really provide the token here, but what we could do is we could go to our Django,
we can go to the tokens, I can select this token and this token, and I can copy that from here.
And I can go back here and hardcode it here.
So token slash and then actual token.
We will remove it with something more useful later on.
But at the moment it will do.
So we have that fetched basically that will fetch it.
But we want to store it.
Whatever we will get from there, we can store it in a variable.
So I will do constant and I will do result.
So basically we will fetch it there.
The good practice for fetching things like this is actually a sync.
So how can we do it async if I will do here await.
It's not going to allow me because I need to have like a async function here.
So what we need to do, we could have a thing there.
But the good practice for use effect will be to use our function inside a function.
So we have use effect here.
And we will use a function which will be constant patch move it.
And that's going to be our uh that's going to be our function here.
So I will create a function here.
And all of it I will put it there.
Like that.
So we have a function that is fetch movies and we can call it from here.
So basically inside our useeffect we will specify the function arrow function.
And we will call it from here.
Inside that function we will actually can use the weight because we can decorate this with async.
So that will give us an option to wait for a result and respond on that results here.
So what we can do is we specify it here, we trigger that here.
And then this will be uh this will be triggered inside.
So once we have that result fetch we can actually check it.
So if result result okay we go to check the status as well and so on.
Then we will do something we can say like if we have result then do that all other thing.
What we can say is like if we don't have a result okay.
So if we it's not going to go come back from our server, then we will do something.
So what we want to do basically we could create another use state.
So I will duplicate this line and I will call it error and set error.
Here and that will be a state.
And at the moment it will be nothing.
So it will be let's say null.
So we don't have an error.
But if I'm not going to have a result from our fetch, what I can do is I can use set error and I will
say error
getting Movies, for example, like this.
So that means we will have that error setup if we can't get them the movies from there.
And basically what what I could do here is if.
Error.
Return.
H1.
And in curly braces error here.
So what I'm saying here is if I have an error at the moment by default I don't have anything here.
But if I don't get the result I will set that error.
So it's not going to be null.
So it will be trigger this one.
If I have an error, then return h1 and specify what's in the error.
I set it as a string like this a here.
And this is not going to be trigger at all because we it will be rendered from top to bottom.
So if that will trigger, it will be returned and this will never be returned.
So we kind of cover the error here if we are not going to have anything from the database.
And so this is done.
We could also do a loading as well.
So we go to say like before we'll fetch it.
We'll have another state for loading.
And we'll set the loading to true.
Set to false.
And we can have some spinner as well.
But for now it's good.
And what we can do now is now we have our movies here.
So let's say const response.
And that response will be the result.
So we can actually convert.
We need to convert that to JSON.
So I will await result JSON.
Or actually we could do it in other way.
So if I will this will be my response.
And I will check the response.
This will be a response from the server and this will be the result.
So I will fetch it and I will assign it to response.
I will check if response is okay and then my result will be whatever coming from that response JSON.
So I will have it in my variable here.
So once I have it in that variable I can actually set it for for my movie.
So I can use my use hook method here.
And I can do set movies and result.
So in that case what we are doing here is if we have this response here, we can actually do return.
So we are not going to progress anymore.
So if we don't have a response we will set the error and return.
This is never going to be set up as a set movies, so it will be always empty.
And also if we have don't have a response this will be triggered.
So if I will go save now, if I will go back here to our application and I have error getting movies.
So this is kind of working fine because it will tell us that we can't get the movie and we will see
why we have that error in the next video.