WEBVTT 00:00.500 --> 00:06.890 Okay, so we've done a way to update our movie or update the rating for our movie, but we don't have 00:06.890 --> 00:10.580 anything to change the movie from our UI at the moment. 00:10.580 --> 00:16.370 We can do it with our API, but we need to enable that in our A web application here. 00:16.370 --> 00:19.670 So what I want to do is I want to add extra things here. 00:20.000 --> 00:25.340 So first thing first on for each movie here that we have it I will add two extra icons. 00:25.550 --> 00:26.330 So let's do that. 00:26.330 --> 00:32.030 First I will go here and we will go to movie list here. 00:32.030 --> 00:41.060 So this movie list what we have is at the moment we have just a simple text to H2, but we can actually 00:41.060 --> 00:43.190 go here and add some icons. 00:43.190 --> 00:44.990 So we will need two icons. 00:44.990 --> 00:47.750 So I will go back to our page. 00:47.750 --> 00:49.190 We have react icons here. 00:49.190 --> 00:52.010 And we'll need to have one for edit. 00:52.010 --> 00:54.320 And we can find some. 00:55.100 --> 00:58.100 For example maybe that would be good. 00:58.100 --> 00:59.780 So we can have this one. 01:00.590 --> 01:03.500 It is kind of similar style of lines and everything. 01:03.500 --> 01:05.860 But you can pick any any one you like. 01:05.860 --> 01:08.920 So I will go here and I will import that first. 01:08.920 --> 01:13.570 So the top I will have one icon for for edit. 01:13.570 --> 01:17.290 And I will have another one for delete. 01:17.590 --> 01:19.150 And we'll use it later on. 01:19.150 --> 01:21.100 So let's say this one. 01:21.100 --> 01:25.000 And so this is from a different library but I don't mind. 01:25.000 --> 01:26.380 So I will copy that. 01:26.380 --> 01:29.860 And then we can go here and we have to new icon. 01:29.860 --> 01:32.440 So I will add two icons here. 01:36.910 --> 01:38.530 So for edit. 01:39.040 --> 01:43.660 And then the second one was MD delete. 01:44.140 --> 01:45.970 And I will have it here. 01:47.680 --> 01:51.610 So if I will go here I should see the icons here. 01:51.730 --> 01:53.230 We'll do the styling later on. 01:53.230 --> 01:58.900 But at the moment what I will try to do in this video is to enable editing this. 01:58.900 --> 02:02.320 So if I will click on this one, I want to load a movie as it was. 02:02.320 --> 02:08.530 But if I will click on the edit, I want to edit that video and we'll create a kind of form for for 02:08.560 --> 02:09.610 that movie. 02:09.630 --> 02:11.640 So let's create a new component. 02:11.670 --> 02:17.190 I will right click New File and I will name it movie Dash. 02:17.220 --> 02:18.120 Form. 02:19.080 --> 02:31.770 And then J6 here what we need to do is I will do export default and movie form. 02:33.510 --> 02:36.600 And that's going to be our component. 02:36.630 --> 02:42.480 I need to return and let's say I will return if. 02:48.810 --> 02:52.770 Inside here we can put maybe our h1. 02:54.570 --> 02:55.440 H1. 03:03.600 --> 03:06.570 Movie form goes here we have a new component. 03:06.930 --> 03:09.270 Sorry I need to put a function here. 03:09.330 --> 03:10.170 Forgot about that. 03:10.170 --> 03:14.690 So we have a new form component that we can inject somewhere. 03:14.720 --> 03:16.340 So I will go for now. 03:16.340 --> 03:19.850 Here and inside here I can put it here. 03:19.850 --> 03:22.880 So if I will do it like this, it will be auto imported for me. 03:22.880 --> 03:25.520 So, uh, actually it is not. 03:25.520 --> 03:34.490 So what we'll do is import movie form from components and then we have movie form. 03:35.360 --> 03:38.120 So we have a new new movie form there. 03:38.120 --> 03:42.560 If I will go back to application, you can see here movie form goes here. 03:42.560 --> 03:50.570 So what we want to do is we want to tell our application that we clicked on either one or another. 03:50.570 --> 03:55.640 At the moment in the movie list, what we have is movie clicked and then we have set selected movie. 03:55.670 --> 04:03.050 What we can do is we can duplicate this and instead of having a second one selected, we can say edited 04:03.050 --> 04:05.120 and set edited movie. 04:07.520 --> 04:10.340 And we will start with null as well. 04:10.340 --> 04:14.480 So we have another state here that we can store some information here. 04:14.480 --> 04:20.870 So the same way as we've done it here when we clicked on the movie Then we have set selected movie. 04:20.870 --> 04:31.640 Then we had we can do edit movie and we will trigger this function set edited movie. 04:33.110 --> 04:35.330 So it's similar to what it was before. 04:35.330 --> 04:39.080 But now we have like edit movie, another method that we can call. 04:39.080 --> 04:44.210 So going back to movie list here, you see this was our one method. 04:44.240 --> 04:47.750 And I can say I have another method here. 04:48.830 --> 04:53.090 And if while we scroll here this is what we have done before. 04:53.090 --> 05:00.920 So when we click on that h tag on that H2 tag, we have a mouse event. 05:00.920 --> 05:04.010 And then we use movie clicked and we pass that movie. 05:04.040 --> 05:07.790 So I will do the same with our edit here I will do onclick. 05:07.820 --> 05:09.620 There is a mouse mouse event. 05:09.620 --> 05:13.550 We will do edit movie. 05:17.210 --> 05:19.070 And then we will pass movie. 05:19.070 --> 05:27.400 So this edit movie will be trigger from here, and then we will go back and I will call that for now. 05:27.820 --> 05:29.140 It will go back here. 05:29.140 --> 05:30.070 This will be trigger. 05:30.100 --> 05:32.620 Then it will be set in our state. 05:32.650 --> 05:34.900 At the moment we don't really do much with this. 05:34.900 --> 05:36.340 So it is stored here. 05:36.340 --> 05:43.480 But once it is stored, which one has been clicked as edit, then we can actually pass it to movie form. 05:43.480 --> 05:46.810 So the same way as if we've done it here with movie details. 05:46.810 --> 05:52.210 This time we will not pass the selected movie, but we will pass movie and we can name it whatever you 05:52.210 --> 05:56.770 like, but I will call it movie and then we'll pass edited movie. 05:56.770 --> 05:59.560 So I will go back again to movie form. 05:59.560 --> 06:02.080 This time we will get. 06:02.410 --> 06:05.530 So we'll do curly braces here, we'll get the movie. 06:05.530 --> 06:11.890 And what I can do is I can say if we have a movie, I will do end to end. 06:15.610 --> 06:20.200 And then I will say movie title. 06:21.280 --> 06:25.420 So if we pass movie to this component then we will render. 06:25.450 --> 06:31.920 So this this is actually checking if we have that movie, then we will render this with a movie title. 06:31.920 --> 06:35.640 And in here I'm passing that movie from edited. 06:35.640 --> 06:39.990 So at the moment when we start application edit, it is null. 06:39.990 --> 06:46.830 So edit movie we have that trigger here, so it will be trigger whenever we click on that edit icon. 06:46.830 --> 06:48.360 From here it will be selected. 06:48.360 --> 06:52.050 Here it will be passed to movie our new component movie form. 06:52.050 --> 06:54.360 And here we'll have a conditional to display. 06:54.360 --> 06:58.530 So if I will go back here and at the moment nothing is displayed. 06:58.530 --> 07:04.410 So if I will click on on the heading here the normal movie is displayed. 07:04.410 --> 07:11.280 But if I will click on the second one here you see movie form goes here and that's another trigger, 07:11.310 --> 07:12.240 another state. 07:12.240 --> 07:15.480 And we have another way to display things. 07:15.480 --> 07:18.240 And you see that I have that Titanic here. 07:18.240 --> 07:20.400 If I click on this one I have avatar. 07:20.400 --> 07:25.200 So in the same way as we've done it with this one, now we are passing something different and we will 07:25.200 --> 07:31.650 use it to update that movie or create a form, and then that form will update the original movie.