WEBVTT 00:01.810 --> 00:02.440 Okay. 00:02.440 --> 00:06.370 In this video, we will come back to our details page. 00:06.370 --> 00:15.430 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 00:15.430 --> 00:19.570 rate the movie in the same way as we had it in our web application. 00:19.570 --> 00:27.490 So we'll display five stars and then clicking on that stars will send a request to our API to read that 00:27.490 --> 00:28.480 specific movie. 00:28.480 --> 00:30.400 So how can we do that? 00:30.400 --> 00:34.330 So first we will prepare some styles. 00:34.330 --> 00:42.100 So what I will do here is I will do another view and then inside that view, actually I can style it 00:42.100 --> 00:42.790 here. 00:43.090 --> 00:49.150 And so we don't need to create a new style down there and clutter everything there. 00:49.150 --> 00:52.570 So once you do the style inline, well, it's up to you. 00:52.600 --> 00:54.730 Where would you like to put your styles? 00:54.730 --> 01:01.310 But if it's something small that it's not really repeatable, I can also put the styles directly here, 01:01.310 --> 01:05.810 not using the styles from here, but as I said, it doesn't really matter. 01:05.810 --> 01:07.130 So I'll put it here. 01:07.130 --> 01:21.110 So an object and I will do border bottom color and I can do white and then I can do border bottom width 01:21.890 --> 01:24.500 and I can do, let's say, two. 01:24.530 --> 01:29.450 So what I'm doing here is I will have some kind of divider here. 01:29.450 --> 01:34.760 So it will tell us that we are kind of are here in a separate section here. 01:34.850 --> 01:41.840 So what I can do is I could do speed up, I can copy the text from here and I can put it. 01:41.840 --> 01:45.680 So my text will be rated. 01:46.460 --> 01:50.510 So we need to tell user to rate it. 01:50.510 --> 01:54.440 So now we need to do some kind of styling here. 01:54.440 --> 02:01.190 So what I will do is we already have our five stars here, so I'll copy that here. 02:01.190 --> 02:08.540 I can remove this number of ratings and we need to do a little bit of, uh, things a little bit different. 02:08.540 --> 02:09.830 So if I will save it. 02:09.830 --> 02:18.620 Now, you can see it's basically duplication of what we have here, and this is okay, but we need to 02:18.620 --> 02:19.100 change it. 02:19.100 --> 02:28.730 So first thing, what we need to do is I will change that orange to purple and I will do it for all 02:28.730 --> 02:29.270 of them 02:32.060 --> 02:34.670 and this white I can do for gray. 02:37.820 --> 02:44.060 So basically I will change the colors not to be confused with this one. 02:44.060 --> 02:49.880 So that will be the static, the current rating as we have, and this will be more interactive. 02:49.880 --> 02:51.590 So we'll have purple and gray. 02:51.590 --> 02:53.900 What we need to do is we need to also 02:56.450 --> 02:57.680 duplicate this. 03:04.550 --> 03:07.190 So purple. 03:07.430 --> 03:19.100 And then we can do purple and then we can have gray and I can do, let's say, key color. 03:20.540 --> 03:25.510 So I can go here and you can see we have purple and that gray here. 03:25.520 --> 03:30.650 What we can do is we can make it a much larger because that needs to be clickable. 03:30.650 --> 03:33.500 So we need to make sure that this will be easy to click. 03:33.500 --> 03:36.290 So what we can do here in the font, awesome. 03:36.290 --> 03:40.850 What we can provide is we can provide a size and size. 03:40.850 --> 03:50.900 I can make it let's something nice and big, which is 48 and then I will copy that and then I can paste 03:50.900 --> 03:53.960 it for every single one. 03:53.960 --> 03:55.280 So save it now. 03:56.500 --> 04:00.370 And and you can see here, it's nice and big at the moment. 04:00.370 --> 04:01.670 It's not clickable yet. 04:01.690 --> 04:08.170 It this will basically represent the same kind of concept as we have it here because we have that based 04:08.170 --> 04:09.340 on the average rating. 04:09.340 --> 04:12.550 So we need to do is we need to have our own. 04:12.550 --> 04:20.260 So what I will do is I will create a new constant and that's going to be we will use the set state. 04:20.260 --> 04:28.060 So what I will do is I will do high light and then next one will be set high light. 04:28.060 --> 04:30.010 And I will just explain it in a second. 04:30.040 --> 04:34.060 Why do we have that like this? 04:34.060 --> 04:36.190 And then I will do set state. 04:40.180 --> 04:46.800 Excuse me, use state and then we can provide a default one and default one will be zero. 04:46.810 --> 04:52.600 So we will have our variable highlight and that will be initially as a zero. 04:52.600 --> 05:00.580 So if I go here, you can see movie average rating is that's what what we need to use and we need to 05:00.580 --> 05:02.380 replace it with a highlight. 05:02.380 --> 05:06.580 So I'll replace every single one with a highlight. 05:10.010 --> 05:10.820 If I would save it. 05:10.820 --> 05:14.990 Now you can see not any actually selected. 05:14.990 --> 05:20.090 So because by default the highlight is zero. 05:20.090 --> 05:24.770 And if we compare it like if that's larger than zero, it is not. 05:24.770 --> 05:28.670 So it won't be highlighted in purple in our case. 05:28.670 --> 05:34.010 So what we can do here is we can have on press, so on press. 05:34.010 --> 05:37.580 And what I can do is I can do a inline function here. 05:37.580 --> 05:40.580 I don't need to create a external function. 05:40.580 --> 05:42.230 I can change it here. 05:42.230 --> 05:47.630 So we can use arrow function here and then I can do set highlight. 05:49.720 --> 05:53.470 Like this and then we can pass one here. 05:53.470 --> 05:56.920 So whatever I press here, I will use set, highlight, set. 05:56.950 --> 06:01.600 Highlight is our state function here. 06:01.600 --> 06:07.090 So we will update the highlight uh, to one when we press on on the first one. 06:07.090 --> 06:15.640 So if I will copy this one here, what I can do is for every single one I will use the same concept. 06:15.640 --> 06:19.420 But this one I will do three, four and five. 06:19.630 --> 06:24.190 So saving that I can go here by default, it's zero. 06:24.190 --> 06:32.590 So if I will click here one, if I will click here for five, three, two and all and all of that, 06:32.590 --> 06:34.180 like it's working fine. 06:34.180 --> 06:40.810 So now we have our highlight stored based on our settings. 06:40.810 --> 06:46.720 So wherever we click, this is how many we stars we have and we have that variable highlight that we 06:46.720 --> 06:47.470 can use. 06:47.470 --> 06:52.370 So what we can do here is I can have a button 06:55.460 --> 07:01.070 like this, so I will close it and we need to make sure it is imported. 07:01.310 --> 07:08.900 So the button and I will do title and we can have a title of rate. 07:09.050 --> 07:11.870 So and then we can have on press. 07:15.990 --> 07:17.210 And on press. 07:17.220 --> 07:26.100 What I can do is I can have an another function here and I can do a right clicked 07:28.740 --> 07:29.610 like this. 07:30.300 --> 07:33.990 And then we'll need to also create a function. 07:34.350 --> 07:41.040 So I will do constant right clicked and that's going to be an arrow function. 07:41.040 --> 07:45.870 We don't need to pass anything in that function because we'll have the highlight here. 07:45.870 --> 07:48.960 So whatever we click, it will have the highlight. 07:48.960 --> 07:57.120 For now we can do console log and then we can do highlight. 07:59.520 --> 08:00.770 So coming. 08:00.780 --> 08:01.730 You here? 08:01.740 --> 08:02.850 I'll take three. 08:02.850 --> 08:05.100 I click rate and you can see three. 08:05.130 --> 08:06.420 If I click five. 08:06.900 --> 08:07.620 Right. 08:07.620 --> 08:08.880 And I have five. 08:08.910 --> 08:11.610 So we have the highlight ready here. 08:11.610 --> 08:15.390 We have a controls in the user interface to rate it. 08:15.390 --> 08:20.880 And in the next video what we will do is basically we will send our request in the same way as we've 08:20.880 --> 08:24.930 done it in the web version to rate the current movie.