Okay, we have our component added already, so we have everything prepared for actually storing the
data in our database to update the data using method put.
So far what we have is whenever we click here and then I will click Save.
We'll just go back to the previous page.
Well, this is still valid.
We want to go back to the previous page, but we would like to first update the movie and then from
the response, we would like to update the current movie here as we have it on the new component.
So how can we do that here inside the edit?
JS In that component, we have Method Save movie.
That movie will need to actually create a new fetch request and we will send some information from that
component to the API.
API will return updated data and then we'll navigate back to the details.
JS Okay, so how can we do that?
Basically what we can do is we can uh, go to the list.
JS here, and the same method we used use fetch here, I will just copy and that will save us a lot
of time to, to type it.
And then I will go here and reuse whatever we have.
We'll need to change a few things.
So first thing first, the URL is different.
So API movies, that's a valid for post but not for a put.
So we need to go.
We need to create a method put here.
So this is the put.
I will convert this string into a to backticks here.
So in that case I can inject the variable inside here.
So I'll do a slash.
And inside here what I need to pass is I need to pass a movie ID so we have movie here and then we'll
have also ID, So the URL is API slash movies, slash ID of the movie and slash at the end and that's
a method put.
Okay, so we have that already done.
What we also need to provide here is we need to provide a body.
So body will be our data that we will send to the server.
So what we need to send, we need to send a title, which is our title.
So this one is what we send and this one is the value itself.
And the same with the description.
So description and description like this.
So this is the object that I will pass.
But whatever I pass something, I need to pass it as a string.
So I will do Json and then Stringify method here and I will wrap that around this object that I've created.
So we just json.stringify this object here, which is a title and description, and this is what we
will pass to our API that will update the records.
So what else we need to do?
So here we have already response and we do set movies.
This is not valid anymore because we need to do a different things here.
So here I will have a Json response.
So I will have in response movie updated.
So from from this point I will need to update the movie.
So for now I will just console log it and whatever is coming there and we will see what we have so far
and I will show you that it's not going to be enough for us to update movie because we also need to
take care of the content type.
Whatever we use output, we need to specify what we are sending and we are sending here a Json.
So we need to tell our application that to accept the Json.
And what I can do is I can add it here.
Let's say I will add Titanic to and I will save it.
And you can see here I have unsupported media type plain charset.
So this is it's expecting a text plain, but what we need to do is we need to tell that we will provide
actually a content type of Json.
So content content type and that's going to be application slash Json like this.
So once we will provide this, I can save it now and then let's try again edit the Titanic Titanic to
save it.
And you can see here that's what it's coming back from here.
So, so the first end here, convert everything to Json.
Then we have another then and then we expect movie and we console.log it.
So this is what is coming back from the from the server.
And you can see here the title is already Titanic two.
But when we go here, props, navigation, go back.
We actually don't overwrite anything here.
This is still as it was because it's it's it's kept in the current state of this component.
So what we need to do instead of console.log it here, what we can do is we can use.
You similar way as we've done it here.
So if we go here, you can see whatever we clicked on the movie.
We are bringing back the title.
So I will comment, I will copy that and I will go here and I will replace it with here with this one.
So what we do here, whatever, we have a response movie from from the put response, we will navigate
to the details and we'll provide that movie as a props and then movie title as well.
So we will be back in this screen and we don't need that go back anymore from here.
So we are just expecting this to have a response and then you can have go back with some console.
Rocky.
If that fails, then you can go back to the previous page with that go back method and then maybe print
something on for the user that it wasn't successful.
And but what we are interested in here, wherever we have a success, then we navigate back to the details
and we provide a new movie from that response.
So let's test it now.
And then I go Titanic.
You can see already that has been changed in my previous trial, but I haven't really updated back then.
So you you could still see the old data, but now I can see the Titanic to here.
So that means it is in database.
So my, my goal is if I will edit that back to the Titanic, then I will be redirected to this page.
So I will remove it and I will be back to the previous page with the Titanic, Titanic to.
So save it.
And in fact, I have a Titanic here.
So one more test, Titanic three and then romantic movie three.
I can save it here.
And you can see romantic movie here and Titanic here.
So that means I have already a way to update the movie on the database using our put method.