Welcome back, guys, today.
What are we going to do is we can work on The View to display this model and now we need to do a couple
of videos here because we have more things to do, work on.
And also we're going to we're going to change the model and we're going to add a couple of functions
to that model.
And we also are going to probably get more functions in this view, not less.
That's why I want to start here, because at this stage, when we click on a movie, I just want something
to happen.
And that's why I just I'm not going to add more things in the model right now, but I'm going to create
a new view.
So back in your work, we're working start mapi start crippler and go into the views and create movie
view that is now here.
First things first.
You need to import these class names right now.
I'm just going to close this.
We don't need it.
So the first function we're going to do here is we're going to export CONSED display movie.
Right.
And this function will take the movie that we already created back in the controller.
So I'm just going to tell you, control B and that's what that's how I can go through different files
because I know their names.
So I say type I and the and it gives me everything that is indexed right.
So here we have this.
We constantly love this one, but we store the data here and we're going to pass that data back here.
Now, how are we going to do this?
It's very simple.
Just let me just write this function here.
So movie will have the entire data that we have for the movie.
That's that's going to be.
Now, I'm going to say const markup here and it's going to be a template literals like this.
And after that, we need to insert it now in the class names that just first opened the index HTML,
the main content.
So now I'm just going to explain this mean.
But the first copy this one and save it in a class C as a selector and C like that main content.
I'm just, I've just based it down this one and here I will say mean content and I'm going to get I'm
going to cut it this one from here.
So this mincome content already contains our class.
Right.
And in this main content, I do have two parts left side and right side.
The left side is OK, let me just see that stop.
So I just want to show you what we are going to build npm run in it.
And actually I'm just that will be the final, the final version that we have.
So it's going to open up here somewhere.
Here it is.
Now, I should have done this before.
I'm sorry about this, guys, but let's do it like this.
So when at that movie there's a loader, when I click here, this is what we need to achieve here.
And we need we will need a couple of more lectures, actually, one more lecture to create this.
But we are going to create a don't worry about.
So is explaining this part, has it to this mean contains two parts.
The first is the left side, which we have image of the movie.
Then we have you can watch it actually not on YouTube.
We just going to use that you URL.
So that will go straight to IMDB.
We can buy tickets right in on this left or right side.
We have the idea, but I don't we do have a lot of information here.
So that is what we need to copy.
This is the entire HTML markup, so we need to go and copy until the last you hear about the section
and we need to place that one here.
Right.
So it's going to be a little bit messy, but we need to work on this one now in order for you to be
able to see things.
So I'm going to go here.
We straight are going to call this one.
So first things first.
Import this new movie view here.
And we should get that from the movie of you.
Right.
So now I will be able to have the access to this display movie.
But in order to do that, let's class last names, that main content and even sorry, not even the listener.
We need to get here.
Insert adjacent e-mail and we're going to insert after begin in the second parameter is the markup that
we have here.
I think now we're good to go because we haven't changed information here, but at least will be displayed.
So I don't need this anymore.
It will be displayed.
So how are we going to do this?
OK, now go back to the movie controller and here.
So movie view movie view that display movie in here.
I'm going to pass the exact same data that our consulate lost right now.
If I see this should work.
Here it is.
And this is not the actual information because it has already been hard coded here and we never change
it.
OK, we don't have any errors.
That's good.
So let's find.
So let's load this one.
Actually, we have the ID, but let's load the information from this one right now.
Go start from here in the post or this is stored in the IMDB poster.
So movie that poster.
And if I save it now, I should be able to see this one right now, go a little bit down here.
So what I did notice here that we don't have any atrip, so I just want to have a link.
So I'm going to cut this one here.
I'm going to create a trap.
And I'm going to close this up and I'm going to paste everything back now here the you are all we already
have it in our movie Object Home movie.
You are.
And we've got to test this out right now.
So if I refresh it, say cannot get in, why is this a trap movie?
You are l..
OK, it's you are not.
You are.
So I'm going to refresh again and here.
So if I hover you will see on the left side there it's going to go straight to IMDB.
So this is not actually going to do.
But at least you can see here the video right now.
So the buy tickets, we're not going to do it at this stage.
So we're going to skip this one.
But we do have the title and let's say movie, that title.
Right.
What else we do have here?
OK, let's go down go down here.
So the reviews, we do have some of the reviews here and I think so this was a movie that I am the B
rating, so it was eight point one now.
So if I change it, here it is.
It's seven point seven.
It's coming from this here.
OK, now the reviews.
Let me just open the movie.
I'm not sure if you have done the reviews there.
No, we haven't done the review.
So what we need to do, we need to include those things and they're not included at this stage.
So I'm going to say like this, they start by IMDB votes equal to DataDot.
I'm DB votes.
I think it was votes.
And let's just print it out here.
I'm just going to copy this one here and I'm going to say I'm DBI votes, save it.
And if we see here is almost 300 thousand more than three hundred thousand.
Right.
Good here.
We're going to use this later on.
I'm not going to do it right now because we need to create a function in order to display seven point
seven stars.
And we are not that Veria now or the overview.
I am just going to close.
I'm not going to believe that part in inside of PAETEC.
What I'm going to say here, I'm going to go to the movie Dot Plot here.
Now, I will be able to see a plot here for this movie.
So this is actually if I click, it's not working.
But for the reviews you can just write down something.
But we will not be able to see it right now.
What we're going to see here, he's in a PAETEC.
So the official
official IMDB score is and I'm going to just grab that movie again that I imdb really cool.
Now, this has been calculated based on and I'm going to just paste here the movie that I'm DP Votes.
All right.
Votes recorded.
Just some info here doesn't have to be this one.
OK, let's just make it on this side.
Yeah, here the cast.
I don't have anything for the cast at the moment because here we are going to print something else.
But I don't have the function.
We're not going to create it.
Now, this part here, actually, we do have the writers.
Let me just show you, we do have this here.
Writers and these writers are here.
When we click on the media, we actually can change that one as well.
And we can see what else we can see here, PAETEC.
Actually, we're not seeing any real writing, right, sorry about this, guys, so I'm thinking something,
and that's why, you know, I think we're good to go at this stage.
So we need to change a couple of things here.
Well, we will add them later on now.
OK, so I'm going to go here and look what will happen.
So if I go movie here, if I click this one, it will load the same movie.
But if I click this one, then yeah, this is getting two results and in one same space.
So how we can resolve this, we can get rid of this by cleaning the main panel.
We already have this mean where it is access to this main content here.
So what we need just to create a function and reset the main panel.
This main power is where we store the entire information.
So I'm going to say export const reset mean and that will not take any parameters.
Ladies and gentlemen, and you should be consed, right.
Reset Main.
And what else we need to reset here.
OK, I need to set the entire main content to empty so class names, names start main content.
Cool.
I want to set the inner HTML back to empty.
Now that is pretty much nice.
So what else we need to do is we need to go back to the index and we need to add this in our index just
above this displaying here.
So I'm going to cop I'm going to copy this line here and I'm going to say
reset the main the main content in here.
I'm going to just call with the movie View.
I'm just going to call reset me.
And that should work.
I'm going to save it now.
Here it is.
I have only one because it's loaded.
The only this one before it.
We do have the both of them.
Do you remember?
So I'm just going to try movies here.
We're going to load this one.
Cool.
If I flick to this one.
Nice.
So it's working without being without putting all of the results in one place.
Now that is all nice.
But what we can do here before we are waiting for the results, we can just mimic this thing so we can
just get the loader here.
Right.
So I'm just going to copy this one and I'm going to put the loader back back there.
Why?
Because we still waiting for the results.
Oops.
We still waiting for the results and we can use that loader, but we want to stop the loader, same
as we did here.
After we get the data back right now, after we get the data, we just stopping the loader because we
don't want to spin that indefinitely.
Nice.
Here it is.
So if I save it now, it was too quick.
So if I go back to movies, so if I use this one, here it is until it's loaded, bam, they're nice.
So this is working like a charm.
So what we have done this, ladies and gentlemen, we create a movie of you inside.
We just base the entire markup.
We just use a couple of things from based on the movies, because in the index we pass that data from
the movie.
Right.
And that is how now you can now with practice, you learn how to use the functions into passing the
data from the controller back to the view and using that here.
So don't get confused.
This movie is actually holding the entire data.
From this guy here, DataLab movie, and that data was the application state, right?
So we create the search object here.
The second thing that we created was the movie object.
You remember?
I'm just going to show you.
So make sure that you're updating all of these things as well.
Now, if we click here and inspect comes along.
So if you go back to the window, we're just going to zoom in here.
We know the data in Hitwise.
I do have the movie object here.
I don't have the search because I've never search.
Let's search something.
Let's search on other movies like, I don't know, Tarzan.
And now now if we do go back to the window, the data, I will have the movie Object and searched object
who now in the movie Object.
We do have all these data there and you can use as much of the data you want right now is pretty much
it in the next lecture are going to create a couple of more functions because we want to be able to
display these ratings here, go back to the next to these steps.
For that, we need a function that will do that thing.
And yeah, we will see what else.
We need also to display the actors in here.
So we're going to do that in the next lecture.
So hope you like this one and I will see you in the next one.