Welcome back, everyone.
In today's lecture, we will quote the movie controller.
Now this movie controller will be different from the search controller, right?
Obviously, we need to load the movie that we clicked on.
Now, here we can learn a couple of things.
We can learn to get data from the Beechboro, use the hash change event, use alone event.
Right.
So we're going to do this pretty much three things.
And, yeah, we're going to set up the controller.
Now, we're not going to be able to display anything here, for example, but we will try to get this.
So when I click on this one to be able to see something, so we we're going to control it, like, by
the way, right now, what else we need to do here?
Nothing else.
We need to just start.
So why this is happening here?
So, look, when I click here, we are going we are having this hash, plus the idea of the movie.
Why?
Because if we go, I'm just going to close everything here.
If we go to the search movie view here, we do have this.
We display the movie and the aircraft is actually the link.
We do have the hash plus the movie idea that we've done this by ourself and we need this.
So we're going to grab this movie idea from here and we're going to manipulate because I know this movie,
I'd I would be able to get that to use the method that we did last time.
Right.
So I go to movie.
I will be able to use this method and I will be able to set to call the class in passing the movie constructor,
the idea constructor.
Right.
That's pretty much what we have to do.
Now let's start working.
So open up the index, the index file.
Now, that one here where we have the movie, let's do this one or.
Yeah, we're going to build this one.
We don't need it.
Now, here.
First thing's first.
We need to add event listener.
Now, how where are we going to add this event.
Listener So it's here actually.
Right.
It's in the U.S. or else what.
We can't actually get any other on click event listener.
But what we can do, we have the access of the global window.
Right.
So what we can do here, we can say we dot an event listener and there is a method called hash change.
So we're going to use this one.
And here we need to pass the name of the function.
Actually, our function will be movie controller.
And this function, we haven't done it yet, right, so let's make sure that we write the function here,
movie control.
So I'm going to say cast movie controller and it will not take any parameters.
For now, let's write this function, OK?
Now, in a movie controller, every time we click on this one, every time actually changes this one,
it will go here.
Right, because we are listening for changes on the hash.
Nice.
So what we will do is actually build this controller first things first.
We need to get the idea.
We need to get this one here.
OK, how are we going to do this?
So we're going to say consed I'm going to say everything, the constants of ideas in here.
What I will use is window dot location sorry, not local storage location.
And then I will use the hash method.
Now if I console it like I would probably today my my computer is slower than me.
That is not good.
I'm going to come to love the idea.
So let's go to the movies.
Like any movie you want in here is actually can't see it's too small.
Right.
If I change it here it will go to 20 this.
So if I click twice to three times, this is not change and it will not fire up this event.
But if I click here.
If I click here.
Yeah, the event will be there.
I mean we will you will be able to see now because I've clicked everything here, we can just go back
here and it's pretty much working, but it's not working because we can't this actually it is not usable.
It has a hasheem front so we need to clean it up now.
How are we going to do this?
There is a very simple because this is a string.
What we can do, we can say just replace and we can we can just define what it needs to be replaced.
So I want to be replace this hash symbol with nothing with empty.
Now, that's pretty much it.
OK, let's do movies again.
Click on here.
And I do have the idea only without hash cuz that is what we need now.
From now on we need to find out, OK, if we have ID, so we need to check if we have a deal.
This is actually not empty.
What we want to do now first I want to create the movie new movie data.
Right.
So we need to create new movie object, and the second is to get movie data, right.
So how are we going to do this, get movie data now?
It's very simple data, that movie.
So we're going to create this one equal new movie here.
Remember here that we delete that one before we were passing the ID.
All right.
But now we do have this idea here.
So I can just pass this to and it will go straight to the constructor and it will set this ID.
So I'm talking about the movie object.
The movie model.
Right.
So we actually doing this.
So we create a new object and we save in our global data global application state.
Right.
Nice.
What else we need to do here?
What else we need to do is actually to get the data to call data, not movie and call that get movie.
I think get movie was the method right.
There it is.
So what I'm doing here, I'm saving this movie now.
I've just created that movie.
Right.
All the data here.
So the title rated director in plus all these two methods here that we just created last time.
Okay, let's test this out because I don't want to talk too much without being able to see.
So if I click here, so I do have the object title teens go stuff like that that is loading.
So what we can do because we do have the access of the window, the data now here it is.
I do have another object.
It's not only search, right.
So if I click here, I have this cool.
I have the movie IMDB title.
Let's see what we have in the object.
Let's see if everything is working.
I worked it good up box office not applicable director good main actors Greg Greg Sipes.
I have no idea.
Here he is actually the actors now are changed into Harry.
Remember we did is we change this cast new actors and we put it here and we overwrite this one.
Right.
Nice.
So we have that one uh plot poster.
Good production.
Warner Bros.
Rated.
It's undefined means that we have somewhere mistake.
Ladies and gentlemen, the title Good The You are out now.
The Earl is working.
So if I click on the Eurail, let's let's copy, copy this.
You are here and if I go back straight there it will give me Teen Titans go and it will give me everything
that we want.
So even this is working right now.
The writers, we do have the error of them and it's inside of every good.
Everything that we have done, it's working.
Is that this.
Read it.
Let's see what's happening.
Here it is.
Read it.
OK, yeah.
Probably because this should be the capital are everything is capital on this side right now.
Let's refresh go back to the movies and I'm going to click this one and let's data not.
Oh sorry.
We know that data and let's see if that will work now actually we can kind of like this one, ladies
and gentlemen, without doing this here.
It's, uh, rated.
Where was the rated?
It is rated PG.
Oh, my God.
Everything is working now here.
Are we going to see this fully
displayed?
The data come on the movie now here we don't have any any view because the views are responsible for
displaying the data.
So I'm just going to cancel it like that data.
That movie.
Right, good.
Now what else I want here is something that let's save it.
Let's refresh.
Let's just see if it's working.
I'm going to click here and here it is.
So we do have the object first.
Nice.
Everything is working, ladies and gentlemen.
And before we are just bringing the previous one, let's see, just going to comment this one that we
don't need this one anymore.
So I'm just going to go movie movies again.
I'm going to click here and here it is.
Everything is there.
Nice.
Now what?
I want to show you something else.
Look, when I do what I do, if I refresh that idea that I click before it's staying in the euro so
we can use this, we have the power on this to use it to our own benefit.
So what I can do.
I can just create another event listener and that even listen, I'm just going to copy this one, put
it here and it will be a load event listener, right?
So means every time we load this, here it is.
It's even working.
Every time we load this, it will go back.
It will call this movie controller and it will grab the idea, everything that we have before.
And it will save it.
I mean, it will do its job.
Now, I don't like the way this is working, right?
So we need to do some couple of changes.
I want to wait for the results here.
Right.
Because I want that first to be loaded to get the movie from this part here.
Right.
Because here this is a weight function is async function.
So what we need to do is also create this async function here.
Right now.
It will not have heat.
See, it waited for a while because it's waiting for that promise to be fulfilled and that's why it's
doing there.
So let's try this one here.
Yeah.
And so now when I refresh it will go to this one twenty at the end.
So Martin Scorsese.
Oh, I like that director.
Here he is now.
Everything is working as you shoot.
But I need to show you one more thing before I let you go.
Now, every time we use this async away, we just hoping that the promise will be fulfilled.
Remember, they can be rejected or fulfilled.
Right.
That was the way the promises were working.
But here we just we're not checking.
We just printing out.
And we're hoping that, yeah, it will be fulfilled and I will be able to grab the results.
Well, that sometimes not the case.
The API can go wrong.
Anything can go wrong.
Right.
Even this here, for example, if you put S.
S in hit enter now, it will not be able something went wrong loading the movie, of course, because
we've not been able to get that movie here, these undefined, undefined, undefined.
So we need to fix that one.
So how we are fixing this one, it's pretty much simple.
We're going to cut this one from here and try and catch block.
So in the catch for it, we see an error here and we do this error.
But in the try, we just trying to get the data and if everything is OK, we will get the data.
But if not, we will get some error right in.
We want to display that error because next time we will know what's happening.
And so what we're going to write here, well, simply we can just say alert.
Something went wrong with that gene.
The movie from ID right in here.
It should be PC instead of that.
Won't save it.
Now, if I click here, actually, it's not going to work.
Oops.
What happened?
Something was wrong with loading the movie and this is coming from the other one.
So it gets cut.
It doesn't matter.
Now remove this part.
Now we know that we will be able to catch that error if occurs and we do have this async function also
here.
So what we can do, we can we need to find a way how we can just get rid of this.
And what we will create is actually movie search here, get search result.
So I'm going to cut it from here.
And what I'm going to see try again.
I'm going to wrap it around the try and catch lock and error in here.
I will say a word error while searching the movie.
Get in here.
I will paste everything that I've got it from before.
Everything to copy it.
Cut it from before.
Right.
So shouldn't work.
Everything should go the same.
But now we do have mechanism for finding a way if something is is going wrong.
Right.
Nice.
That is pretty much it for this lecture.
So we added to event listeners.
The one is we have change, the other one wislow.
When we load here, it will get this idea and it will go call the movie controller that we just created.
And first things first, we're cleaning up.
We are getting the you earlier and we are cleaning up that hatch.
Right, because there is that we need only the clean ID in order to call data.
That movie will new movie ID.
Right.
Because this if we pass the hash, it will not work.
It will not.
Right now that he's had something wrong with the loading, the movie, TV catching here, but we it
was good idea to put it here as well, and that is pretty much it for this lecture I hope you enjoyed.
We will continue working on The View next time because we just consoling log the data at the moment,
nothing else.
But now we need to display it here.
And it's easy because we have all of the data we want so we can work on that thing where we are displaying
the results.
Thank you very much and I'll see you in the next one.