WEBVTT 00:01.160 --> 00:05.630 Okay, so we have a way to send rate movies to our API. 00:05.630 --> 00:08.630 And we know that this update is we can load it. 00:08.630 --> 00:11.330 But this is not really a proper user experience. 00:11.330 --> 00:14.780 Because like when we click this and there is no changes there. 00:14.780 --> 00:20.150 So what we are trying to do is to load the changes whenever we change something here. 00:20.150 --> 00:21.260 So how can we do that? 00:21.260 --> 00:23.300 We know how to use our API in that way. 00:23.300 --> 00:28.220 So if we go to movies and then ID of the movie, we can actually fetch a new version of it from the 00:28.220 --> 00:28.760 server. 00:28.760 --> 00:34.520 And this is important because like when we have like hundreds of different users and you rate it, you 00:34.520 --> 00:39.650 don't know how many users were there, so you need to actually fetch it from the server to see what 00:39.650 --> 00:41.720 is the average user after you've changed it. 00:41.720 --> 00:43.880 So let's do that as an exercise. 00:43.880 --> 00:45.470 Our application is super small. 00:45.470 --> 00:47.360 We have like one user that we're using. 00:47.360 --> 00:52.850 But and that will be a good exercise to understand like how we can actually pass the data in between 00:52.850 --> 00:55.760 different components and why we should do that. 00:55.790 --> 00:56.360 Okay. 00:56.390 --> 01:03.840 So at the moment if we go here and this is what we have at the rate movie, So when we have it successfully 01:03.840 --> 01:06.360 updated, we don't do anything there. 01:06.360 --> 01:11.880 So what I can do is I can copy that function and we can put it here. 01:11.880 --> 01:17.370 So I will name it here update movie. 01:19.650 --> 01:24.090 Or get new movie. 01:24.900 --> 01:27.360 So it will be clear what we are trying to do. 01:27.390 --> 01:28.590 And I will use the same method. 01:29.250 --> 01:29.820 At the moment. 01:29.820 --> 01:33.540 There is a lot of repeat code here, but we will deal with that later on. 01:33.540 --> 01:41.100 So at the moment what we are trying to do is fetch the movie a movie ID based on movies, movie ID and 01:41.100 --> 01:55.380 we will use the get we don't need body and then response okay error getting movie and then we once we 01:55.380 --> 01:58.650 have it then we we do something about it here here. 01:58.650 --> 02:05.470 So successfully updated and I can Half hour getting movie here. 02:05.470 --> 02:11.770 And that's I guess is that should be error getting setting grading. 02:12.160 --> 02:20.170 So once we have that here, our response, this response is actually not going to give us all what we 02:20.170 --> 02:21.130 need for the movie. 02:21.130 --> 02:27.550 We could design, uh, our API to actually give us a response back that we need to have like an entire 02:27.550 --> 02:28.810 movie object for this. 02:28.810 --> 02:34.210 But in that case, if we don't have it there, we can fetch it with this method again. 02:34.210 --> 02:40.570 So if I will go here and just trigger that function from there. 02:40.570 --> 02:47.050 So when we have that response I will get new movie, I will have that movie and I will get it and I 02:47.050 --> 02:47.500 will have it. 02:47.500 --> 02:49.300 Actually the movie will be will be here. 02:49.300 --> 02:54.070 So I can even call it I'm not going to call it because it will be a same name. 02:54.190 --> 02:55.480 So we pass it to props. 02:55.480 --> 03:00.970 So in that case, when we have this, let's see what we actually what we actually have. 03:00.970 --> 03:08.090 I will have console.log And then we can do a result there. 03:08.780 --> 03:10.520 So this is what will come back. 03:10.520 --> 03:13.880 So this is what we have at the moment. 03:13.880 --> 03:16.490 If I will rate it, there are two things. 03:16.490 --> 03:20.330 First I will rate it and then I will get that movie for rating here. 03:20.330 --> 03:23.030 You see I'm rating updated and this is my result. 03:23.030 --> 03:26.990 So I have ID what is the movie stars and and users. 03:26.990 --> 03:33.050 And the second one I use this get method for a movies one. 03:33.050 --> 03:36.020 And this is coming back as this one. 03:36.020 --> 03:38.540 So this is entire movie object there. 03:38.540 --> 03:43.820 And also if I go here I can see it here that this is printed here. 03:44.030 --> 03:48.770 So what should we actually do in that situation. 03:48.770 --> 03:50.900 We have that movie here as in our result. 03:50.900 --> 03:57.680 But we can't really update the movie in this component because what we have here is we have a movie 03:57.710 --> 04:01.490 sent from props and I can't send this movie. 04:01.490 --> 04:03.020 Will be whatever it's coming there. 04:03.020 --> 04:05.530 So this this is not really possible. 04:05.560 --> 04:08.500 Movie is equal to a result like this. 04:10.180 --> 04:15.070 And because this is coming from props so it is controlled in our parent element. 04:15.070 --> 04:20.320 So the way to update this movie will be to actually update the parent. 04:20.320 --> 04:27.910 And what we can do is we can trigger a function update movie. 04:27.940 --> 04:30.310 We don't have that movie that function yet. 04:30.340 --> 04:31.570 We will create it in a second. 04:31.570 --> 04:34.030 So update movie we will trigger here. 04:34.030 --> 04:38.230 At the moment we don't have it, but what we want to do is we want to have it in props. 04:38.230 --> 04:40.360 So this we've done it before. 04:40.360 --> 04:47.800 We update this movie and we go to our parent and in the movie details, we will use this update movie 04:47.800 --> 04:50.290 and then we will do something here. 04:50.290 --> 04:54.190 So right at the moment this it's not doing anything. 04:54.190 --> 04:58.330 But what we are interested in is actually set selected movie. 04:59.320 --> 05:06.440 And I will show you that the full loop how it actually the data is passing from one component to another. 05:06.440 --> 05:13.100 But at the moment, what we are doing is we will trigger that set selected movie from update movie. 05:13.430 --> 05:22.430 So in my movie details I have when I fetch that movie, I update the movie and actually I need to pass 05:22.430 --> 05:24.680 it result there. 05:25.550 --> 05:31.700 That update movie is coming from the props, so it is actually pass it here update movie. 05:31.700 --> 05:35.270 This will be trigger and I will put it in a state. 05:35.270 --> 05:41.780 But what will happen is that selected movie is actually sent back to the same component. 05:41.780 --> 05:45.200 So it will come back as a movie and it will be updated. 05:45.200 --> 05:48.140 So if I will use this method, it will go to the parent. 05:48.140 --> 05:50.780 It will come back as a selected movie in movie here. 05:50.780 --> 05:51.980 And that should be updated. 05:51.980 --> 05:59.000 So if I will go here and if I will update it now you can see this is actually changed. 05:59.000 --> 06:01.790 And if I will click it here, this is actually changed. 06:01.790 --> 06:06.990 So we if we go to the network you see I'm still updating this. 06:06.990 --> 06:09.300 So three I'm sending this. 06:09.300 --> 06:10.710 I'm getting the data. 06:10.740 --> 06:12.090 I pass it to my parent. 06:12.120 --> 06:14.400 Parent will pass it as a selected movie. 06:14.400 --> 06:15.750 And it's updated here. 06:15.750 --> 06:19.380 So in that case we don't have that state here. 06:19.410 --> 06:21.780 And the movie it is always passed here. 06:21.780 --> 06:27.570 And if we need to tell because we have new information, what is the movie? 06:27.600 --> 06:30.720 We can trigger a function in our parent. 06:30.720 --> 06:36.510 The parent will have that function register and then we trigger this. 06:36.510 --> 06:39.930 So we update of the state of the selected movie. 06:39.930 --> 06:40.620 Like this. 06:40.650 --> 06:47.670 Maybe that's not a perfect case for a designing application like this, but it will kind of show you 06:47.670 --> 06:52.140 how to manage the data and the different component and what is actually available for you. 06:52.170 --> 07:00.150 Another thing is, maybe you've noticed that I have used this function here, a movie clicked and I 07:00.150 --> 07:02.550 pass movie and I have selected movie. 07:02.550 --> 07:07.630 I've done it before, like this with an extra function, but you don't have to also select that movie 07:07.630 --> 07:10.780 is already a function that we can use and I reuse it here. 07:10.780 --> 07:17.650 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 07:17.830 --> 07:24.910 in this function, you see I have that in in stage, I have the method to update that movie and then 07:24.910 --> 07:26.860 I can trigger that directly from here. 07:26.860 --> 07:30.940 So if I will go, go back here and I will click on this one. 07:30.940 --> 07:32.830 You see this is still working. 07:32.830 --> 07:38.620 So you don't have to have um, the extra function for, for, for this one. 07:38.620 --> 07:40.210 Like, like we had it before. 07:40.210 --> 07:43.990 You can trigger that basically directly here. 07:43.990 --> 07:46.600 Because what we had before is we had that function. 07:46.600 --> 07:47.590 We pass it movie. 07:47.620 --> 07:50.260 Movie was a trigger by this one. 07:50.260 --> 07:52.840 And then we update this the state here. 07:52.840 --> 07:53.890 So you don't have to do it. 07:53.890 --> 07:55.570 You can do it directly from here. 07:55.570 --> 07:57.520 I will leave it for for now here. 07:57.520 --> 08:03.430 And just as a reference to show you what has been done, but this is actually fully functional. 08:03.430 --> 08:06.730 Updating the movie wherever we click on rating now.