Okay, so in this video what we will do is to make our rating clickable.
And then we will send a message to our API that we rate that specific movie.
So how can we do that.
We are already done on mouse enter.
But we can also have another in mouse event and it will be on click like that.
So we will use the same event like we've done before.
So our function for a mouse event here.
And then we want to trigger some function.
So what I will do is I will do write movie and we will trigger that from there.
So I will copy that.
And we need to create that method here.
So I will do constant rate movie.
That's going to be an arrow function.
And what we want to do is we want to send some information to that dart.
So what we will send will send rate and how can we know what we rate.
So basically we have five different stars here, so if we select the first one, then we want to send
the one and so on.
But remember this we have that index.
So what we need to do that index starts from zero.
So what we need to do is we need to do index plus one.
So basically if we will hover and click on the first one we'll take the index zero at one.
And it will be one sent to that function here.
And that rate will be available here.
So what we need to do to send that information is we need to do similar thing as we've done with movie
list.
So if I will go back here, you see we had that option here with a try.
So I can copy whatever I have here.
It will be faster.
So copy that and I can go here and I can put it here.
So we will try to use the same fetch and we will use it on to on our API.
And we need to change few things.
So firstly first a we need to add a movie ID from where we have that movie ID, we already have it in
movie detail, so movie ID is the one that we can use.
So we need to append this so we could do something like plus and then movie ID and then slash and so
on.
But there is a better way to do it in JavaScript.
So what we can do is we can convert that string and we can use that Backtick Backtick on my keyboard
is just on the left hand side above the control, but it might be in a different place on your keyboard,
but it's that tick that goes in the other way.
So you see, this one is the single one, and if I convert it, that's a double.
And so you need to have a beginning and end with a double T with a Backtick.
And if you have that, that means we can inject some extra variables in that string.
And we will do that with a dollar sign and curly braces.
So you can see here this is different color coding.
And I can put some variables here.
I can put movie.id so inside a string we will have this.
So API movies.
And then we will also need to put a method we have in our API.
So if I will go here we have our views.
In the views here we have write movie.
So this is what we want to trigger this this method there.
So going back here we have movie ID because we want to know which one we want to trigger and then write
movie slash.
So we have that movie ID will be in as a part of the URL.
This method will be post.
So it's not going to be get headers can stay the same because we will use the JSON.
And we will also use the authorization for a token.
But we also need to add body.
When we have a post, we want to send some information and we can put it in a body.
We can put it in a body object like this.
And what we need to send is if you go here, we are expecting two stars to be sent.
So I can go back here and say stars will be equal to whatever we sent here to that function, right?
So this is what will be sent.
But what we need to do, we need to send it as a string.
So what we can do is we can use JSON.
Method Stringify that will convert this object to a string and it will be sent over to API.
So Stringify is the way to do this.
And then we can do similar thing as we've done it here.
So if the response is not okay, we have that exclamation mark here, then we can send getting error
setting creating for example like that we have a wait here and that we use we could use the same trick
here.
So I could do async here like that.
And then that that should also work.
Or you can rap it on here in in the function like we have it here.
So that doesn't really matter.
So if I were to save it now what am I search for case movies.
Oh so what we have here is we have few errors a we have set error set movies and set error.
So set error we don't have any error here handling.
So at the moment we could simply disable this.
Or we can actually we will do it in a proper way.
So I will take this.
I will have also error for in this component.
So we can have that set error here and set error where it is here at the moment when we don't this,
we can also we'll use the error for now.
And we'll say success Fully updated.
For example, like that.
So we can instead of error, we can maybe we can use like an info and display that info somewhere here.
So where I can do is inside here I can say paragraph and then I can do curly braces around this.
And I can say if error and and then we'll do that inside the paragraph error.
So if we have the error we'll render that paragraph.
And inside we put that error.
This is not an error.
So maybe you should rewrite it.
But let's let's test that first.
So we go here.
And then if I will refresh it I will inspect that.
So it will be easier for us to see I can put it on a side here and in a network.
So I will click on this one and then I will this.
This was five stars.
If I would click on this one, we have that method where you can see the status is 200.
That means it was a success.
I can click on this and we have rating updated.
Basically that message is actually coming back to us.
And then we have a result from here.
At the moment we don't really do much about it.
We have successfully updated and we could actually use that message from there because it's coming back
to us, if I will rate it.
For example, at the moment Titanic is a five star, so if I will rate it as one, you can see here
payload is something that I sent stars one and then I come.
The result coming back is stars.
It's one because there is only one user that rate that movie.
So if I will refresh it again.
So load a new movies from the database and if I will click it here you see this is one.
So it is working fine.
At the moment we don't really update the current moment movie, but we have an option to do so.