WEBVTT 00:02.030 --> 00:08.120 Okay, so we have a way to update the movies, but what we don't have is we don't have a way to create 00:08.120 --> 00:08.480 movies. 00:08.480 --> 00:12.380 And what we will do in this video is enable that as well. 00:12.380 --> 00:15.680 So we have almost everything here in the pieces. 00:15.710 --> 00:17.900 We will reuse the same form as the. 00:17.900 --> 00:20.720 Creating a movie is very similar to updating movies. 00:20.720 --> 00:22.790 So let's do that first thing first. 00:22.820 --> 00:25.610 What we need to do is we need to have a button. 00:25.610 --> 00:32.270 So I will go back to my application here and here when we have a movie list I will wrap this with a 00:32.270 --> 00:33.050 div. 00:33.590 --> 00:35.960 So basically because this is a grid. 00:35.960 --> 00:41.480 So we want to have this on the same kind of column as it were, as it was before. 00:41.480 --> 00:43.310 So I will wrap it like this. 00:43.310 --> 00:45.230 And then we can have a button here. 00:45.230 --> 00:46.640 So I will have a button. 00:46.640 --> 00:53.360 That button will be create new movie for example like this. 00:53.360 --> 00:55.310 And then we need to have onclick. 00:55.310 --> 00:59.180 So onclick whenever we click it. 00:59.180 --> 01:01.580 And I will say create new. 01:03.580 --> 01:12.490 Movie method I will trigger from here, so I also want to have it mouse click event here. 01:12.490 --> 01:14.110 So create new movie. 01:14.950 --> 01:18.430 We need to create that function here. 01:18.460 --> 01:22.270 That's not going to take any parameters and will trigger. 01:22.270 --> 01:27.190 So basically when we click it then we will do something here. 01:27.190 --> 01:33.190 So what we want to do is we want to use the same movie form. 01:33.640 --> 01:40.060 So movie form at the moment what we've done is basically it works on the edited movie and we pass it 01:40.060 --> 01:41.200 here as a movie. 01:41.230 --> 01:50.200 We could edit that movie basically is an object, so we could use that to kind of mimic what we need. 01:50.230 --> 01:55.360 So at the moment, if we'll pass it as a null, the component is not going to be created. 01:55.360 --> 01:58.150 So we could do some a hack. 01:58.180 --> 02:08.770 So we could say we will pass the title of empty And description of empty string. 02:08.770 --> 02:13.180 That means it's not going to be an empty object, so it will be rendered, but title and description 02:13.180 --> 02:14.440 will be null. 02:14.440 --> 02:21.760 So if I will go here and if I will have that put on here, maybe it's not styled as a button, but it 02:21.760 --> 02:22.270 doesn't matter. 02:22.270 --> 02:24.970 But if I will click on this one. 02:25.000 --> 02:27.220 And so let's, let's say I have this one. 02:27.220 --> 02:31.090 If I would click on this one, I have that form here. 02:31.090 --> 02:33.040 So it is a kind of working. 02:33.040 --> 02:34.630 But we need to also remove this one. 02:34.630 --> 02:37.330 So I will do this similar thing as we've done it before. 02:37.330 --> 02:42.730 So you see when we do this edit with that selected edited movie. 02:42.730 --> 02:44.410 But we deselected this one. 02:44.410 --> 02:47.470 So I will do exactly the same as we had it. 02:47.470 --> 02:49.900 But this time I will pass the empty object. 02:49.900 --> 02:53.170 So if I will go here and refresh it. 02:53.170 --> 02:58.840 So if I will click on Create New movie, I have the form with title and description empty. 02:58.840 --> 03:06.930 So it is working fine, but what we need to do is we need to tell in the movie form, if that's actually 03:06.930 --> 03:09.390 update or create, how can we do that? 03:09.390 --> 03:12.690 So I will go to movie form and what's the difference. 03:12.690 --> 03:14.820 So we have like title and description here. 03:14.820 --> 03:19.980 But if we pass the entire movie that movie has other things into it. 03:19.980 --> 03:26.220 And what's unique about it is ID so if it's something coming from database, we will have that movie 03:26.250 --> 03:31.230 ID otherwise we'll have just title and description as we send it from here. 03:31.230 --> 03:32.970 So title and description is here. 03:32.970 --> 03:38.040 So based on the fact that if the movie has an idea we can change this component here. 03:38.040 --> 03:43.110 So what I can do is say here on the button first thing first I will do visual thing. 03:43.110 --> 03:58.260 So I will say if movie ID then we can have I will cut it here and I will put it here. 03:58.290 --> 04:00.990 Otherwise I will use ternary operator. 04:01.020 --> 04:02.460 I will have another button. 04:02.460 --> 04:12.120 So basically we check Eve that movie has an idea ID if we pass it the one from a database for editing, 04:12.120 --> 04:20.160 then it will have an ID, it will be update movie, otherwise it will be great movie. 04:20.220 --> 04:23.730 And we can say create movie like this. 04:23.730 --> 04:28.350 So if I will test it now and we have great movie is not defined. 04:28.380 --> 04:28.650 Okay. 04:28.680 --> 04:31.290 So I need to have that method here. 04:31.290 --> 04:36.540 I will just duplicate it whatever I have here and have the create movie for now. 04:36.540 --> 04:40.530 And so if I will go here you see this is create movie. 04:40.530 --> 04:46.770 So if I will click on let's say I will click on Titanic here and I have updated movie if I will click 04:46.770 --> 04:47.400 on here. 04:47.400 --> 04:49.290 This is actually not updating. 04:49.290 --> 04:52.350 So whatever you see I am clicking on this. 04:52.350 --> 04:53.460 This is not updating. 04:53.460 --> 04:56.250 So I need to kind of click on this component and then click on that. 04:56.250 --> 04:58.860 And this will be updated then with that. 04:58.860 --> 05:00.870 So every time I switch component is fine. 05:00.870 --> 05:04.470 But if I will click on this one it's not going to trigger the same with this one. 05:04.470 --> 05:05.840 So we can actually fix that. 05:05.840 --> 05:08.300 Now, if I will go here. 05:08.330 --> 05:15.230 Why this is happening is because the movie form will have that movie and it's not going to rerender 05:15.260 --> 05:20.690 one once it is there, it's not going to rerender with a new data because we passed the new data. 05:20.690 --> 05:24.920 We need to actually tell it that we want to rerender this and change. 05:24.920 --> 05:28.100 So what we could do is we could use state. 05:29.990 --> 05:31.010 We've done it before. 05:31.010 --> 05:37.490 So that's a method that will tell the component new state will tell the component that something has 05:37.490 --> 05:39.020 been changed and do something. 05:39.020 --> 05:41.330 So I will have an arrow function. 05:41.330 --> 05:48.560 And in the dependency here what we can say if the movie has been changed then do something here. 05:48.560 --> 05:55.070 So what we want to do at the moment, what we've done is when we render this component, we set the 05:55.070 --> 05:58.160 state for default values, movie title and movie description. 05:58.160 --> 05:59.690 We could actually do it here. 05:59.690 --> 06:07.790 So if we have new movie then we set title to Movie title. 06:11.510 --> 06:17.210 And if we have a description we have we can set it here. 06:17.210 --> 06:21.980 So basically this will be the similar as we've done it before. 06:21.980 --> 06:24.980 But we are not setting the default movies whenever we render. 06:24.980 --> 06:26.420 We will set that here. 06:26.420 --> 06:30.710 So we can actually put it like empty values here whenever we start render. 06:30.710 --> 06:33.230 But if we have a new movie then we will. 06:33.230 --> 06:36.410 This will be trigger and a new state will set those. 06:36.410 --> 06:40.430 So basically that will kind of we have some error in the view state. 06:40.460 --> 06:42.530 It has already been declared. 06:42.950 --> 06:43.400 Sorry. 06:43.430 --> 06:45.050 This is I made a mistake. 06:45.050 --> 06:48.530 So that's supposed to be use affect probably. 06:48.530 --> 06:51.800 You screamed at me and for that reason. 06:51.800 --> 06:56.150 So use effect is the the one we want to use here. 06:56.150 --> 07:01.490 So if I go back here and if I go and click on this one, I have Titanic. 07:01.490 --> 07:03.590 If I click on this one I have avatar. 07:03.590 --> 07:05.840 If I click on this one, I have a new movie. 07:05.840 --> 07:09.160 So we already have this in place and fixed. 07:09.160 --> 07:12.730 So what we need to do is in the movie. 07:12.760 --> 07:17.470 Form, we already have two different versions of safe movie and Create movie. 07:17.500 --> 07:24.610 So we can actually we already have this method here, but we still call it API. 07:24.640 --> 07:25.600 Update movie. 07:25.600 --> 07:30.250 So if I will go API service, what we can do is we can create another method. 07:30.250 --> 07:33.190 So I will copy that and I will paste it here. 07:33.190 --> 07:35.020 This will be create movie. 07:36.970 --> 07:43.570 We are not going to pass movie ID because we don't have that ID we will definitely pass ID a body. 07:43.570 --> 07:48.430 So what we want to do is we want to use a post method on. 07:48.430 --> 07:52.000 Without that ID and this this will be the same. 07:52.000 --> 07:55.660 We'll pass the body and then we'll do response as it was here. 07:55.660 --> 08:03.550 So going back to our movie list, what we do here instead of having that update movie we'll do create 08:03.550 --> 08:03.880 movie. 08:03.910 --> 08:06.820 We'll call this function function here. 08:06.820 --> 08:13.600 And we don't need to pass movie ID, just upload it here and then if we have that movie then we can 08:13.600 --> 08:14.890 do something about it. 08:14.890 --> 08:18.670 So at the moment I'm not going to do this because that's what we have done it. 08:18.670 --> 08:19.870 But let's test it now. 08:19.870 --> 08:29.080 So if I will go here and if I will have create new movie and a new test, some description here. 08:29.080 --> 08:36.460 If I will create a movie, we can go to the network and see if we actually this, this has been successful. 08:36.460 --> 08:39.070 So I will go to movies. 08:39.100 --> 08:42.760 That was uh, let's see. 08:42.760 --> 08:44.860 So here movies that was posed. 08:44.860 --> 08:49.750 And what we had is we sent a title, new test and description, some description. 08:49.750 --> 08:52.840 And the response was new movie with ID seven. 08:52.840 --> 08:53.860 So it was there. 08:53.890 --> 09:00.820 If I refresh it now, the new test is actually taken from the database and I have it here, so it is 09:00.820 --> 09:01.600 working fine. 09:01.600 --> 09:06.940 We have a new method of creating movie with our UI, but we'll need to fix few things because at the 09:06.940 --> 09:09.670 moment our list is still not updated.