Instructor: Let's quickly continue and build now
the controller for the Likes feature of our app.
So this is where we left off with our model.
Let's put it this way here,
and start working on the controller again.
Okay, so let's...
Get this code here
inside the like controller.
Now whether we actually trigger a new like
while it happens, of course, on that like button,
right, and that like button is again in the recipe,
and so we will control that click again
in this EventListener here, okay.
So all events that happen on the recipe,
we will all of them handle here in this event header.
So we are already handling the decrease button,
the increase button, and also the add to list button.
So we didn't write it down here, let's actually do that.
All right.
So let's grab the name for the selector.
So it is in recipeView, and like is this button.
So it's the recipe_love class
that is associated with the button, okay,
and so that's the one that we want to test for now.
So else if
the target
matches
this selector or any child element just like before.
Okay, because I think there are some childs,
and yeah, of course, so this SVG here
might also be where the click happens,
and in that case, we want to still match
the button itself.
Okay, and what is going to happen in this case,
well...
We want to call the like controller
which we don't have yet, but we will do it in a second,
so it is simply the controller,
controlLike.
Okay.
So again, just like before, let's start by creating
a new likes object, okay?
And again, we will only create it if it's not yet there.
So if we have state.likes,
or actually if we don't have state.likes,
then we say that state.likes is a new likes object.
And now we need to think about two different states
that can happen.
So let's say that we have a recipe that is already liked.
So in this case, if we hit the button,
then we want to remove this recipe from the list
of liked recipes, and so we want to change
the underlying data model.
We want to change this button here like this,
and we also want to get removed from here.
But if it's the other way around,
so if we didn't yet like it,
well, then we want it to be added,
and we want it to be added here also
in the user interface.
Okay, so we have two different situations.
And so now we are going to need that method
that we coded out before, which is to test
if a certain recipe is already liked or not.
So let's start with what happens when it's not liked.
So state
.likes
.isLiked,
and now we need to pass in the current ID,
which is, and let's actually put it out here,
so currentID is state
.recipe.id, right?
So let's say current ID.
And then we're also going to have an else statement,
so in the case that the current recipe was already liked.
But usually when we encounter a new recipe,
it will usually not have been liked yet,
and so we're starting with that one here.
Okay, so let's actually say that here,
user has not yet liked current recipe.
Just wanted it like this, okay.
And then down here...
Let's copy this.
So I always like to keep my code commented.
User has liked the current recipe.
All right.
So we then want to add the like to the data.
So to the state, let's say.
We want to basically toggle the like button.
So in this case where it has not been liked,
it will then become the full heart,
and in the other case down here,
it will then become the empty heart, basically.
Okay.
So toggle the button,
and then add like to the UI list.
And if it's the other way around,
well, then we're going to do the other thing.
So remove like
from the state.
Toggle the like button still,
and also remove it from the UI.
Remove like from UI list.
So let's start by creating a new like here,
and that is done by saying state.likes.
So what we created just up here.
So state.likes.addLike.
And so what do we need to pass in here?
And let me actually do it in separate lines.
So with the Likes, we need to pass in the ID,
the title, the author, and the image.
Okay, so the ID is the current ID.
Then we have state.recipe.title,
and we have author, and of course the image.
Okay, so we created our new like here,
then we toggle the like button,
and we cannot do that yet because we don't have
the view functions just yet,
and then add it to the UI, which we also still don't have,
but that's simply console.log.
So state.likes.
Okay.
And the same thing here, in the other case.
So instead of removing it from the UI for now,
let's just log it to console.
And so here we add it into the likes,
and here we want to remove it from the likes,
so all we have to do is to say state.likes
and delete the like.
And we pass in the current ID,
and that should be it.
Okay, so that what we defined right here
in our Likes model.
So we hooked it up down here also,
yeah, because we have controlLike,
and so we can now actually now test it out already.
So let's search for pizza here
and hit the Like button,
and we have an error.
Okay, so likes is not defined.
And yeah, of course, so this Likes here is not defined
and that's because we didn't include
the model just yet.
All right, so now we should be ready to roll.
Oh, we have our Likes array already here,
and indeed, it is the best pizza dough ever.
So it's working, you see,
and it has this current ID also here,
and so great, it's working.
Well it's not really here yet,
and so let's now try it out with another one.
And yeah, now we have both,
and it's also working.
And if we now go back to this one here,
well, now I will hit this button here again
and see if it's then deleted.
And indeed, it's gone.
So it's working.
So now we only have the deep dish fruit pizza,
so the next one.
And if I now also dislike this one here,
well, then it's gone.
So all our likes are now gone,
which means that our controller is currently working.
Okay.
So next up, all we have to do now is to create the view.
So toggle this button here,
and then also display the list of likes up here.