Okay.
We have an option to create a new movie.
Now what we can do is we can actually allow users to remove the movie.
So that will be our last method, which is delete.
So how can we do that?
And you can place it in any, any place.
So one place will be here wherever you see that movie.
But if you kind of design the user interface, it, it is a good idea to put all the kind of admin controls
in one place.
So you don't want a normal user to go like here and read the movie and in the same screen removing so
we can have it actually every everything here.
So whatever you will edit you can also pick up to save the the current movie or we can remove it.
So I will add a remove here.
And actually I have a space here so I can remove it or you can place a button here or anywhere in the
in this space.
It's really up to you.
But I will put it here, delete button and then we can have remove.
So how can we do that?
Basically we've done that before.
So what I can do is I can just copy and paste my header, right and that will be easier.
So I will put it here in the navigation options inside the edit.
So this time the title will be, let's say remove.
We can have it like that.
And then what we can do is whenever we press, then we can trigger some function here.
So I can create a new constant and I say remove clicked.
And that's going to be an arrow function here.
And I can trigger that function from.
Actually, I can trigger that function from here, but I would like to pass something to that function.
So what I will do is I will pass that movie.
So remove clicked and I will pass screen props, navigation, get params.
This movie here.
So I will pass it here and I will have that movie.
So if I will do console.log.
Let me print the movie here and see if that works.
So we go here, we add it, and then we have a new remove here.
If I will click it then can find variable console.
I misspell it.
Console like this.
So once again I click remove and you can see I have all the information about the movie because I just
pass it through the get params from here.
Or I can get actually this movie from in this function as a really matter.
So once I have it here, what I can do is I can use similar thing as we have done before with post and
with a get with a put and we'll use the fetch.
So I will just copy this bit of code and I will go here and I can paste it here.
So what's our URL?
URL will be the same as the put.
So we need to have movies.
We need to have an ID because we want to remove the specific one and this method will be delete like
this.
And then what we can have is we need to have the headers and then we don't need to provide anybody and
then we can do the Json and actually not and will be here returned from the remove.
It will be empty.
So we don't need to have actually that step here and then we can do something here.
So what I would like to do after I remove this, I would like to go to the our application, which is
the movie list, and I will paste it here.
And I don't want to actually.
Path, anything there.
So whatever we remove it, then we'll come back to the list here.
So I will go Terminator and I will go edit and I will do remove.
And actually we have some problems.
Cannot find variable props and probably we use something here.
Okay, so props, navigation, navigate.
And because the props here is expected that I will have this props here.
But props was used actually here in the component and I am outside of the component now.
So what I could do is we have that screen props here and what I could do is I could actually pass the
screen props to this function.
So what I can do is we can I will copy that first.
So this is what I'm passing at the moment.
I'm passing the movie and I will copy that here.
So I will do constant movie like this.
So we'll move it this and instead of passing that a param movie, I will pass the whole screen props.
So this will be props here and this will be props.
So now I kind of pass the whole props into the function.
So this will be props and I can get the movie as I got it before and then I will have an access also
to the props navigation navigate.
So if I will save it now.
So it's you you can see that has been already removed.
So we'll do another two and I will do remove and I'm back here.
I can still see that here because I haven't updated that list yet, but this is already gone.
And to prove it, what I could do is I could change that to response.
For example, because we don't use it.
If I will save it, I'm expecting it's not going to be here.
Okay, that's good.
But whatever we are here, we still have a kind of outdated list of the movies.
So whatever we change, we add, we, we edit.
It is still updated.
A outdated list.
So what we could do is whatever we change the if I will make a little bit more space because it's getting
larger.
So whatever we actually, uh, we need to go into the list here and a little bit here.
So we use an effect and we fetch the data only when we start that component here.
So it is only once when we do it and we could actually change the way this is working and we can update
it every time it's changed something.
If I will remove it now, it will be based on the render.
So we have the Titanic three.
If I will come back here and change the Titanic three to just Titanic.
So I will edit that.
And then we have Titanic go to movies.
You can see this is Titanic.
So if I will add a new and let's say back again Terminator like that.
Like that.
And then you can see we have the Terminator, because this time what we do is we update the movie.
Every time we render, we fetch a new version of of the movies.
Every every time we render something.
This might have a bad effect on your user interface.
So use it wisely, because if you have more things on the page here and if if if you trigger something
that will refresh the page, you will you will be asking for the new list of the movies all the time.
So it's really up to you.
You can actually specify what should trigger, what kind of changes should trigger the new fetching
new API.
But with our limited user interface, this is fine.
So we will fetch the new list of movies, whatever we add, whatever we edit and wherever we remove
the movie.