Okay.
So what we have is we have functional form already in our application, but we don't do anything whenever
we click on that button.
So what we will do in this video is we'll make the safe movie available here.
So we have already title and description ready.
So we need to save it.
So what we've done before is we've used that fetch function.
But this is kind of a bad way that we repeat the same thing over and over again here.
So what we could do is we can actually create a service and we will use the services from now on in
our application.
So for doing that is I will create a new file.
Or I can create a new folder first and I will do services.
And here I can do new file inside services.
And I will do API service JS.
So basically that's a it will be a file where we will hold our service.
We can have it in many different ways.
We can have it like different functions, or we can have it as a class.
I will show you how to do a class based services.
So we will create a class and I will call it API.
And I will do curly braces here.
So inside we can have some methods.
So let's say I would like to have a method update movie here.
So that will be a method that I will be able to call.
And that will take some parameters and it will execute it.
So what we want to have it here, we will do similar thing as we've done here.
So I will just copy that.
And I will put it directly in here.
So first thing first if we want to use await this needs to be async.
And there's a few things that we need to do for first thing if you will use that service.
We don't have that movie ID here.
So what we will need to do is we'll need to send something to that function.
So I will send it movie ID and it will have it here.
Then we can use it in our string.
Another thing is what we could do is we can start using some constants.
So if I will do api url, I can take this here and cut it.
And I will put it here.
So basically if I'm going to repeat it over and over again and that will be the same bit here, I can
easily put it like that.
So if I will.
And that's supposed to be dollar sign here.
So that's not going to change anything.
It will just put the API URL here.
I can do similar things with our token.
So I will have token.
Token and this token here, I can get it and put it there.
So instead of having that as a hardcoded, I can convert that to backticks and put it dollar sign,
curly braces and token like this.
Another thing that we'll need to do is whenever we update movie, we want to send a body because that
that will change from call to call.
And I will have body here.
So instead of having that hardcoded here, I will just send the body as it is like this.
So I will send an object that will be stringified and put it there.
So and what we want to do is actually update movie.
It's not a post it's put.
So we'll have that put method here.
We'll use the token.
We will use that for not rate movie, but we will have movies and specific movie ID with put.
So we want to update this and we'll send the body.
So at the moment this is okay.
And what we want to do is we have that set error here.
It's not going to work because we don't have anything here.
So let's say we can return null here and then we will return.
If we don't have a response, we'll return null.
And then if we have a response we can do return response JSON.
So that's what we are going to do.
I can actually remove that try catch from here as well.
So to simplify everything this will be our service.
So we will have a class API.
We will have update movie and then we will pass movie ID and this will be put in a string.
And then it will pass a body that will be stringify.
And if there is no response, it will be returned as null.
If we have a response that will convert to JSON and return that.
So how can we use that service here.
If I will go to our movie form here, this is where we are supposed to use it.
So first thing what I will do is I will need to import it.
So API service at the moment I don't export it.
So I need to export that.
And I export a class API so I can actually do default.
So going back to form I can import that from here.
So import API from.
And that will be in.
I need to go one folder up.
And then inside services I have API service.
So API is now imported and I can use it.
But if I would have a class we need to initiate it.
So we need to say API is equal to API service and then trigger that.
But I could do something different.
I could go to API service and I can decorate this with a static method so I can do static update movie
static.
That means it will be static on this class.
So I don't need to initiate this class.
I can directly call it on the class.
So that means if I will go here and I can do API and I can do update movie directly from here.
So I don't need to create that class instance here.
So API update movie requires two argument.
First requires movie ID we have it from here.
So I will put it movie.id.
And the second thing we need to do is if you go here you remember that body.
So we need to send something to body to update put.
And we also have it here.
So we will send the object.
And inside that object we want to send a title and description.
So title and description like that.
So basically that's a shortcut in JavaScript.
So normally if you have something like this, it will look like this.
So title will be a title.
Description will be description.
But if parameter is the same as the value, you don't have to do it twice.
So you can provide like that and it will be exactly the same.
So title and description will be sent to the body and it will be sent over.
So I will save it now and let's see if that actually works.
We'll go to our application.
I can go to network and remove everything.
I will select Edit Titanic and we want to have Titanic three for example.
And I will click Update Movie.
So on the network what we have here is we have a new request.
So if I'll go headers I have a put.
This is API movie one.
So put this is what we sent payload description around the movie and title was the Titanic three.
So basically coming from this form and then what response is basically that's a new movie.
So our fetch worked with a new service.
At the moment there is a few things that we still have it hardcoded here.
So this is the API and token is hardcoded.
And but this we could move it all that to make more than ten lines of code we can move it.
And it's not gonna pollute our components here.
So we'll use the service as it is much more clearer what we are doing here.
So API service you can actually name it.
So for something different like an API service to.
But I will leave it as an API.
But but the thing is it is much more simpler to use it inside component.
Then it is something like that.
So you see we had a lot of different a lot of code here.
We can move that code to a service and we can share some of the the reusable things in there like headers.
We can also have a function that will get the headers automatically for us if we repeat it from service
to service.