Okay.
The last bit from our code is to allow users to remove the movies from here.
So we have that icon here, the trash icon, but we haven't used it yet.
So in this video what we'll do is we'll enable removing movies from our database using UI.
Okay.
So let's go and go back to the code.
And what we have here is we have that icon here.
So what we need to do is we need to enable clicking on this.
So we'll just copy that like this.
So we will have an event.
And then what we will do is we will trigger a function.
So let's say the function will be remove movie like this.
And what we also need to do is we need to provide movie because we need to know which one to remove.
This is actually loop.
So each of the movie will have its own icon.
So we will pass that movie to that function.
So let's create one here.
And I can do constant remove movie will be an arrow function.
And what we will do is we will provide movie.
So once we have that movie, we can actually remove it.
So how can we remove it?
We have a list of movies here, and we can have an option to set the movie.
So what I could do is we could do something similar as we've done it here.
So and that's a good thing that remove here, it's in the same component.
So we don't need to pass anything in the props.
But this time it will be different.
So what we've done with the update we mapped through this the movies.
And then we have done something here to compare it.
If the movie is ID we'll do something different.
Different here we'll do use filter.
So filter basically will go through all the movies and we'll filter that.
And that will be the movie that we will loop through.
And we will check if the ID is the same as the movie that we are passing here.
So maybe I will say movie to be removed.
So basically that will be very clear what we are doing here.
So we are trying to check if we if the we filter.
So we go through all of movie If the ID of the current movie that we're looping through is the same
as the one that we pass it, then we will use false.
Otherwise we'll use true.
So basically, if I will save it now and go here, can't read properties of null in the movie list.
Now I think I need to refresh it because that was probably refreshed when we was writing this.
So if I will click on this one, we already removed that from the from the list you see.
So it's been filtered out from that list.
But the problem with this approach is when I refresh it, it's still there because we haven't updated
anything on the database, so we just remove it from the list here.
I could do it and refresh it and it's back again.
So apart from what we've done here is we could we we have to send a request to database also.
And this can be simplified.
So this already tell us true or false.
So we don't need to have ternary operator like this.
What we could say is have it like even one liner and we will need to revert it.
So that will give us that true or false condition.
So we can say if the movie is not the one that is there, then use the filter so it will work exactly
the same as it was.
So if I will go here, of course we need to refresh it, but then I will remove this one and you can
see here it's working fine, but still we haven't figured out how to.
We haven't done yet the removing from database.
So what we need to do is we need to go to the API service.
And then we need to duplicate this.
And we will have another method remove movie.
We don't need to pass the body but we need to pass movie ID.
And this time we will slash movies slash, ID and then slash.
So basically we will use.
Delete I have it this duplicated.
So we will use.
Meta delete.
And we don't need to.
Pass anything in a body here.
And then we have response either null or we have a response JSON.
Basically this is not responding to anything but it will be empty JSON.
But the idea is that we will have this based on the movie ID will send the delete, and then we can
go back to our movie list and we can trigger that from here.
Also, we already have this, so we can actually put it in a service like we've done it with other things.
But I will do that in a second.
So now we have remove movies.
So we need to call that API.
So I don't have API here.
So I need to import.
So import API I can do it like this because it is a default export from the API.
And I import that from parents For further services API service.
Once I have that, I can go to my function here and I will trigger that here.
So API delete.
That's the API service.
Oh sorry.
Remove.
That was the.
Remove movie.
And then we need to pass movie ID.
My movie ID is the one that I'm sending here ID so we can save it here in constant so constant response.
And then if we have that response.
Then we can do this.
So I will open curly braces and put it here.
So if we have response from delete then we will remove it.
So going back here we have some error that we'll need to fix it because it's kind of repeating over
and over.
So if I will save it here then it's fine.
But it's so brand new is when when I click on this one unexpected end of JSON input.
So basically if we have that, if I will go to network and if I will select this one.
So basically that's the method that I've used.
So I've used this movie and then I send it lead.
That was my response.
And this request has no response data available.
So at the moment I can't really rely on the fact that it will bring me something like a JSON.
So I will need to change my way that my API works.
So I am not going to have a response here like normal JSON.
So let's go to API service and let's do something.
So what we can do is we can response if we don't have a response okay I will response false for example.
But here I will return true.
So basically I will either put false or true from that function.
So that means I'm not trying to get the JSON now.
I will try to just put it false if I don't have a response, and true if I have it in response.
So if I in that case, if I would go here, I can still check it if there is a response.
So if I will go here and then refresh it, I have a new test here if I will click on this one.
Now I don't have any any problems and it's been removed because this will response will be this actually
not this one, this one.
The response is empty, but I is what I responded to it true or false?
And based on that I can filter that movie from from the list.
So this is basically a crude that we have done in this application.
We have everything now from fetching the application.
I have option to edit that, I have option to delete and I have option to create.
So this is all done with passing a lot of data in the components.
This is more done for an exercise, but you have a few things to fix.
So let's come back to this and fix it before we move to something new.