WEBVTT 00:01.400 --> 00:01.880 Okay. 00:01.880 --> 00:10.430 So what we have is we have a way to send a new data from our UI into our backend services and to our 00:10.430 --> 00:12.350 API and update it in the database. 00:12.350 --> 00:17.840 But if I will change anything here and I will update the movie, there is a new movie there, but the 00:17.840 --> 00:20.390 list on the left hand side is still old. 00:20.390 --> 00:24.410 So we supposed to change it to whatever is there from here. 00:24.410 --> 00:30.560 And if I will click on this, I want to see new data coming there, because this is the data that is 00:30.560 --> 00:31.580 already in the database. 00:31.580 --> 00:34.520 And we kind of cache it here in the, in the component. 00:34.550 --> 00:38.570 So what we need to do is we need to do a similar thing as we've done before. 00:38.570 --> 00:42.950 So if we go to app.js this is a movie details what we had it. 00:42.950 --> 00:51.320 So if we had a new version of it we called Update movie method, which is what basically used the stage 00:51.320 --> 00:52.190 to select it. 00:52.190 --> 00:56.750 We'll need to do a little bit more different and I will show you why in a second. 00:56.750 --> 01:00.930 So what we will need to do is we need to enable that update movie. 01:00.960 --> 01:03.300 We can call it here whatever we like. 01:03.330 --> 01:05.760 And this is the second bit is important. 01:05.790 --> 01:07.770 How are we going to what are we going to trigger. 01:07.770 --> 01:09.510 And I'm not going to trigger this one. 01:09.510 --> 01:11.640 I want to have a new function. 01:11.640 --> 01:15.030 I will call it the same as I call it here. 01:15.030 --> 01:17.340 So update movie is something that we pass to the props. 01:17.340 --> 01:18.930 This is what it will be called. 01:18.930 --> 01:23.130 And here I will need to have constant update movie. 01:23.130 --> 01:27.150 That's going to be a method that will get the movie. 01:29.610 --> 01:33.330 And our function here and we'll do something here. 01:33.360 --> 01:35.310 We'll come back to this later on. 01:35.310 --> 01:36.840 We have that method here. 01:36.870 --> 01:37.740 Update movie. 01:37.770 --> 01:40.620 What we need to do is we need to go to our form. 01:40.620 --> 01:44.490 And inside here we need to enable this okay. 01:44.490 --> 01:50.010 So once it is added here at the moment when we call this we don't do anything with a response. 01:50.010 --> 01:57.750 So I will capture whatever it's coming from that service into constant response and response like this. 01:57.750 --> 01:59.600 And it will be available here. 01:59.600 --> 02:06.140 So as you remember, if you go to API service, either it can be null or it can be a JSON object. 02:06.140 --> 02:09.260 So from here I have it here in that object. 02:09.260 --> 02:13.580 So I can say if response. 02:13.940 --> 02:21.320 So if I have that response it's not null then I will update movie with that response. 02:21.950 --> 02:23.810 So basically this is coming. 02:23.840 --> 02:28.250 If there is no error then it will come as a JSON as a movie. 02:28.250 --> 02:34.190 And I'm checking that if I have that JSON, then I will push trigger that function in the parent component 02:34.340 --> 02:35.870 as I have it here in the props. 02:35.870 --> 02:41.750 We can also have like an error here and then store it error in in the state. 02:41.750 --> 02:46.970 And then I say if no response then show it something in error so we can handle this. 02:47.000 --> 02:49.100 We know how to do it because we've done it before. 02:49.100 --> 02:52.310 But we will go back to app.js here. 02:52.310 --> 03:00.270 And now we have that movie from our API coming back here and it's it is available in the parent services. 03:00.270 --> 03:04.140 So what we need to do it is different than what we've done here. 03:04.140 --> 03:07.860 What I want to do is we want to go through all the movies we have there. 03:07.860 --> 03:13.590 So the problem with that is when we have a new movie here, we don't have a list of movies to update 03:13.590 --> 03:14.730 it in this component. 03:14.760 --> 03:18.930 This is how we design it and it sometimes you have a situation like this. 03:18.930 --> 03:23.790 So at the moment we have a way to select the movie and edit movie. 03:23.790 --> 03:27.090 But the list of movies actually in this component here. 03:27.090 --> 03:31.860 So what we need to do is we need to pass that information to this component. 03:31.860 --> 03:33.120 So how can we do that? 03:33.120 --> 03:35.010 We can create a new variable. 03:35.010 --> 03:39.750 And let's say I will create a new one in state that will be new movie. 03:39.750 --> 03:44.730 So set new movie and by default it is new. 03:44.760 --> 03:47.070 So we will have that function here. 03:47.070 --> 03:49.560 So actually I don't need to have that. 03:49.560 --> 03:55.830 I can actually save it and set it into state directly from here. 03:55.830 --> 04:02.950 So if I will have that a movie form, I can do update movie and I will do a set new movie. 04:02.950 --> 04:06.160 So it will be set into that state. 04:06.160 --> 04:11.650 So at the moment I don't need to have that and I will whatever it's coming from the form, I will save 04:11.650 --> 04:17.080 it here, but we need to pass it here so we know how to do it as well. 04:17.080 --> 04:22.240 So we'll do a new movie like that and I will pass it. 04:22.270 --> 04:27.070 New movie, whatever we have in state here. 04:28.750 --> 04:32.470 So we have new movie, we set it from here, whatever. 04:32.470 --> 04:35.440 We get the update movie and we'll pass it to movie list. 04:35.440 --> 04:43.810 So movie list, if we go to our movie list here, we'll have movie clicked here a already in the props 04:43.810 --> 04:45.490 so I can add a new one. 04:45.490 --> 04:49.030 So new movie and then we can do something about it. 04:49.030 --> 04:53.410 We could do whatever we actually use fetch. 04:53.410 --> 05:00.950 We can fetch a new set of movies from the database, but the point of this tutorial is to show you how 05:00.950 --> 05:06.200 to update different things and deal with different situations, so we are not going to fetch anything 05:06.200 --> 05:07.010 from database. 05:07.010 --> 05:10.550 It will be easy to do and just replace the current movies with a new set. 05:10.550 --> 05:15.140 But if you have like a normal production database, you don't want to fetch it all the time if you already 05:15.140 --> 05:17.390 have that information in your front end. 05:17.420 --> 05:21.410 So what we will do is we will create another, another use effect. 05:21.410 --> 05:24.110 I will do it just above this. 05:24.140 --> 05:27.650 It doesn't really matter where you put it, but I will use use effect. 05:27.650 --> 05:30.860 It will be an arrow function here like that. 05:30.860 --> 05:38.060 And the second argument here, we had it in here we had it uh as an empty array. 05:38.090 --> 05:41.690 That means it will be triggered once whenever you render that component. 05:41.690 --> 05:46.250 But this time what we want to do is we want to put dependency on the new movie. 05:46.280 --> 05:51.080 So that means if you will change this every time you change this, this will be triggered. 05:51.080 --> 05:53.510 So this function will be trigger here. 05:53.510 --> 06:00.220 And what we can do is we can actually find a movie that we will have it based on, on that movie, new 06:00.220 --> 06:04.030 movie that we pass in, in the props and replace it on the go. 06:04.030 --> 06:06.040 So how can we do that? 06:06.070 --> 06:14.740 Basically, basically, I will do constant new movies that will be a new array, that we will create 06:14.740 --> 06:20.080 it and that will be based on the movie and sorry, movies. 06:21.400 --> 06:23.230 So this is my current array. 06:23.230 --> 06:27.670 And I will create a new array and I will use a function map. 06:27.670 --> 06:32.530 So map will allow me to move through all of the movies we have already. 06:32.530 --> 06:41.290 So what I am trying to do is I will have a movie and that that that will be a loop there and I will 06:41.290 --> 06:54.320 check it if movie, the one that I'm looping through ID is equal to new movie ID, whatever I sent here 06:54.320 --> 07:00.440 in the props, so I am checking if the one that we are currently looping through is the same as the 07:00.440 --> 07:06.140 one we pass it here in the props, and I can do ternary operator here, and I can do two things. 07:06.140 --> 07:14.660 So, so if I, if the, the those are the same, what I want to do is I want to return new movie and 07:14.660 --> 07:22.160 if it's not the same ID so that's, that's a different movie, then I will just return movie. 07:22.190 --> 07:24.500 So basically I'm looping through all of that. 07:24.530 --> 07:26.720 That is the current movie that I'm looping through. 07:26.720 --> 07:31.070 I'm checking if that ID is the same as the one that I'm passing in the props. 07:31.070 --> 07:39.380 If it's the same movie ID, I will replace it and return this object in the map the new movie. 07:39.410 --> 07:42.410 Otherwise I will just say keep whatever was there. 07:42.620 --> 07:47.750 So I have a new movies here array with list of new movies with updated. 07:47.750 --> 07:50.810 And I need to do set movies here with a new array. 07:50.810 --> 07:52.110 So set movies. 07:53.640 --> 07:57.750 New movies and it will update it like this. 07:57.750 --> 08:04.980 So if I will save it now and I go here, what I will do is let's say we have that avatar two. 08:05.010 --> 08:10.590 I will click on this and I will remove that avatar and I will do and let me clear all of that. 08:10.590 --> 08:12.000 I will update the movie. 08:14.010 --> 08:14.910 That been sent. 08:14.910 --> 08:17.490 So we have this title here. 08:17.490 --> 08:19.110 This is still not updated. 08:19.110 --> 08:21.030 So we will click on that. 08:21.030 --> 08:23.610 So let's try to debug what happened. 08:23.610 --> 08:29.280 So let's see if we actually console log. 08:31.350 --> 08:32.490 Trigger this. 08:32.490 --> 08:44.790 So inside Useeffect and list I am actually expecting to see something there. 08:44.820 --> 08:46.650 Inside of list should be a unique key. 08:46.680 --> 08:48.870 We can fix that later on. 08:48.870 --> 08:52.890 And that's a warning from react but I will clean it here. 08:52.890 --> 08:57.720 And let's say I will have avatar this so we'll refresh it. 08:57.750 --> 09:00.660 We have avatar already in the database. 09:00.660 --> 09:05.400 So let's say Avatar New and we'll update it. 09:05.400 --> 09:07.410 So inside Useeffect and list. 09:07.410 --> 09:10.110 So that means it is actually triggered there. 09:10.110 --> 09:13.740 So what I can do is is a trigger. 09:13.740 --> 09:15.030 So this one is trigger. 09:15.030 --> 09:17.670 But let's see what's actually in the movie. 09:17.670 --> 09:25.140 So I will do console log and we'll try to print whatever the new array is. 09:25.140 --> 09:30.570 So if we make a mistake then we can actually correct it. 09:30.570 --> 09:36.120 So if I have a avatar new so that's been updated I will revert it to avatar. 09:36.120 --> 09:38.100 And this is my new array. 09:38.100 --> 09:39.750 So I'm printing this one. 09:39.750 --> 09:44.430 So Avatar New is still here in the in the new one. 09:44.430 --> 09:46.650 So we haven't actually changed anything there. 09:46.680 --> 09:54.090 So if I will go here and I can compare two things so I can print movies. 09:54.150 --> 09:55.710 That was the old array. 09:55.710 --> 09:59.580 And that's a new movies, the new array that I added here. 09:59.580 --> 10:07.800 So I can actually go here if I will change this to, um, let's say avatar one more. 10:07.950 --> 10:12.330 So if I will save it, I have two arrays, so I have one and two. 10:12.360 --> 10:17.130 So in the first array which is avatar, that was the original one. 10:17.130 --> 10:20.220 And in the second one it's still the same title. 10:20.220 --> 10:21.960 So that hasn't been changed. 10:22.440 --> 10:28.800 So you see it is kind of path good because we know if we will refresh it now and from the database we 10:28.800 --> 10:29.640 have a new one. 10:29.640 --> 10:33.630 So that means we made a mistake here in this one. 10:33.630 --> 10:39.720 So actually what we can do is we can spread a new movie into an object. 10:39.720 --> 10:45.120 So whatever it's coming from the movie, we will spread it there into objects. 10:45.120 --> 10:46.800 Let's see if that would work. 10:46.800 --> 10:51.280 So Cannot read properties of null. 10:51.370 --> 10:58.570 I think we can go here and I will revert it back to avatar. 10:59.410 --> 11:00.730 So update one. 11:07.900 --> 11:10.540 So it's still the same here. 11:10.630 --> 11:15.250 Let's see actually if the new movie is the one that we are expecting. 11:15.250 --> 11:18.040 So I will print it. 11:18.070 --> 11:19.090 New movie. 11:20.410 --> 11:26.140 We need to do some debugging, but it is very useful actually to see like if you need to check it. 11:26.170 --> 11:26.920 What's going on. 11:26.920 --> 11:29.230 It's it's good to have some debugging skills. 11:29.230 --> 11:36.910 So I will have avatar and I will put avatar new and new movie is actually that's that's the problem. 11:36.910 --> 11:38.680 So this is actually a promise. 11:38.680 --> 11:42.070 This is not a JSON that we are passing here. 11:42.070 --> 11:44.650 So we can't really update it on the promise. 11:44.680 --> 11:48.170 We will need to make that into JSON. 11:48.920 --> 11:56.240 So if I will go to our form, we can actually await our response from here. 11:56.240 --> 11:58.400 And I will put it async here. 11:59.660 --> 12:01.190 So if I will save it now. 12:07.460 --> 12:11.360 Avatar C new movie is coming back. 12:11.360 --> 12:13.250 So this is already fixed. 12:13.250 --> 12:16.160 So this is the the JSON net promise. 12:16.190 --> 12:23.870 And if I will go here and sorry if I go here to avatar. 12:23.900 --> 12:28.100 Avatar new is still there in the original one. 12:31.820 --> 12:33.920 I think I made too much mess. 12:33.950 --> 12:41.540 Anyway, um, so we will keep on going with with this one on the next video as it's been a while in 12:41.540 --> 12:43.100 this video is already a long. 12:43.100 --> 12:47.710 But the thing is that we we need to make sure that we are passing here. 12:47.710 --> 12:51.250 We are passing in our movie list. 12:51.280 --> 12:52.150 A correct data. 12:52.150 --> 12:53.560 So we need to make sure the new movie. 12:53.560 --> 12:55.630 Is there something that we pass here. 12:55.630 --> 12:56.890 And we already proved that. 12:56.890 --> 12:58.780 So we fix it with a JSON. 12:58.780 --> 13:02.350 And we need to make sure that this is also good. 13:02.350 --> 13:05.770 And we set it to oh I know what why it's not working. 13:05.770 --> 13:07.360 So I replace this. 13:07.360 --> 13:10.660 So set movies supposed to be new movies here. 13:10.660 --> 13:12.880 So that should fix the problem. 13:12.880 --> 13:15.130 And we can move forward from this. 13:15.130 --> 13:16.360 So we have avatar. 13:16.360 --> 13:21.040 And if I do avatar new and update it I have an avatar new here. 13:21.040 --> 13:27.910 So we had a few bugs that came into our picture, but we fixed it all and we have a way to notify the 13:27.910 --> 13:31.390 parent, move that data to another component. 13:31.390 --> 13:35.380 And what we have here is we have a new useeffect. 13:35.380 --> 13:40.750 So whatever, I will have a new movie that will change, this will trigger and it will change the list 13:40.750 --> 13:41.980 of the movies automatically. 13:41.980 --> 13:44.560 So we don't need to fetch it from database anymore.