WEBVTT 00:00.890 --> 00:01.550 Okay. 00:01.580 --> 00:06.530 The last bit from our code is to allow users to remove the movies from here. 00:06.530 --> 00:10.100 So we have that icon here, the trash icon, but we haven't used it yet. 00:10.100 --> 00:16.040 So in this video what we'll do is we'll enable removing movies from our database using UI. 00:16.070 --> 00:16.580 Okay. 00:16.610 --> 00:19.160 So let's go and go back to the code. 00:19.160 --> 00:21.950 And what we have here is we have that icon here. 00:21.950 --> 00:25.220 So what we need to do is we need to enable clicking on this. 00:25.220 --> 00:26.660 So we'll just copy that like this. 00:26.660 --> 00:28.280 So we will have an event. 00:28.280 --> 00:31.790 And then what we will do is we will trigger a function. 00:31.790 --> 00:37.460 So let's say the function will be remove movie like this. 00:37.910 --> 00:44.150 And what we also need to do is we need to provide movie because we need to know which one to remove. 00:44.180 --> 00:45.380 This is actually loop. 00:45.380 --> 00:48.380 So each of the movie will have its own icon. 00:48.380 --> 00:50.720 So we will pass that movie to that function. 00:50.720 --> 00:53.420 So let's create one here. 00:53.420 --> 00:59.990 And I can do constant remove movie will be an arrow function. 00:59.990 --> 01:04.130 And what we will do is we will provide movie. 01:04.280 --> 01:07.430 So once we have that movie, we can actually remove it. 01:07.430 --> 01:08.690 So how can we remove it? 01:08.720 --> 01:12.560 We have a list of movies here, and we can have an option to set the movie. 01:12.560 --> 01:17.840 So what I could do is we could do something similar as we've done it here. 01:17.840 --> 01:21.920 So and that's a good thing that remove here, it's in the same component. 01:21.920 --> 01:24.020 So we don't need to pass anything in the props. 01:24.020 --> 01:25.610 But this time it will be different. 01:25.610 --> 01:30.650 So what we've done with the update we mapped through this the movies. 01:30.650 --> 01:34.220 And then we have done something here to compare it. 01:34.220 --> 01:36.770 If the movie is ID we'll do something different. 01:36.770 --> 01:39.350 Different here we'll do use filter. 01:39.350 --> 01:43.910 So filter basically will go through all the movies and we'll filter that. 01:43.910 --> 01:46.790 And that will be the movie that we will loop through. 01:46.790 --> 01:52.400 And we will check if the ID is the same as the movie that we are passing here. 01:52.700 --> 01:58.520 So maybe I will say movie to be removed. 01:58.520 --> 02:01.640 So basically that will be very clear what we are doing here. 02:01.640 --> 02:06.380 So we are trying to check if we if the we filter. 02:06.380 --> 02:12.710 So we go through all of movie If the ID of the current movie that we're looping through is the same 02:12.710 --> 02:16.700 as the one that we pass it, then we will use false. 02:16.760 --> 02:18.950 Otherwise we'll use true. 02:18.980 --> 02:30.830 So basically, if I will save it now and go here, can't read properties of null in the movie list. 02:41.990 --> 02:49.190 Now I think I need to refresh it because that was probably refreshed when we was writing this. 02:49.190 --> 02:54.560 So if I will click on this one, we already removed that from the from the list you see. 02:54.560 --> 02:57.320 So it's been filtered out from that list. 02:57.350 --> 03:02.180 But the problem with this approach is when I refresh it, it's still there because we haven't updated 03:02.180 --> 03:05.390 anything on the database, so we just remove it from the list here. 03:05.390 --> 03:07.910 I could do it and refresh it and it's back again. 03:07.910 --> 03:16.340 So apart from what we've done here is we could we we have to send a request to database also. 03:16.370 --> 03:18.380 And this can be simplified. 03:18.680 --> 03:22.220 So this already tell us true or false. 03:22.220 --> 03:25.220 So we don't need to have ternary operator like this. 03:25.220 --> 03:30.740 What we could say is have it like even one liner and we will need to revert it. 03:30.740 --> 03:35.420 So that will give us that true or false condition. 03:35.420 --> 03:41.570 So we can say if the movie is not the one that is there, then use the filter so it will work exactly 03:41.570 --> 03:42.530 the same as it was. 03:42.560 --> 03:47.660 So if I will go here, of course we need to refresh it, but then I will remove this one and you can 03:47.660 --> 03:51.890 see here it's working fine, but still we haven't figured out how to. 03:51.920 --> 03:55.250 We haven't done yet the removing from database. 03:55.250 --> 03:58.340 So what we need to do is we need to go to the API service. 03:58.340 --> 04:01.940 And then we need to duplicate this. 04:01.940 --> 04:06.530 And we will have another method remove movie. 04:07.280 --> 04:12.500 We don't need to pass the body but we need to pass movie ID. 04:13.010 --> 04:21.270 And this time we will slash movies slash, ID and then slash. 04:21.300 --> 04:24.060 So basically we will use. 04:24.090 --> 04:27.450 Delete I have it this duplicated. 04:27.510 --> 04:29.250 So we will use. 04:29.310 --> 04:30.270 Meta delete. 04:30.270 --> 04:31.260 And we don't need to. 04:31.290 --> 04:33.000 Pass anything in a body here. 04:33.000 --> 04:37.800 And then we have response either null or we have a response JSON. 04:37.800 --> 04:41.160 Basically this is not responding to anything but it will be empty JSON. 04:41.190 --> 04:48.450 But the idea is that we will have this based on the movie ID will send the delete, and then we can 04:48.450 --> 04:53.040 go back to our movie list and we can trigger that from here. 04:53.040 --> 04:59.400 Also, we already have this, so we can actually put it in a service like we've done it with other things. 04:59.400 --> 05:00.990 But I will do that in a second. 05:00.990 --> 05:03.390 So now we have remove movies. 05:03.390 --> 05:05.610 So we need to call that API. 05:05.610 --> 05:07.710 So I don't have API here. 05:07.710 --> 05:08.580 So I need to import. 05:08.580 --> 05:15.300 So import API I can do it like this because it is a default export from the API. 05:15.300 --> 05:19.860 And I import that from parents For further services API service. 05:19.890 --> 05:25.290 Once I have that, I can go to my function here and I will trigger that here. 05:25.290 --> 05:29.070 So API delete. 05:29.100 --> 05:31.860 That's the API service. 05:31.860 --> 05:32.400 Oh sorry. 05:32.400 --> 05:33.180 Remove. 05:33.180 --> 05:34.260 That was the. 05:38.760 --> 05:39.930 Remove movie. 05:39.930 --> 05:42.120 And then we need to pass movie ID. 05:42.360 --> 05:52.950 My movie ID is the one that I'm sending here ID so we can save it here in constant so constant response. 05:55.290 --> 05:58.140 And then if we have that response. 06:00.240 --> 06:02.430 Then we can do this. 06:04.440 --> 06:08.880 So I will open curly braces and put it here. 06:08.880 --> 06:11.910 So if we have response from delete then we will remove it. 06:11.910 --> 06:17.820 So going back here we have some error that we'll need to fix it because it's kind of repeating over 06:17.820 --> 06:18.210 and over. 06:18.360 --> 06:20.940 So if I will save it here then it's fine. 06:20.940 --> 06:28.620 But it's so brand new is when when I click on this one unexpected end of JSON input. 06:28.620 --> 06:36.750 So basically if we have that, if I will go to network and if I will select this one. 06:36.780 --> 06:40.140 So basically that's the method that I've used. 06:40.140 --> 06:43.320 So I've used this movie and then I send it lead. 06:43.350 --> 06:45.060 That was my response. 06:45.060 --> 06:48.300 And this request has no response data available. 06:48.300 --> 06:54.330 So at the moment I can't really rely on the fact that it will bring me something like a JSON. 06:54.330 --> 06:58.620 So I will need to change my way that my API works. 06:58.620 --> 07:03.360 So I am not going to have a response here like normal JSON. 07:03.360 --> 07:06.780 So let's go to API service and let's do something. 07:06.780 --> 07:14.400 So what we can do is we can response if we don't have a response okay I will response false for example. 07:14.400 --> 07:18.180 But here I will return true. 07:18.210 --> 07:23.490 So basically I will either put false or true from that function. 07:23.490 --> 07:26.940 So that means I'm not trying to get the JSON now. 07:26.970 --> 07:32.520 I will try to just put it false if I don't have a response, and true if I have it in response. 07:32.550 --> 07:38.610 So if I in that case, if I would go here, I can still check it if there is a response. 07:38.610 --> 07:44.790 So if I will go here and then refresh it, I have a new test here if I will click on this one. 07:44.820 --> 07:51.900 Now I don't have any any problems and it's been removed because this will response will be this actually 07:51.900 --> 07:52.920 not this one, this one. 07:52.920 --> 07:58.890 The response is empty, but I is what I responded to it true or false? 07:58.890 --> 08:03.780 And based on that I can filter that movie from from the list. 08:03.810 --> 08:08.250 So this is basically a crude that we have done in this application. 08:08.250 --> 08:11.550 We have everything now from fetching the application. 08:11.550 --> 08:16.170 I have option to edit that, I have option to delete and I have option to create. 08:16.170 --> 08:19.830 So this is all done with passing a lot of data in the components. 08:19.830 --> 08:24.060 This is more done for an exercise, but you have a few things to fix. 08:24.060 --> 08:28.680 So let's come back to this and fix it before we move to something new.