WEBVTT 00:01.420 --> 00:01.990 Okay. 00:01.990 --> 00:05.110 We have an option to create a new movie. 00:05.140 --> 00:10.480 Now what we can do is we can actually allow users to remove the movie. 00:10.480 --> 00:13.790 So that will be our last method, which is delete. 00:13.810 --> 00:15.510 So how can we do that? 00:15.520 --> 00:17.800 And you can place it in any, any place. 00:17.800 --> 00:23.110 So one place will be here wherever you see that movie. 00:23.110 --> 00:34.120 But if you kind of design the user interface, it, it is a good idea to put all the kind of admin controls 00:34.120 --> 00:35.140 in one place. 00:35.140 --> 00:43.420 So you don't want a normal user to go like here and read the movie and in the same screen removing so 00:43.420 --> 00:46.030 we can have it actually every everything here. 00:46.030 --> 00:54.220 So whatever you will edit you can also pick up to save the the current movie or we can remove it. 00:54.220 --> 00:56.140 So I will add a remove here. 00:56.140 --> 01:01.840 And actually I have a space here so I can remove it or you can place a button here or anywhere in the 01:01.880 --> 01:03.380 in this space. 01:03.380 --> 01:04.730 It's really up to you. 01:04.730 --> 01:10.250 But I will put it here, delete button and then we can have remove. 01:10.250 --> 01:11.990 So how can we do that? 01:11.990 --> 01:13.910 Basically we've done that before. 01:13.910 --> 01:22.310 So what I can do is I can just copy and paste my header, right and that will be easier. 01:22.310 --> 01:26.660 So I will put it here in the navigation options inside the edit. 01:26.660 --> 01:31.580 So this time the title will be, let's say remove. 01:31.970 --> 01:33.470 We can have it like that. 01:33.470 --> 01:40.340 And then what we can do is whenever we press, then we can trigger some function here. 01:40.400 --> 01:47.780 So I can create a new constant and I say remove clicked. 01:47.780 --> 01:50.330 And that's going to be an arrow function here. 01:54.460 --> 01:58.000 And I can trigger that function from. 01:58.690 --> 02:03.970 Actually, I can trigger that function from here, but I would like to pass something to that function. 02:03.970 --> 02:07.300 So what I will do is I will pass that movie. 02:07.540 --> 02:13.030 So remove clicked and I will pass screen props, navigation, get params. 02:13.930 --> 02:15.220 This movie here. 02:15.220 --> 02:19.210 So I will pass it here and I will have that movie. 02:19.210 --> 02:21.460 So if I will do console.log. 02:23.200 --> 02:27.220 Let me print the movie here and see if that works. 02:28.330 --> 02:32.410 So we go here, we add it, and then we have a new remove here. 02:32.410 --> 02:36.670 If I will click it then can find variable console. 02:37.090 --> 02:37.870 I misspell it. 02:37.870 --> 02:40.780 Console like this. 02:44.610 --> 02:52.050 So once again I click remove and you can see I have all the information about the movie because I just 02:52.050 --> 02:55.500 pass it through the get params from here. 02:55.740 --> 03:00.210 Or I can get actually this movie from in this function as a really matter. 03:00.210 --> 03:08.430 So once I have it here, what I can do is I can use similar thing as we have done before with post and 03:08.430 --> 03:13.320 with a get with a put and we'll use the fetch. 03:13.320 --> 03:22.170 So I will just copy this bit of code and I will go here and I can paste it here. 03:22.170 --> 03:23.790 So what's our URL? 03:23.820 --> 03:25.500 URL will be the same as the put. 03:25.500 --> 03:26.760 So we need to have movies. 03:26.760 --> 03:34.860 We need to have an ID because we want to remove the specific one and this method will be delete like 03:34.860 --> 03:35.400 this. 03:35.400 --> 03:45.210 And then what we can have is we need to have the headers and then we don't need to provide anybody and 03:45.210 --> 03:52.050 then we can do the Json and actually not and will be here returned from the remove. 03:52.080 --> 03:53.250 It will be empty. 03:53.250 --> 04:02.310 So we don't need to have actually that step here and then we can do something here. 04:02.310 --> 04:10.080 So what I would like to do after I remove this, I would like to go to the our application, which is 04:10.080 --> 04:13.530 the movie list, and I will paste it here. 04:13.530 --> 04:16.020 And I don't want to actually. 04:19.310 --> 04:20.540 Path, anything there. 04:20.540 --> 04:24.830 So whatever we remove it, then we'll come back to the list here. 04:24.830 --> 04:30.320 So I will go Terminator and I will go edit and I will do remove. 04:31.490 --> 04:35.390 And actually we have some problems. 04:35.390 --> 04:41.000 Cannot find variable props and probably we use something here. 04:44.660 --> 04:47.330 Okay, so props, navigation, navigate. 04:47.330 --> 04:53.390 And because the props here is expected that I will have this props here. 04:53.390 --> 05:00.530 But props was used actually here in the component and I am outside of the component now. 05:00.530 --> 05:08.660 So what I could do is we have that screen props here and what I could do is I could actually pass the 05:08.660 --> 05:11.690 screen props to this function. 05:11.690 --> 05:16.670 So what I can do is we can I will copy that first. 05:17.270 --> 05:19.490 So this is what I'm passing at the moment. 05:19.490 --> 05:22.850 I'm passing the movie and I will copy that here. 05:22.850 --> 05:27.140 So I will do constant movie like this. 05:27.140 --> 05:35.360 So we'll move it this and instead of passing that a param movie, I will pass the whole screen props. 05:35.360 --> 05:41.000 So this will be props here and this will be props. 05:44.220 --> 05:49.110 So now I kind of pass the whole props into the function. 05:49.110 --> 05:56.370 So this will be props and I can get the movie as I got it before and then I will have an access also 05:56.370 --> 05:58.220 to the props navigation navigate. 05:58.230 --> 05:59.820 So if I will save it now. 06:01.290 --> 06:05.760 So it's you you can see that has been already removed. 06:05.760 --> 06:10.770 So we'll do another two and I will do remove and I'm back here. 06:10.770 --> 06:17.940 I can still see that here because I haven't updated that list yet, but this is already gone. 06:17.940 --> 06:22.830 And to prove it, what I could do is I could change that to response. 06:22.830 --> 06:24.420 For example, because we don't use it. 06:24.420 --> 06:27.540 If I will save it, I'm expecting it's not going to be here. 06:27.570 --> 06:29.010 Okay, that's good. 06:29.010 --> 06:34.440 But whatever we are here, we still have a kind of outdated list of the movies. 06:34.440 --> 06:37.590 So whatever we change, we add, we, we edit. 06:37.650 --> 06:39.930 It is still updated. 06:40.050 --> 06:42.370 A outdated list. 06:42.370 --> 06:52.270 So what we could do is whatever we change the if I will make a little bit more space because it's getting 06:52.420 --> 06:52.990 larger. 06:52.990 --> 07:02.530 So whatever we actually, uh, we need to go into the list here and a little bit here. 07:02.530 --> 07:10.660 So we use an effect and we fetch the data only when we start that component here. 07:10.660 --> 07:20.470 So it is only once when we do it and we could actually change the way this is working and we can update 07:20.470 --> 07:22.060 it every time it's changed something. 07:22.060 --> 07:26.380 If I will remove it now, it will be based on the render. 07:26.380 --> 07:28.600 So we have the Titanic three. 07:28.600 --> 07:34.690 If I will come back here and change the Titanic three to just Titanic. 07:35.140 --> 07:37.300 So I will edit that. 07:37.300 --> 07:39.460 And then we have Titanic go to movies. 07:39.490 --> 07:41.680 You can see this is Titanic. 07:41.680 --> 07:48.910 So if I will add a new and let's say back again Terminator like that. 07:53.570 --> 07:54.260 Like that. 07:55.130 --> 08:02.570 And then you can see we have the Terminator, because this time what we do is we update the movie. 08:02.570 --> 08:07.790 Every time we render, we fetch a new version of of the movies. 08:07.910 --> 08:10.240 Every every time we render something. 08:10.250 --> 08:14.510 This might have a bad effect on your user interface. 08:14.510 --> 08:21.890 So use it wisely, because if you have more things on the page here and if if if you trigger something 08:21.890 --> 08:29.090 that will refresh the page, you will you will be asking for the new list of the movies all the time. 08:29.090 --> 08:30.980 So it's really up to you. 08:30.980 --> 08:37.580 You can actually specify what should trigger, what kind of changes should trigger the new fetching 08:37.580 --> 08:38.480 new API. 08:38.510 --> 08:42.350 But with our limited user interface, this is fine. 08:42.350 --> 08:48.410 So we will fetch the new list of movies, whatever we add, whatever we edit and wherever we remove 08:48.410 --> 08:49.580 the movie.