Okay.
In this video, we will come back to our details page.
And I can, in this view here, what we will need to do is we'll need to provide a way for user to actually
rate the movie in the same way as we had it in our web application.
So we'll display five stars and then clicking on that stars will send a request to our API to read that
specific movie.
So how can we do that?
So first we will prepare some styles.
So what I will do here is I will do another view and then inside that view, actually I can style it
here.
And so we don't need to create a new style down there and clutter everything there.
So once you do the style inline, well, it's up to you.
Where would you like to put your styles?
But if it's something small that it's not really repeatable, I can also put the styles directly here,
not using the styles from here, but as I said, it doesn't really matter.
So I'll put it here.
So an object and I will do border bottom color and I can do white and then I can do border bottom width
and I can do, let's say, two.
So what I'm doing here is I will have some kind of divider here.
So it will tell us that we are kind of are here in a separate section here.
So what I can do is I could do speed up, I can copy the text from here and I can put it.
So my text will be rated.
So we need to tell user to rate it.
So now we need to do some kind of styling here.
So what I will do is we already have our five stars here, so I'll copy that here.
I can remove this number of ratings and we need to do a little bit of, uh, things a little bit different.
So if I will save it.
Now, you can see it's basically duplication of what we have here, and this is okay, but we need to
change it.
So first thing, what we need to do is I will change that orange to purple and I will do it for all
of them
and this white I can do for gray.
So basically I will change the colors not to be confused with this one.
So that will be the static, the current rating as we have, and this will be more interactive.
So we'll have purple and gray.
What we need to do is we need to also
duplicate this.
So purple.
And then we can do purple and then we can have gray and I can do, let's say, key color.
So I can go here and you can see we have purple and that gray here.
What we can do is we can make it a much larger because that needs to be clickable.
So we need to make sure that this will be easy to click.
So what we can do here in the font, awesome.
What we can provide is we can provide a size and size.
I can make it let's something nice and big, which is 48 and then I will copy that and then I can paste
it for every single one.
So save it now.
And and you can see here, it's nice and big at the moment.
It's not clickable yet.
It this will basically represent the same kind of concept as we have it here because we have that based
on the average rating.
So we need to do is we need to have our own.
So what I will do is I will create a new constant and that's going to be we will use the set state.
So what I will do is I will do high light and then next one will be set high light.
And I will just explain it in a second.
Why do we have that like this?
And then I will do set state.
Excuse me, use state and then we can provide a default one and default one will be zero.
So we will have our variable highlight and that will be initially as a zero.
So if I go here, you can see movie average rating is that's what what we need to use and we need to
replace it with a highlight.
So I'll replace every single one with a highlight.
If I would save it.
Now you can see not any actually selected.
So because by default the highlight is zero.
And if we compare it like if that's larger than zero, it is not.
So it won't be highlighted in purple in our case.
So what we can do here is we can have on press, so on press.
And what I can do is I can do a inline function here.
I don't need to create a external function.
I can change it here.
So we can use arrow function here and then I can do set highlight.
Like this and then we can pass one here.
So whatever I press here, I will use set, highlight, set.
Highlight is our state function here.
So we will update the highlight uh, to one when we press on on the first one.
So if I will copy this one here, what I can do is for every single one I will use the same concept.
But this one I will do three, four and five.
So saving that I can go here by default, it's zero.
So if I will click here one, if I will click here for five, three, two and all and all of that,
like it's working fine.
So now we have our highlight stored based on our settings.
So wherever we click, this is how many we stars we have and we have that variable highlight that we
can use.
So what we can do here is I can have a button
like this, so I will close it and we need to make sure it is imported.
So the button and I will do title and we can have a title of rate.
So and then we can have on press.
And on press.
What I can do is I can have an another function here and I can do a right clicked
like this.
And then we'll need to also create a function.
So I will do constant right clicked and that's going to be an arrow function.
We don't need to pass anything in that function because we'll have the highlight here.
So whatever we click, it will have the highlight.
For now we can do console log and then we can do highlight.
So coming.
You here?
I'll take three.
I click rate and you can see three.
If I click five.
Right.
And I have five.
So we have the highlight ready here.
We have a controls in the user interface to rate it.
And in the next video what we will do is basically we will send our request in the same way as we've
done it in the web version to rate the current movie.