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
movies.
And what we will do in this video is enable that as well.
So we have almost everything here in the pieces.
We will reuse the same form as the.
Creating a movie is very similar to updating movies.
So let's do that first thing first.
What we need to do is we need to have a button.
So I will go back to my application here and here when we have a movie list I will wrap this with a
div.
So basically because this is a grid.
So we want to have this on the same kind of column as it were, as it was before.
So I will wrap it like this.
And then we can have a button here.
So I will have a button.
That button will be create new movie for example like this.
And then we need to have onclick.
So onclick whenever we click it.
And I will say create new.
Movie method I will trigger from here, so I also want to have it mouse click event here.
So create new movie.
We need to create that function here.
That's not going to take any parameters and will trigger.
So basically when we click it then we will do something here.
So what we want to do is we want to use the same movie form.
So movie form at the moment what we've done is basically it works on the edited movie and we pass it
here as a movie.
We could edit that movie basically is an object, so we could use that to kind of mimic what we need.
So at the moment, if we'll pass it as a null, the component is not going to be created.
So we could do some a hack.
So we could say we will pass the title of empty And description of empty string.
That means it's not going to be an empty object, so it will be rendered, but title and description
will be null.
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
doesn't matter.
But if I will click on this one.
And so let's, let's say I have this one.
If I would click on this one, I have that form here.
So it is a kind of working.
But we need to also remove this one.
So I will do this similar thing as we've done it before.
So you see when we do this edit with that selected edited movie.
But we deselected this one.
So I will do exactly the same as we had it.
But this time I will pass the empty object.
So if I will go here and refresh it.
So if I will click on Create New movie, I have the form with title and description empty.
So it is working fine, but what we need to do is we need to tell in the movie form, if that's actually
update or create, how can we do that?
So I will go to movie form and what's the difference.
So we have like title and description here.
But if we pass the entire movie that movie has other things into it.
And what's unique about it is ID so if it's something coming from database, we will have that movie
ID otherwise we'll have just title and description as we send it from here.
So title and description is here.
So based on the fact that if the movie has an idea we can change this component here.
So what I can do is say here on the button first thing first I will do visual thing.
So I will say if movie ID then we can have I will cut it here and I will put it here.
Otherwise I will use ternary operator.
I will have another button.
So basically we check Eve that movie has an idea ID if we pass it the one from a database for editing,
then it will have an ID, it will be update movie, otherwise it will be great movie.
And we can say create movie like this.
So if I will test it now and we have great movie is not defined.
Okay.
So I need to have that method here.
I will just duplicate it whatever I have here and have the create movie for now.
And so if I will go here you see this is create movie.
So if I will click on let's say I will click on Titanic here and I have updated movie if I will click
on here.
This is actually not updating.
So whatever you see I am clicking on this.
This is not updating.
So I need to kind of click on this component and then click on that.
And this will be updated then with that.
So every time I switch component is fine.
But if I will click on this one it's not going to trigger the same with this one.
So we can actually fix that.
Now, if I will go here.
Why this is happening is because the movie form will have that movie and it's not going to rerender
one once it is there, it's not going to rerender with a new data because we passed the new data.
We need to actually tell it that we want to rerender this and change.
So what we could do is we could use state.
We've done it before.
So that's a method that will tell the component new state will tell the component that something has
been changed and do something.
So I will have an arrow function.
And in the dependency here what we can say if the movie has been changed then do something here.
So what we want to do at the moment, what we've done is when we render this component, we set the
state for default values, movie title and movie description.
We could actually do it here.
So if we have new movie then we set title to Movie title.
And if we have a description we have we can set it here.
So basically this will be the similar as we've done it before.
But we are not setting the default movies whenever we render.
We will set that here.
So we can actually put it like empty values here whenever we start render.
But if we have a new movie then we will.
This will be trigger and a new state will set those.
So basically that will kind of we have some error in the view state.
It has already been declared.
Sorry.
This is I made a mistake.
So that's supposed to be use affect probably.
You screamed at me and for that reason.
So use effect is the the one we want to use here.
So if I go back here and if I go and click on this one, I have Titanic.
If I click on this one I have avatar.
If I click on this one, I have a new movie.
So we already have this in place and fixed.
So what we need to do is in the movie.
Form, we already have two different versions of safe movie and Create movie.
So we can actually we already have this method here, but we still call it API.
Update movie.
So if I will go API service, what we can do is we can create another method.
So I will copy that and I will paste it here.
This will be create movie.
We are not going to pass movie ID because we don't have that ID we will definitely pass ID a body.
So what we want to do is we want to use a post method on.
Without that ID and this this will be the same.
We'll pass the body and then we'll do response as it was here.
So going back to our movie list, what we do here instead of having that update movie we'll do create
movie.
We'll call this function function here.
And we don't need to pass movie ID, just upload it here and then if we have that movie then we can
do something about it.
So at the moment I'm not going to do this because that's what we have done it.
But let's test it now.
So if I will go here and if I will have create new movie and a new test, some description here.
If I will create a movie, we can go to the network and see if we actually this, this has been successful.
So I will go to movies.
That was uh, let's see.
So here movies that was posed.
And what we had is we sent a title, new test and description, some description.
And the response was new movie with ID seven.
So it was there.
If I refresh it now, the new test is actually taken from the database and I have it here, so it is
working fine.
We have a new method of creating movie with our UI, but we'll need to fix few things because at the
moment our list is still not updated.