Instructor: Hey there, and welcome back.
Let's now build the last part of the app
which is the likes, and we're going to start again
with building the model.
So let me start by showing you the functionality
that we're actually trying to implement here.
So I'm opening the final version here.
Then let me search for pizza,
open up the first result here.
And it's not loading because it's the one
that's actually already loaded.
So the next one.
And so down here we have this heart,
and now we want to be able to actually
click the heart.
It then becomes selected,
and it's added here to the list.
Okay.
And if we move down to the next one,
then we can like this one as well.
And now we have both on the list.
And we come back to the first one,
then the like should still be there,
and indeed it is.
And then we can add some more,
and then the list then keeps growing and growing,
adding all of our elements.
Okay.
If we then go back to this one,
we can unlike, of course,
and then it moves us out here off the list
and it's no longer there, of course.
So that's what we're trying to implement here,
and let's start again with the model.
So I'm going to call this one here Likes.js.
And now this point will actually be a bit similar
to the list class.
Okay.
So we will have a list again, and in this list,
instead of saving the ingredients as before,
we are going to save the likes.
So export default
class and Likes
or constructor, and again, we don't pass anything into it,
but we initialize it with a empty array,
which is going to be stored in this.likes.
Okay, and so again, this is a bit similar to the list class,
and so we could do the sub-classing here.
So just like I showed you in the ES6 section,
where we can add subclasses to classes.
But in this case I think it doesn't really make sense,
because first they're actually not that similar,
and also, they are semantically quite different.
So a shopping list and a list of likes
is quite a different thing.
So it's not like, for example, a pizza recipe,
which is still a subclass of recipe,
so they are like related things.
But a list of likes and a list of ingredients,
well, they're kind of a different thing.
Okay.
Now, nonetheless, let's add the addLike method here.
And so again, this is a bit similar to the list
that we coded out before.
Now at this time, we are going to pass in the ID,
the title of the recipe, the author,
and the image.
Okay.
And so that is the data that we need
in order to display it like this.
So, but we want it here in the list.
We need the author, the image,
the title of the recipe, of course,
and then the ID so that we can then open it up
like this.
So we need always to have this ID
so that we can call this URL, okay?
And so that's the data that we need to save here
in each individual like,
so ID, title, author, and image.
So let's create a like object,
and an object that will contain
simply all of these elements.
So ID, title, author, and the image.
And then we will then push it to the likes array.
So this.likes.push.
Okay, and then just like before,
we are also going to return the newly created like.
Okay, and now we have to delete like also,
which needs as an input the ID,
and so this one's actually quite the same as before.
So let's actually go ahead and save us some time here,
go to the list,
copy all of this here,
and get rid of this here.
And so all we have to change really here
is change it from items to likes.
Okay, and then it's going to work in the exact same way.
So we pass in an ID, then we find the index
off that ID, and then remove the element
corresponding to that ID
from the likes array using the splice method.
Okay, so that's exactly the same as before.
Now we also need another method here,
which is the isLiked.
Okay, and again, we're passing in an ID,
and this method here is basically to test
if we have a like in our array here,
which has the ID that we pass in.
And this one is going to be important
for this functionality here.
So where we want to display this button here
as either liked or not liked,
so we have to know when we load a recipe
if it's a liked recipe or if it's not
in order to then accordingly style this button.
But you're going to see why a bit better
when we start coding the controller in the view.
So how can we do this?
Well, we just need to try to find the index of the ID,
so in a very similar way to up here, again,
and then see if it is different to minus one.
Because if the index is minus one,
it means that it is not there.
So what we're going to return is
this.likes
.findIndex,
and then find the index, of course,
where the passed ID is equal to the current ID
in the current loop.
Okay.
And we will then test if this is different
than minus one.
Okay, and that's because if we cannot find any item
with the ID that we passed in,
then this will be minus one, okay,
and if this is minus one,
well then this entire expression here
will turn out to be false, which is what we want,
because it means that the recipe with the ID
that was passed in is not liked.
Now on the other hand, if this turns out a number
that is not minus one, well then this here
will of course be true, and we will then return true
because the recipe with the ID that we passed in
is, of course, liked.
So it is basically here in this array.
All right.
So that's the isLiked method,
and now we also need a very simple method called
get the number of likes.
Okay, so this one just returns this.likes.length.
And okay, so this should be enough for the model for now.
We will add some more stuff a bit later,
but for now it works fine just like this.
And I think we don't really have to test this here
now in the console, because it's so similar to
the list model which is already working,
and so the likes should be working as well.
And if not, well, we're going to find the error then
in a second in the next video
when we will start coding out the controller
for this.likes.