WEBVTT 00:01.380 --> 00:02.040 Okay. 00:02.040 --> 00:06.810 In this video, we'll come back to our edit screen here. 00:06.810 --> 00:13.880 And what we will do is we will reuse whatever we have here for actually creating a new movie as well. 00:13.890 --> 00:18.840 What we have so far is we have rating the the the movie. 00:18.840 --> 00:20.700 We have a list of movies here. 00:20.700 --> 00:26.580 So list of movies here and then the details about the movie rate, movie, edit, movie. 00:26.580 --> 00:30.240 So what we need to do is we need to also create a new movie. 00:30.240 --> 00:34.170 And what I will do is I will create create it here. 00:34.170 --> 00:40.470 So I will have a button here to add a new movie and then we will like it will be bring to the edit. 00:40.470 --> 00:42.990 And from there we can come back to this list. 00:42.990 --> 00:47.940 So what we can we do, I will go into the details here. 00:47.940 --> 00:51.660 And as you remember, we had the title navigation. 00:51.960 --> 01:05.040 So what I could do is I can copy that and inside our list JS I can also reuse it. 01:05.040 --> 01:08.550 So in this case it's not going to be detail. 01:08.670 --> 01:11.310 Our component is movie list. 01:11.490 --> 01:22.710 So I will have movie list here and then we can have a title which is going to be fixed, a list of movies 01:23.220 --> 01:26.250 like this, and then we can have it orange, the same style. 01:26.250 --> 01:27.240 It doesn't really matter. 01:27.240 --> 01:30.540 We are interested more in the header, right, which is the button. 01:30.540 --> 01:36.060 So this will be add, add new and we can have it color. 01:36.060 --> 01:43.800 And then on press we will do navigate, edit and this we are not going to pass the movie from the params 01:43.800 --> 01:45.510 as we did there. 01:45.510 --> 01:56.730 What we can actually do is we can pass an object and we can pass a title of none and then we can pass 01:56.730 --> 01:57.780 a description. 02:00.550 --> 02:01.530 Of none. 02:01.540 --> 02:04.540 So basically what I'm passing is title and description. 02:04.540 --> 02:10.240 This is what we will need to have in the edit so we can find variable button. 02:10.240 --> 02:19.000 And what we need to do is we need to copy that and we need to also include it here, import it. 02:20.320 --> 02:21.340 Okay, we have this. 02:21.370 --> 02:24.850 We have a list of movies that's a new title and then we have Add new. 02:24.850 --> 02:33.580 So if I click here I am in the list of movies here, and then we have a title and then we have a description 02:33.580 --> 02:34.030 here. 02:34.030 --> 02:40.120 So the reason why you see a list of movies because when you click back here, you will be here. 02:40.120 --> 02:46.030 So this is the last screen that you were on clicking on that button. 02:46.030 --> 02:51.040 So we have Add new and we now have a title here because we are at the moment, we don't have a title 02:51.040 --> 02:56.740 yet and this is empty and this is empty because we pass that. 02:58.390 --> 02:59.740 Empty objects here. 02:59.740 --> 03:02.410 So our movie is title and description. 03:02.410 --> 03:04.840 So this is what we are passing there. 03:04.840 --> 03:12.850 So what we can actually do if we go back here, what we are using is we are using here a movie ID and 03:12.850 --> 03:20.110 this is for Save Movie A This time it's not going to be a ID because we don't want to. 03:20.140 --> 03:25.240 We first we don't have an ID yet and first we don't want to do a put. 03:25.270 --> 03:34.150 We would like to do a post so we can actually use this movie ID for differentiate our call. 03:34.150 --> 03:49.210 So what I can do is I can say if and then I can do movie ID If we have movie ID, then we can I will 03:49.930 --> 04:02.500 cut this here and put it there and then I will indent that a little bit so I can indent that part. 04:02.680 --> 04:07.450 And then else that means we don't have an ID and this will be our case. 04:07.450 --> 04:13.690 When we do add new, then we can have another call similar. 04:13.690 --> 04:16.030 We can actually make it more reusable. 04:16.180 --> 04:21.670 At the moment I just copy and paste, but this could be extracted to our variable somewhere, somewhere 04:21.670 --> 04:22.150 else. 04:22.150 --> 04:28.030 And a lot of this stuff is just repeated so we could just put it outside. 04:28.030 --> 04:30.910 But you, uh, you already know how to do it. 04:30.910 --> 04:32.620 So do it yourself. 04:32.620 --> 04:37.870 And I will just make it clean here so you will see exactly what what is happening. 04:37.870 --> 04:42.130 So I will do post here and then this. 04:42.130 --> 04:49.330 We are not we don't want to pass any ID here because we will pass the new post, a new movie there token 04:49.390 --> 04:51.250 and that stays the same. 04:51.250 --> 04:59.120 We will also pass title and description here and then we can do something wherever we have the movie. 04:59.120 --> 05:06.950 So basically, if we go if we get back the movie, we would like to come back to the homepage, which 05:06.950 --> 05:11.840 is if you remember, movie list, that's where we need to go. 05:11.840 --> 05:16.460 So here and we don't need to pass any params there. 05:17.360 --> 05:21.620 So let's, uh, test it now how it works. 05:21.620 --> 05:32.830 If I go here, add new and I will say Terminator and then sci fi. 05:32.930 --> 05:34.640 Oh, that's supposed to be. 05:36.610 --> 05:38.950 Sci fi movie, and I will save it here. 05:39.190 --> 05:40.930 I'm actually here. 05:40.930 --> 05:48.790 I don't see the list of movies here, but what I'm assuming is that if I will refresh it, I will have 05:48.790 --> 05:50.140 a new video here. 05:50.140 --> 05:53.410 So let me do some changes here. 05:53.410 --> 05:54.430 I will save it. 05:54.790 --> 06:01.420 And you can see Terminator is here, so I will double check if actually we have, uh, that movie. 06:01.420 --> 06:13.360 So it's has zero now ratings and I can edit and I can say sci fi movie from 80s like this if I will 06:13.360 --> 06:13.990 save it. 06:13.990 --> 06:16.150 You can see this has been saved. 06:16.150 --> 06:23.410 And so our edit and our post, it's working fine using the same component. 06:23.410 --> 06:31.990 So in this case we are updating that and we can actually update this put on a field as well if you like. 06:31.990 --> 06:33.790 So what we could do is. 06:35.030 --> 06:45.080 We can use the same kind of if movie ID so I can go here and we can find our button on press save movie 06:45.110 --> 06:46.270 title, save. 06:46.280 --> 06:52.700 So what we can do is this title is static now, but I could make it dynamic, so I will put it like 06:52.700 --> 06:57.170 this and then we can do movie ID. 06:57.350 --> 06:59.980 If it's movie ID, then it's going to be safe. 06:59.990 --> 07:10.010 Otherwise it's going to be so we can do edit and then otherwise we'll do add. 07:11.890 --> 07:19.510 So if I click here, I can see ad if I will select a specific movie here, I will have. 07:19.510 --> 07:26.290 Edit So you can see based on the conditional, if we have the ID of the movie or not, we can actually 07:26.290 --> 07:28.750 change the user interface as well. 07:28.900 --> 07:32.740 So that's it for updating and posting movies.