Okay.
So what we have is we have a way to send a new data from our UI into our backend services and to our
API and update it in the database.
But if I will change anything here and I will update the movie, there is a new movie there, but the
list on the left hand side is still old.
So we supposed to change it to whatever is there from here.
And if I will click on this, I want to see new data coming there, because this is the data that is
already in the database.
And we kind of cache it here in the, in the component.
So what we need to do is we need to do a similar thing as we've done before.
So if we go to app.js this is a movie details what we had it.
So if we had a new version of it we called Update movie method, which is what basically used the stage
to select it.
We'll need to do a little bit more different and I will show you why in a second.
So what we will need to do is we need to enable that update movie.
We can call it here whatever we like.
And this is the second bit is important.
How are we going to what are we going to trigger.
And I'm not going to trigger this one.
I want to have a new function.
I will call it the same as I call it here.
So update movie is something that we pass to the props.
This is what it will be called.
And here I will need to have constant update movie.
That's going to be a method that will get the movie.
And our function here and we'll do something here.
We'll come back to this later on.
We have that method here.
Update movie.
What we need to do is we need to go to our form.
And inside here we need to enable this okay.
So once it is added here at the moment when we call this we don't do anything with a response.
So I will capture whatever it's coming from that service into constant response and response like this.
And it will be available here.
So as you remember, if you go to API service, either it can be null or it can be a JSON object.
So from here I have it here in that object.
So I can say if response.
So if I have that response it's not null then I will update movie with that response.
So basically this is coming.
If there is no error then it will come as a JSON as a movie.
And I'm checking that if I have that JSON, then I will push trigger that function in the parent component
as I have it here in the props.
We can also have like an error here and then store it error in in the state.
And then I say if no response then show it something in error so we can handle this.
We know how to do it because we've done it before.
But we will go back to app.js here.
And now we have that movie from our API coming back here and it's it is available in the parent services.
So what we need to do it is different than what we've done here.
What I want to do is we want to go through all the movies we have there.
So the problem with that is when we have a new movie here, we don't have a list of movies to update
it in this component.
This is how we design it and it sometimes you have a situation like this.
So at the moment we have a way to select the movie and edit movie.
But the list of movies actually in this component here.
So what we need to do is we need to pass that information to this component.
So how can we do that?
We can create a new variable.
And let's say I will create a new one in state that will be new movie.
So set new movie and by default it is new.
So we will have that function here.
So actually I don't need to have that.
I can actually save it and set it into state directly from here.
So if I will have that a movie form, I can do update movie and I will do a set new movie.
So it will be set into that state.
So at the moment I don't need to have that and I will whatever it's coming from the form, I will save
it here, but we need to pass it here so we know how to do it as well.
So we'll do a new movie like that and I will pass it.
New movie, whatever we have in state here.
So we have new movie, we set it from here, whatever.
We get the update movie and we'll pass it to movie list.
So movie list, if we go to our movie list here, we'll have movie clicked here a already in the props
so I can add a new one.
So new movie and then we can do something about it.
We could do whatever we actually use fetch.
We can fetch a new set of movies from the database, but the point of this tutorial is to show you how
to update different things and deal with different situations, so we are not going to fetch anything
from database.
It will be easy to do and just replace the current movies with a new set.
But if you have like a normal production database, you don't want to fetch it all the time if you already
have that information in your front end.
So what we will do is we will create another, another use effect.
I will do it just above this.
It doesn't really matter where you put it, but I will use use effect.
It will be an arrow function here like that.
And the second argument here, we had it in here we had it uh as an empty array.
That means it will be triggered once whenever you render that component.
But this time what we want to do is we want to put dependency on the new movie.
So that means if you will change this every time you change this, this will be triggered.
So this function will be trigger here.
And what we can do is we can actually find a movie that we will have it based on, on that movie, new
movie that we pass in, in the props and replace it on the go.
So how can we do that?
Basically, basically, I will do constant new movies that will be a new array, that we will create
it and that will be based on the movie and sorry, movies.
So this is my current array.
And I will create a new array and I will use a function map.
So map will allow me to move through all of the movies we have already.
So what I am trying to do is I will have a movie and that that that will be a loop there and I will
check it if movie, the one that I'm looping through ID is equal to new movie ID, whatever I sent here
in the props, so I am checking if the one that we are currently looping through is the same as the
one we pass it here in the props, and I can do ternary operator here, and I can do two things.
So, so if I, if the, the those are the same, what I want to do is I want to return new movie and
if it's not the same ID so that's, that's a different movie, then I will just return movie.
So basically I'm looping through all of that.
That is the current movie that I'm looping through.
I'm checking if that ID is the same as the one that I'm passing in the props.
If it's the same movie ID, I will replace it and return this object in the map the new movie.
Otherwise I will just say keep whatever was there.
So I have a new movies here array with list of new movies with updated.
And I need to do set movies here with a new array.
So set movies.
New movies and it will update it like this.
So if I will save it now and I go here, what I will do is let's say we have that avatar two.
I will click on this and I will remove that avatar and I will do and let me clear all of that.
I will update the movie.
That been sent.
So we have this title here.
This is still not updated.
So we will click on that.
So let's try to debug what happened.
So let's see if we actually console log.
Trigger this.
So inside Useeffect and list I am actually expecting to see something there.
Inside of list should be a unique key.
We can fix that later on.
And that's a warning from react but I will clean it here.
And let's say I will have avatar this so we'll refresh it.
We have avatar already in the database.
So let's say Avatar New and we'll update it.
So inside Useeffect and list.
So that means it is actually triggered there.
So what I can do is is a trigger.
So this one is trigger.
But let's see what's actually in the movie.
So I will do console log and we'll try to print whatever the new array is.
So if we make a mistake then we can actually correct it.
So if I have a avatar new so that's been updated I will revert it to avatar.
And this is my new array.
So I'm printing this one.
So Avatar New is still here in the in the new one.
So we haven't actually changed anything there.
So if I will go here and I can compare two things so I can print movies.
That was the old array.
And that's a new movies, the new array that I added here.
So I can actually go here if I will change this to, um, let's say avatar one more.
So if I will save it, I have two arrays, so I have one and two.
So in the first array which is avatar, that was the original one.
And in the second one it's still the same title.
So that hasn't been changed.
So you see it is kind of path good because we know if we will refresh it now and from the database we
have a new one.
So that means we made a mistake here in this one.
So actually what we can do is we can spread a new movie into an object.
So whatever it's coming from the movie, we will spread it there into objects.
Let's see if that would work.
So Cannot read properties of null.
I think we can go here and I will revert it back to avatar.
So update one.
So it's still the same here.
Let's see actually if the new movie is the one that we are expecting.
So I will print it.
New movie.
We need to do some debugging, but it is very useful actually to see like if you need to check it.
What's going on.
It's it's good to have some debugging skills.
So I will have avatar and I will put avatar new and new movie is actually that's that's the problem.
So this is actually a promise.
This is not a JSON that we are passing here.
So we can't really update it on the promise.
We will need to make that into JSON.
So if I will go to our form, we can actually await our response from here.
And I will put it async here.
So if I will save it now.
Avatar C new movie is coming back.
So this is already fixed.
So this is the the JSON net promise.
And if I will go here and sorry if I go here to avatar.
Avatar new is still there in the original one.
I think I made too much mess.
Anyway, um, so we will keep on going with with this one on the next video as it's been a while in
this video is already a long.
But the thing is that we we need to make sure that we are passing here.
We are passing in our movie list.
A correct data.
So we need to make sure the new movie.
Is there something that we pass here.
And we already proved that.
So we fix it with a JSON.
And we need to make sure that this is also good.
And we set it to oh I know what why it's not working.
So I replace this.
So set movies supposed to be new movies here.
So that should fix the problem.
And we can move forward from this.
So we have avatar.
And if I do avatar new and update it I have an avatar new here.
So we had a few bugs that came into our picture, but we fixed it all and we have a way to notify the
parent, move that data to another component.
And what we have here is we have a new useeffect.
So whatever, I will have a new movie that will change, this will trigger and it will change the list
of the movies automatically.
So we don't need to fetch it from database anymore.