Welcome back, ladies and gentlemen, today we are going to do we are going to work on the flight controller,
but before doing that, I have done a couple of mistakes by my side, and that is not cool.
So I will try to fix them.
So first things first, let's go to the models and let's go to the movie.
So here we need to add this, that here so we are not getting the year actually from the API.
And that is something that I told you that I'm going to miss a couple of things in here.
I discovered that we're going to need it, and that's why it's here now.
OK, that's pretty much done.
Now, what I want to do is also in the cart view instead of sorry, not in a, you know, like view,
instead of displaying like model, we should say, displaying model here, everything should be OK here.
We missing one more actual function in this function will be for displaying the ABS.
Sorry.
Let me just close this one.
This function will be for displaying this here, the number in that circle.
OK, so I'm going to do this so I'm going to say export const display like number and that will be equal
to the Leicht number that we're going to past the dysfunction.
And so you don't need to worry about this one.
Now I have a couple of Mistick mistakes here consed and that's it.
Now display like no here.
I'm going to use the class names that like Circle and this we haven't created yet, but we will do just
shortly.
So I want to set the text content to the like the number that we are just passing on top here and that's
pretty much it.
So simple.
We need just to create this like circle in the we need to write it actually in this here now like circle
that document dot query selector.
And here I'm going to say like not Daksh circle.
Nice.
So this is coming from the C if I click inspect here it is like a circle so I want to change this text
content.
Zero.
I want to change.
If we have five liked movies then should be the number.
Should be five here.
Very good.
Now we're done with that part.
So we fixed up or we added some things.
Now let's go back to the index.
Things first things first.
Things we need to do.
We just import this car actually like we need to imported from the models right now.
The second thing that we need to import is the view and just change this like view.
And everything is pretty much the same after that.
OK, now here we are going to create another object for the like right inside these data.
Cool.
Well, what we need to do is actually to create a controller here.
So after the card controller, we need to add like a controller.
No, also, we need to add the event listener now loop what is happening here.
So this lecture is pretty much hard to explain.
Why?
Because the event listener on this button is actually here and this button we are just going to need
to target down here now here actually where we are targeting at the tickets to card here, we need to
say like a movie.
Right?
So that is where we need to talk.
And I'm going to copy and paste this one.
But here we need to change a couple of things.
The first thing that I want to change is the main content.
So I'm going to inspect it.
And here is the main content, right, social likes.
OK, so copy that class and want to talk about class in.
Oops.
For some reason, it didn't copied, OK?
And every child of that class right now, we should be able to do it here.
I will say, like controller.
Now, that is pretty much it.
So if these Target matches those classes here with a child, that means that here that is click and
we need to go back to the flight controller right now.
Here I will say consed like controller.
It will not take any parameters here.
Make sure that you do semicolon there.
OK, now here we need to do a couple of changes.
But before that I want to add to clarify one more problem that I think I do explain quite well in the
previous lecture.
Now, when we go back to the like for you here, we do have this, like, status display like right
now that will we will use when we click this button actually to be full heart with the red color or
when I click it again that it will be like this.
So this is empty heart.
Now, that is done with this function.
Now, this function needs to add the class and said this actually with full heart.
But here I notice one thing that we have done a mistake and it should be icon heart and icon heart.
So we need to change a little bit.
The classes now where these classes is.
I did the explaining because we didn't have a need so far.
For now, this button here is actually displayed by the movie View, and we need to go back to the movie
View and find Icon Heart.
Here it is.
This is the icon heart that we are just clicking on right now here.
We need to add that class in order to target this this one later and without that icon heart.
And also we will need to change this display movie because at the moment it's only taking a movie.
It doesn't take the likes.
So we need to parse that like as well.
And then we're going to check, OK, if the like is or if if the light is already there, then I want
to change this class to I cannot.
And or if the like is not there, we're just going to leave this one.
So we're going to use the ternary operator here.
But we will do that just a little bit later.
Right.
And I don't like the way this ladies and gentlemen, the markup looks really this really bothers me,
but it's so big and I really, really don't want to look at like this.
Right.
So make sure that you fix things like that because it's not natural.
It's not good.
OK, so I'm going to close this now.
We are set to go with the index.
Right.
Sorry.
Now, here, first thing that we need to do is actually to create the data that like.
Right.
Because we're going to check if it's different than data that like means if it's not, they're just
created that life will be equal to the new you like.
Right.
So that will create empty life because we don't have anything in the constructor.
That's why we're not passing anything here.
Nice.
So what's next.
So next is actually to check to get the movie ID right.
This actually idea I want this I.D. to grab it to a concert in the costumes called Leicht I d and I
need to make this better like that.
Now here I'm going to be able to access by the movie that I am The Bee.
I'd just like that.
Right, so now it's going to be stored there.
Cool.
We don't have any problems and I'm going to check if this movie is already being liked because I don't
know actually if it's this movie's been like or not.
Now here I'm going to say if and inside I'm going to say if this is different, then DataDot.
Like that chick movie, like status, remember, we do have this function, but it really bothers me
because it's not providing me.
So like we passing like that.
So he's going to check now.
If it's not there, then we can add an item.
And I like to you like object.
Right.
So we're going to add item here.
And actually, let's open the light controller and I'm going to copy this ad like because I'm going
to forget what's happening there now.
Data that like not at like the movie.
And this is getting these ideas from data, that movie that I am giving it right now.
The other one is movie.
Sorry, data.
That movie.
The poster.
Cool.
Now we got the title data, that movie, that title.
And here it comes.
The year before we didn't have the year in the the other controller, the movie controller data that
movie that year.
Whoops.
And data that I'm DBI data, that movie that I am reading.
So cool.
Now we'll be able to we don't need that bracket over there.
Right.
I was confused what's happening.
So make sure that you don't have that record, otherwise it will run.
We will run into problems and we will know what is happening.
OK, no, the thing is that we would like to display now the like.
No.
So if we already put something in the like now the number will be increased and we have we have a functions
for that.
OK, now the next thing is to display the like on modem note.
So we will see here like view dot the display like no, very good in here.
I'm going to pass the data that like that numbers I think was number of likes right.
Here it is.
And that will return the length of the area and it should be as a function.
Cool.
Now let's see what's happening here.
If I refresh this one, if I click on that button.
Ladies and gentlemen, we have a number, right?
That's cool.
So we have one only nice.
If I'd add another one, it will be two.
So that is working.
Now, let's display something inside for Dad.
First, we need to store all the likes of the movie that we like inside a constant call like you can
call whatever you want.
So data that likes that show instead of list is likes.
Right?
So that method will return the entire array of the elex.
Right now we do have this one so we can look through this.
So like we're going to loop we do for each method.
So I have the access to the current element.
Right.
And what I can do, I'm going to call the like view that display instead of like, no, I should be
like Motal.
Cool.
And I'm going to pass the element.
All good.
Let's save it.
Let's see what's happening.
So if I like it one more, if I go here, something's not right, something is not working and it's
like instead of like some looping through something that doesn't exist.
OK, now I get that error.
You got to fix that one.
So movie just going to click this one.
I'm going to like that one.
I'm going to click this one.
I'm going to like this one.
So I have to now again, we do have some problem.
OK, let me just cancel.
I need to cancel, lock the data that like so I want to see what's happening here.
Right.
And I'm doing a couple of mistakes here.
One and this one too.
Let's go to the console and see what's happening.
So data lags is undefined, right?
Why is this?
And are the likes where it is, of course, that is undefined because it's like not DataDot likes.
No, I will add one, here it is now it's working.
Ladies and gentlemen, it's adding something nice.
So I'm going to have one more.
Actually, I don't have one more because I need to search it, but I'm going to open it.
And here it is.
So if I had movies, other movies, and if I go here at this one, I go here at this.
Actually, we have added that one.
Now we have three.
OK, well, why we do have this result in our.
Let me just show you our console is I like having a three.
Same is the number on top three in three here.
So why are we having this duplication?
Well, that is because we need to reset the model back to normal.
And we do have function for resetting like model.
So how are we going to do it?
So here I'm going to say, like you that reset like model like that, just simply like that.
Now, I'm going to go back to the movie.
I'm going to add the Scary Movie and I'm going to add El Camino.
And now this button is staying like that.
It's annoying very much.
And it really is only two, right?
There is no duplication because we're adding, adding, adding the same movies all over again now.
Good.
We did.
We set that one back to normal.
Now here we can check the status of this bad boy here of this icon so we can check the status.
So what I'm going to do now here is actually after the likes.
I'm going to check the status.
All of the like
media.
OK, so what I'm going to do now, I'm going to say consed check.
It's like, no, this will be able to store data like check.
So again, I'm going to use that check movies like status and I'm going to pass the data like that.
I'd go now check is like and here she becomes.
I'm sorry about it now.
That is pretty much done.
So here is going to say, OK, true or false, it's going to give us that option.
But what now?
So I can just go here and I can say, like you that display, like I can call the function that we created
for that button and I can send the check is like, cool.
But the way we said that, this one, just with what it is in it, is actually it's a like view.
So the way we set this one first, we are setting the icon hard, actually.
And again, here we do have the icon heart.
Um, let's just see something, you know, here.
What it will do if laxly does is true, it will go here and it will get this wonderful icon.
Right.
So that's the intention.
But if the like state is true, if the Lexton is not true, it will go here and get the empty heart.
Now, for that reason to work, we need to just put here exclamation mark, meaning that if it's true,
it will not it will make it not true.
And that is pretty much it.
Now, this will not again work because our movie, your movie controller, where it is movie controller,
the movie controller, we need to pass here something else.
So I will make a comma here and I will say data that like that check check movie like status.
And I'm going to pass the idea because remember, we do have that idea when we were creating the movie.
And again, this will not work because we are checking for the like with that movie controller, but
actual data that like it's empty, it's not being even created.
Right.
This one here does not contain the like object.
So we can avoid that just for temporarily seeing DataDot like equal new like just like that outside
of the functions.
Now let's see what will happen.
No movie.
Actually, we need to create a lot more in order for this to work.
So now if I press it like this, here it is.
It's changing, but it's not reverting back.
Why?
Because we are not using the the other option.
We are checking if what was here is we checking
we checking for not like movies.
Right.
And what about if the movies are being already liked so we can use the same thing.
We can use the same thing here.
So we can use the same logic that we created if data is liked or not like, but before that, we need
to go back to the movie you here and because here we need to pass another argument called like, remember,
we passed that one.
Now here we need to find.
I cannot.
And we need to use actually the ternary operator here.
OK, so if that icon is actually liked, we need to just use something else.
So I'm going to cut this one from here.
And as I told you, I'm going to be going to use the ternary operator.
And what does this ternary operator.
It will allow us to create in one line something very powerful.
Now, dollar sign.
And I'm going to say here, like so if like means if it's true, then I want to have icon heart.
Else I want to have Eichen Heart Dash.
Oh, and that is pretty much it.
Now we do have the class.
Everything is working.
Good, good.
So save this one.
Go back here.
It's working, but it's not working.
When we click again now that it's easily fixed with this condition here.
Now, what we what we need to have in this condition is pretty much seen what we have here.
Just a couple of modifications.
OK, the first things I want to delete, because when we click again, I want to disappear.
I want this object here to be deleted.
So what we can do is data that like and we can use that delete method that we created.
So delete like movie and I'm going to pass inside here.
Liked it right from that one on top that we just created.
Good.
Now that will delete it from delete like the movie, but also we need to delete it from the UI.
So like view the display like no.
And I will say data that like that number of likes and that ladies and gentlemen will decrease this
one.
So if it was one it will go back to zero.
OK, so we also need to check the status like this.
But here now we're not going to check if it's not like we got to check the the other way.
Right.
So if it's true, then it will change to something else.
OK, that is good.
And we need to display here is we need to copy the same same thing and put it
in.
That wasn't so good in.
Let's test this out.
So save it.
Go back here.
I'm going to like the movie.
It's there.
I'm going to unlike the movie, it's not there anymore.
I'm going to like it again.
It's there.
And let's see if it's changing.
So if I open.
Sorry.
So I now need to close this.
Probably so now here if I click it I will have the movie right now.
If I unlike the movie, if I go back it's going to be empty.
OK, let's do something else.
So this is the movie that I'm going to like the Scary Movie and I'm going to go to the next page and
this B movie I'm going to like now here I do have the three.
But look what's happening here.
If I go back to the first one and if I click it here, it will automatically know that we already have
liked it.
This.
Why?
Because that is coming from the movie.
You remember we just from the movie controller.
We passed that one here and we initially set that one to be like that.
But because we haven't browser, because the browser is not refreshed.
So if I refresh now, everything will be gone and probably I will end up.
Yeah, everything will be gone.
You don't have anything like now that will be for the next lecture.
So when I do browser refresh, I want something to stay in to be stored locally in the local storage.
So when we store that one, so regardless of what we refresh and we're going to do to things, we're
going to store this here, this, and pretty much it will know what we have liked and what we have in
the car, and that is going to be more powerful than we have it right now.
So that is pretty much everything that for this lecture.
So it was super, super long, super.
It was.
It is really complex, but it is what it is.
So I just want you to understand and if it's not turning out for you, just the final version and see
if you have done a mistake, because only small mistake with like one s here, it will not work.
Do you understand what I'm trying to say?
So that is pretty much it.
And I will see you in the next lecture.