Okay, our crowd is almost ready, but we can clean up some of the things.
We have it here.
So let's go back here and we you see that we still have that old method fetch here.
So we could actually fetch the movie using our API service.
So we can have that in the service.
And it's not going to pollute that component here.
So let's do that here.
So I will go here and I will create at the very beginning I will duplicate this and I will have fetch
movies where we are not going to provide anything here because we will fetch all the movies and that
will be get and then we will have method movies here.
So we don't need to provide any body and then we will respond null and response.json if that will be
available.
So we have that new method fetch movies.
And I can go back to movie list here.
And we used this before so we had fed.
So basically we've done that.
Instead of having that here, I could go back here and remove everything I will do.
Constant response is equal to API and I will click enter.
So it should be imported.
It is imported from the services.
And then I can do fetch.
Move it like this.
So basically whatever I fetch it I will have it in response.
And if I have that response then what I can do is I can do set movies like that and I will use that
response to set the movies.
So if I will save it now, what I will do is cannot read properties of null.
I think it's coming back this error.
So from the movie list.
But if I will clean this and refresh it, I still have movies.
Map is not a function.
So what we need to do is so what I have to do is I need to create a function so I will have a function.
Fetch a list of movies and that's going to be an arrow function.
And what we can do is I will put it here.
I will call that function here.
And in that way I can await here.
And I can put async version here.
So basically I will have that function that I will trigger from here that will be async will await.
The response is not going to go back as a promise.
It will come back as a JSON.
So if I will come back here and I have it to my list of movies, so it's coming back to normal as well,
the same way as it was before.
But now it's a kind of much more cleaner.
And this way it's not going to polluting that much of our component to use it this way.
So what I could do is I could also go back to movie details.
This is where we fetch our and we have rate movies and we also Fetch our movie ID, so this will be
very similar to what we've done there.
So I will go back to API service.
We'll have new method fetch movie or I can say get movie maybe so get movie and then we'll need to provide
movie ID and then it will be here.
Dollar sign curly braces slash.
And then it's going to be movie ID here.
So we'll have get and all the rest of the things is the same.
But we need to provide a movie ID here.
So going back to movie details so I can go back to movie list here.
And when we use this one sorry, we've used this one here.
I can copy that.
And I can go to our movie details and instead of get new movie as we had it there, I will just take
this all and replace it with something similar.
So fetch movie I will say fetch movie.
And so I will have this function and instead of patching movie I will have get.
Movie.
That's the method we had here in the service.
So get movie is a new method there.
So get movie.
I need to provide movie ID so I have that movie and I have ID basically we don't actually need right
here in that function.
We'll get new movie.
We'll just get it whatever we extend the the right.
So I will save it and let's go back and see if we have API is not defined.
So what we need to do is we need to import that API.
And so import API.
From services.
So once it is here I should come back here.
Refresh it.
We still have some problems.
So movie details are set.
Movies is not defined.
Now of course because I don't have a set movie.
What I'm having here is update movie.
That's what I supposed to call from here.
So if I will go here and I have it back again.
So if I will go Titanic and I will write it here it is updated.
So we successfully updated this one.
And we have a last one that we can put in the service.
And this is basically a great movie.
So let's go back to the service and I will duplicate this again.
And I will have write movie.
And then we need to also have body.
We could have it stars or something.
But and so if you go here what we've done is we send the movie ID rate movie is the method that we use
and we send this.
So basically I will go back here and we'll have movie ID slash rate movie slash and then it will will
be post and the token will be okay.
But what we need to do is we need to provide that.
If I will close this for now and movie details, I will close this one.
So we need to put that body there.
So I will go here and the body should be here, but we can actually use the body from here.
So maybe that will be like that.
So we have a method of right movie will pass, movie ID will pass.
The body will use the post for this method.
And then it will also provide the body.
So we have a new method right.
Movie.
And if I will go back here what we can do is we can replace it.
So in the same way as we've done this, I will just make some space here and we will put it inside here.
So instead of this I will have great movie and I will trigger that here.
And then what we need to do is we need to trigger right movie on the our API.
We need to provide movie ID and also we need to provide body.
Body basically was what we had here.
So we'll copy that here and I will put it there.
And then once we had that so successfully Updated.
I can do get new movie so I can trigger this.
So basically we replace whatever we had it there with the one that we have in our services.
So lets me clean this now and remove the old method.
So basically all of it now is a move to API services.
And you see the components are much clearer.
So every set of services is here.
And that's kind of give us an option also for optimization where we repeat something we can actually
do it as well here.
So I will go back here and make sure everything is working fine.
So we'll go to Titanic I can do this thing.
I can rate it.
It is updated.
I can change it for update.
I can update it, then I can go here and then I can update this one.
I can create a new one and create movie.
And I can also delete it from there.
So everything is working as it was, but now it's much cleaner.
So in the next video what we will do is we'll take a look at the routers.