Okay, so we have a way to send rate movies to our API.
And we know that this update is we can load it.
But this is not really a proper user experience.
Because like when we click this and there is no changes there.
So what we are trying to do is to load the changes whenever we change something here.
So how can we do that?
We know how to use our API in that way.
So if we go to movies and then ID of the movie, we can actually fetch a new version of it from the
server.
And this is important because like when we have like hundreds of different users and you rate it, you
don't know how many users were there, so you need to actually fetch it from the server to see what
is the average user after you've changed it.
So let's do that as an exercise.
Our application is super small.
We have like one user that we're using.
But and that will be a good exercise to understand like how we can actually pass the data in between
different components and why we should do that.
Okay.
So at the moment if we go here and this is what we have at the rate movie, So when we have it successfully
updated, we don't do anything there.
So what I can do is I can copy that function and we can put it here.
So I will name it here update movie.
Or get new movie.
So it will be clear what we are trying to do.
And I will use the same method.
At the moment.
There is a lot of repeat code here, but we will deal with that later on.
So at the moment what we are trying to do is fetch the movie a movie ID based on movies, movie ID and
we will use the get we don't need body and then response okay error getting movie and then we once we
have it then we we do something about it here here.
So successfully updated and I can Half hour getting movie here.
And that's I guess is that should be error getting setting grading.
So once we have that here, our response, this response is actually not going to give us all what we
need for the movie.
We could design, uh, our API to actually give us a response back that we need to have like an entire
movie object for this.
But in that case, if we don't have it there, we can fetch it with this method again.
So if I will go here and just trigger that function from there.
So when we have that response I will get new movie, I will have that movie and I will get it and I
will have it.
Actually the movie will be will be here.
So I can even call it I'm not going to call it because it will be a same name.
So we pass it to props.
So in that case, when we have this, let's see what we actually what we actually have.
I will have console.log And then we can do a result there.
So this is what will come back.
So this is what we have at the moment.
If I will rate it, there are two things.
First I will rate it and then I will get that movie for rating here.
You see I'm rating updated and this is my result.
So I have ID what is the movie stars and and users.
And the second one I use this get method for a movies one.
And this is coming back as this one.
So this is entire movie object there.
And also if I go here I can see it here that this is printed here.
So what should we actually do in that situation.
We have that movie here as in our result.
But we can't really update the movie in this component because what we have here is we have a movie
sent from props and I can't send this movie.
Will be whatever it's coming there.
So this this is not really possible.
Movie is equal to a result like this.
And because this is coming from props so it is controlled in our parent element.
So the way to update this movie will be to actually update the parent.
And what we can do is we can trigger a function update movie.
We don't have that movie that function yet.
We will create it in a second.
So update movie we will trigger here.
At the moment we don't have it, but what we want to do is we want to have it in props.
So this we've done it before.
We update this movie and we go to our parent and in the movie details, we will use this update movie
and then we will do something here.
So right at the moment this it's not doing anything.
But what we are interested in is actually set selected movie.
And I will show you that the full loop how it actually the data is passing from one component to another.
But at the moment, what we are doing is we will trigger that set selected movie from update movie.
So in my movie details I have when I fetch that movie, I update the movie and actually I need to pass
it result there.
That update movie is coming from the props, so it is actually pass it here update movie.
This will be trigger and I will put it in a state.
But what will happen is that selected movie is actually sent back to the same component.
So it will come back as a movie and it will be updated.
So if I will use this method, it will go to the parent.
It will come back as a selected movie in movie here.
And that should be updated.
So if I will go here and if I will update it now you can see this is actually changed.
And if I will click it here, this is actually changed.
So we if we go to the network you see I'm still updating this.
So three I'm sending this.
I'm getting the data.
I pass it to my parent.
Parent will pass it as a selected movie.
And it's updated here.
So in that case we don't have that state here.
And the movie it is always passed here.
And if we need to tell because we have new information, what is the movie?
We can trigger a function in our parent.
The parent will have that function register and then we trigger this.
So we update of the state of the selected movie.
Like this.
Maybe that's not a perfect case for a designing application like this, but it will kind of show you
how to manage the data and the different component and what is actually available for you.
Another thing is, maybe you've noticed that I have used this function here, a movie clicked and I
pass movie and I have selected movie.
I've done it before, like this with an extra function, but you don't have to also select that movie
is already a function that we can use and I reuse it here.
So if I will get this and I will put it on the movie list like that and I can comment it out for now
in this function, you see I have that in in stage, I have the method to update that movie and then
I can trigger that directly from here.
So if I will go, go back here and I will click on this one.
You see this is still working.
So you don't have to have um, the extra function for, for, for this one.
Like, like we had it before.
You can trigger that basically directly here.
Because what we had before is we had that function.
We pass it movie.
Movie was a trigger by this one.
And then we update this the state here.
So you don't have to do it.
You can do it directly from here.
I will leave it for for now here.
And just as a reference to show you what has been done, but this is actually fully functional.
Updating the movie wherever we click on rating now.