WEBVTT 00:00.170 --> 00:05.240 Okay, so in this video what we will do is to make our rating clickable. 00:05.240 --> 00:10.670 And then we will send a message to our API that we rate that specific movie. 00:10.670 --> 00:11.990 So how can we do that. 00:12.020 --> 00:14.510 We are already done on mouse enter. 00:14.510 --> 00:22.400 But we can also have another in mouse event and it will be on click like that. 00:22.430 --> 00:25.880 So we will use the same event like we've done before. 00:25.880 --> 00:28.490 So our function for a mouse event here. 00:28.490 --> 00:31.250 And then we want to trigger some function. 00:31.250 --> 00:37.820 So what I will do is I will do write movie and we will trigger that from there. 00:37.820 --> 00:38.930 So I will copy that. 00:38.930 --> 00:40.970 And we need to create that method here. 00:40.970 --> 00:44.390 So I will do constant rate movie. 00:44.390 --> 00:46.520 That's going to be an arrow function. 00:47.240 --> 00:51.860 And what we want to do is we want to send some information to that dart. 00:51.860 --> 00:57.380 So what we will send will send rate and how can we know what we rate. 00:57.380 --> 01:03.270 So basically we have five different stars here, so if we select the first one, then we want to send 01:03.300 --> 01:04.920 the one and so on. 01:04.920 --> 01:06.810 But remember this we have that index. 01:06.810 --> 01:09.960 So what we need to do that index starts from zero. 01:09.960 --> 01:13.050 So what we need to do is we need to do index plus one. 01:13.080 --> 01:19.200 So basically if we will hover and click on the first one we'll take the index zero at one. 01:19.200 --> 01:21.930 And it will be one sent to that function here. 01:21.930 --> 01:24.060 And that rate will be available here. 01:24.270 --> 01:29.550 So what we need to do to send that information is we need to do similar thing as we've done with movie 01:29.550 --> 01:29.880 list. 01:29.880 --> 01:35.550 So if I will go back here, you see we had that option here with a try. 01:35.580 --> 01:38.100 So I can copy whatever I have here. 01:38.100 --> 01:39.030 It will be faster. 01:39.030 --> 01:43.560 So copy that and I can go here and I can put it here. 01:43.560 --> 01:49.350 So we will try to use the same fetch and we will use it on to on our API. 01:49.350 --> 01:50.970 And we need to change few things. 01:50.970 --> 01:59.180 So firstly first a we need to add a movie ID from where we have that movie ID, we already have it in 01:59.180 --> 02:03.470 movie detail, so movie ID is the one that we can use. 02:03.470 --> 02:10.490 So we need to append this so we could do something like plus and then movie ID and then slash and so 02:10.490 --> 02:10.730 on. 02:10.730 --> 02:12.950 But there is a better way to do it in JavaScript. 02:12.950 --> 02:19.940 So what we can do is we can convert that string and we can use that Backtick Backtick on my keyboard 02:19.970 --> 02:26.060 is just on the left hand side above the control, but it might be in a different place on your keyboard, 02:26.060 --> 02:29.540 but it's that tick that goes in the other way. 02:29.540 --> 02:33.290 So you see, this one is the single one, and if I convert it, that's a double. 02:33.320 --> 02:39.620 And so you need to have a beginning and end with a double T with a Backtick. 02:39.620 --> 02:44.840 And if you have that, that means we can inject some extra variables in that string. 02:44.840 --> 02:47.840 And we will do that with a dollar sign and curly braces. 02:47.840 --> 02:50.450 So you can see here this is different color coding. 02:50.450 --> 02:52.250 And I can put some variables here. 02:52.250 --> 02:58.440 I can put movie.id so inside a string we will have this. 02:58.470 --> 02:59.790 So API movies. 02:59.790 --> 03:04.200 And then we will also need to put a method we have in our API. 03:04.230 --> 03:07.770 So if I will go here we have our views. 03:07.770 --> 03:10.110 In the views here we have write movie. 03:10.110 --> 03:13.980 So this is what we want to trigger this this method there. 03:13.980 --> 03:21.570 So going back here we have movie ID because we want to know which one we want to trigger and then write 03:21.600 --> 03:22.650 movie slash. 03:22.650 --> 03:27.150 So we have that movie ID will be in as a part of the URL. 03:27.330 --> 03:29.580 This method will be post. 03:29.640 --> 03:34.380 So it's not going to be get headers can stay the same because we will use the JSON. 03:34.380 --> 03:37.350 And we will also use the authorization for a token. 03:37.350 --> 03:39.480 But we also need to add body. 03:39.750 --> 03:44.010 When we have a post, we want to send some information and we can put it in a body. 03:44.040 --> 03:46.620 We can put it in a body object like this. 03:46.620 --> 03:53.070 And what we need to send is if you go here, we are expecting two stars to be sent. 03:53.070 --> 04:01.450 So I can go back here and say stars will be equal to whatever we sent here to that function, right? 04:01.480 --> 04:03.280 So this is what will be sent. 04:03.310 --> 04:07.870 But what we need to do, we need to send it as a string. 04:07.900 --> 04:10.570 So what we can do is we can use JSON. 04:12.670 --> 04:18.880 Method Stringify that will convert this object to a string and it will be sent over to API. 04:18.910 --> 04:21.880 So Stringify is the way to do this. 04:21.880 --> 04:25.330 And then we can do similar thing as we've done it here. 04:25.330 --> 04:32.320 So if the response is not okay, we have that exclamation mark here, then we can send getting error 04:33.970 --> 04:44.320 setting creating for example like that we have a wait here and that we use we could use the same trick 04:44.350 --> 04:44.740 here. 04:44.740 --> 04:49.120 So I could do async here like that. 04:49.120 --> 04:51.850 And then that that should also work. 04:51.850 --> 04:57.110 Or you can rap it on here in in the function like we have it here. 04:57.110 --> 04:58.790 So that doesn't really matter. 04:58.790 --> 05:03.980 So if I were to save it now what am I search for case movies. 05:04.700 --> 05:11.180 Oh so what we have here is we have few errors a we have set error set movies and set error. 05:11.180 --> 05:15.050 So set error we don't have any error here handling. 05:15.050 --> 05:20.300 So at the moment we could simply disable this. 05:20.300 --> 05:23.720 Or we can actually we will do it in a proper way. 05:23.720 --> 05:25.160 So I will take this. 05:25.190 --> 05:30.560 I will have also error for in this component. 05:30.560 --> 05:38.180 So we can have that set error here and set error where it is here at the moment when we don't this, 05:38.180 --> 05:42.920 we can also we'll use the error for now. 05:45.380 --> 05:52.380 And we'll say success Fully updated. 05:53.100 --> 05:54.060 For example, like that. 05:54.060 --> 06:00.570 So we can instead of error, we can maybe we can use like an info and display that info somewhere here. 06:00.570 --> 06:12.180 So where I can do is inside here I can say paragraph and then I can do curly braces around this. 06:12.630 --> 06:21.630 And I can say if error and and then we'll do that inside the paragraph error. 06:21.660 --> 06:24.720 So if we have the error we'll render that paragraph. 06:24.720 --> 06:26.640 And inside we put that error. 06:26.670 --> 06:27.660 This is not an error. 06:27.690 --> 06:28.980 So maybe you should rewrite it. 06:28.980 --> 06:31.710 But let's let's test that first. 06:31.890 --> 06:33.330 So we go here. 06:33.330 --> 06:36.960 And then if I will refresh it I will inspect that. 06:36.990 --> 06:45.240 So it will be easier for us to see I can put it on a side here and in a network. 06:45.240 --> 06:48.780 So I will click on this one and then I will this. 06:48.810 --> 06:50.870 This was five stars. 06:50.900 --> 06:55.610 If I would click on this one, we have that method where you can see the status is 200. 06:55.640 --> 06:57.110 That means it was a success. 06:57.110 --> 06:59.990 I can click on this and we have rating updated. 06:59.990 --> 07:03.650 Basically that message is actually coming back to us. 07:03.650 --> 07:06.470 And then we have a result from here. 07:06.470 --> 07:08.870 At the moment we don't really do much about it. 07:08.900 --> 07:14.990 We have successfully updated and we could actually use that message from there because it's coming back 07:15.140 --> 07:16.880 to us, if I will rate it. 07:17.030 --> 07:23.000 For example, at the moment Titanic is a five star, so if I will rate it as one, you can see here 07:23.030 --> 07:26.930 payload is something that I sent stars one and then I come. 07:27.410 --> 07:29.660 The result coming back is stars. 07:29.660 --> 07:33.470 It's one because there is only one user that rate that movie. 07:33.500 --> 07:35.420 So if I will refresh it again. 07:35.810 --> 07:40.430 So load a new movies from the database and if I will click it here you see this is one. 07:40.430 --> 07:41.810 So it is working fine. 07:41.810 --> 07:47.510 At the moment we don't really update the current moment movie, but we have an option to do so.