Instructor: And in this video,
we're gonna handle the user interface for the likes.
So let's create a likes view.
Okay, then get this part here.
So our elements, close it up.
Now the first thing that we're gonna do
is to create a function to toggle the like button.
So we say export const,
toggle the like button.
Okay, and in here we will pass the is liked variable.
So a Boolean saying true or false,
whether the current recipe is liked or not.
And we will then adjust the button accordingly.
Basically, what we wanna do here
is, in the recipe view,
where do we have the icon?
It's actually right here.
So we wanna change basically this icon here.
So we can have the icon heart outlined or just icon heart.
Outlined is when it's not liked
and without the outline, just icon heart,
is when it is liked actually.
Let's just copy this part here
so that we know how this is written.
And let's create a variable for this name here,
according to the is liked variable.
Const, icon string.
And we're using the ternary operator here.
And say, if it's liked,
then it should be icon heart.
And, if not, then it's icon heart outline.
Okay, and now we can actually select that button.
So let's take a look at the class name.
And it's recipe love.
And what need to change is on the use elements.
So recipe class,
and then the use element is a child of that.
We're selecting this one
and now all we need to do is change the href attribute here.
So this one.
How do we do that in JavaScript?
I'm not sure if we have done this before
and so all we have to do is say .setattribute
and then we say the attribute that we wanna change,
which is the href one,
and then what we wanna set it to.
And we wanna set it to, let's take a look, to this.
No, actually to this here
and then we will add the string that we just created.
So img/icons.svg and then or icon string.
Okay, makes sense?
We're selecting the element where the icon is located.
So it's this use element, parent of recipe love.
And then we set a href attribute, using this method here,
to our icons.svg
and then the icon name, according to is liked.
Alright?
Let's test that actually.
In index.js.
And here it is, okay?
And before we can do that, we actually need to of course
import this list view
and it is not list, it is likes.
So likes view.
So likesview.togglelightbtn.
And now, in here, we pass true.
Okay, so this is the case
where the user has not yet liked a current recipe
and so, after he likes it,
then, of course, it should be liked
and so it's true here.
And then, the next one is the opposite,
and it will be false.
So that part should now be working.
And actually we can test it here.
And it is working.
Well, kind of at least.
It seems like one of the strings is not correct.
So where do we have that?
So it's icon heart and icon heart outline
and should be outlined like this.
Alright, now it's working.
So, cool.
Now what's not working
is that when we come to this page here it'll not be toggled.
So let's say we like this pizza now.
Then we choose another one.
And when we then come back,
then it'll no longer be with the liked icon here.
So if now click that it is unliked, now it's liked again.
But it should be liked right from the beginning.
And so we need to implement that
and that'll be in the recipe view.
Okay, so when the recipe is loaded,
then we already need to know if this recipe is liked
and then display this button here accordingly.
Let's open up our recipe view.
And then, in here, we need to not only pass the recipe,
but also if it's liked.
So, is liked.
And then we come down here to the icon
and then we can just change this here,
put in a variable and use the ternary operator.
So, is liked,
and if it is liked, don't add anything here,
and if it's not liked, then add the outlined.
This is a bit similar to what we did in the other function.
So if it is liked,
then it'll just be icon heart.
And if it is not liked,
then it'll be dash outlined will be added.
Alright and then finally, of course,
we also need to pass in the is liked
when we render a recipe.
Index and is liked.
And where, ah here it is.
So we have state recipe
and that's now separated into a different line.
And we also need to pass in state.likes.isliked
and then the current ID.
And we have that available to us in this function.
So here is the ID actually.
So the current recipe ID.
So here we test if it is liked.
Here this will then return true or false,
which is what we pass in to our render function.
So not this one.
Whoa, what's happening here?
Well, anyway.
So we pass it into this render recipe,
saying if it's liked or not.
Alright, so let's test it out now.
And it says error processing recipe for some reason.
Okay, so it means that it happens somewhere here.
So that's actually locked an error to the console.
Okay, so I'm not sure what's happening here
because apparently something is wrong with this here.
But I'm not really sure what it could be.
So let's try to load this again.
And so now we can see the actual error,
cannot read property isliked of undefined.
Let's take a look at that.
It is at control recipe.
And so the problem is right here.
So it cannot read this state.likes.isliked
because whenever we reload the page,
we don't yet have a state.liked.
Okay, and so therefore,
we can't really read then this method.
Okay?
Now in the next video,
we will make this liked data persistent.
Basically, we will save it in the browser
and when we reload the page, it'll still be there.
And then it'll no longer be a problem.
But, for now,
a good way of fixing this
is to simply out of everything
so you're in the global scope.
We can simply add a new like to the state
whenever we load the page.
Okay, so just for testing here
so that we remove it later on.
Alright, so let's test it out again now.
And yeah, so now it's working.
Let's search for pizza.
And we liked it and we can dislike it and that still works.
Let's like it again.
And now let's try coming to the next one,
like it as well.
Go to another one and then come back to this one.
And, you can see, it is still liked.
Great.
And this one here should also still be liked.
We can unlike it,
come back to this one,
unlike it as well.
Come back to this and it's still unliked,
just like we put it before.
So the functionality is now actually working.
Next up, let's add a small function
that will insure that this heart here,
so this entire menu here,
is only displayed when there is actually a like.
And if there's no like,
then this entire button here,
liked heart button here, should disappear.
Alright, back into the likes view.
Let's say export const toggle like menu.
And we can pass in the number of likes here.
And based on that,
we're gonna figure out
if we should show or not the like menu.
First off, we can actually add that element to our base js.
So, let's take a look at the html.
And it is right at the top.
So what we're looking for is this.
So this likes list here.
Or actually this field here.
Okay, so this here is the icon.
And that's the one that we wanna to show or hide, depending.
Base.js.
Let's add a new one here.
And I'm gonna call it the likes menu.
Remember, likes menu.
And all we have to do is say elements.likemenu
and now we can manipulate this dial property.
Okay, so in order to manipulate a single style in css.
And what we're looking for is the visibility.
Now as you already know,
if we had many styles that we wanted to apply,
then we would just define a class in css
and then toggle that class here using JavaScript.
But, in this case, it's just a simple visibility property.
And so let's just do it like this with the style property.
We can now do a ternary operator and say
if number of likes is greater than zero,
then it should be visible.
And, if not, basically if it is zero,
then we want it to be hidden.
And that's it.
That's all that it really takes here, in this case.
Alright?
So it's the toggle like menu.
So index.js, coming back...
And actually, it's right here.
And so this should also happen in a control like.
And it doesn't really matter
if these are already liked or not.
We can just add it here after all of this.
Listview.togglelike.
And it's not buttons, it's menu.
Alright, and then in here we pass the number of likes,
which remember we did a method for that actually.
So get number of likes.
State.likes.
Get number of likes.
Let's test this one out again.
And we have a warning here.
So thank you, webpack,
for actually telling us
that toggle like menu is not in the list view.
And yeah, of course not.
It's the likes view, obviously.
Let's again search for pizza.
Open this one here up.
And actually it's already opened.
Next one and now we have one like.
And so it's here, of course.
And now we should have zero likes and now it's gone.
Now when we loaded the page,
it was actually also there.
So let's add the same outside here.
And again this is just for testing
because we are going to change this in the next lecture
when we're gonna persist this likes data.
But anyway, for now,
let's just put it outside here
so that when we reload it,
then it's really gone.
Okay, and last step,
we will now finally render our likes into that menu.
So just like this.
This is again very similar to the way we did it before.
Render the like and we're gonna pass in the like.
And then create our markup variable just like usually.
Now we need to get that markup from the html.
So for each like, we will have this list item.
And it is here.
And what do we need to put here?
Well, here is, of course, the ID.
So like.id.
And let's grab this and copy it.
Here we have the image.
Here we have the title as the alternative text
Here also the title.
And here the author.
Okay, and then finally we need to insert the html.
So first off, let's add this here to our elements.
So the likes list.
Likes list document query selector.
Likes list and so elements.likeslist.insert adjacent html.
And again, beforeend, and our markup.
And since were at it here, we don't need to test it yet,
let's first add the delete like function as well.
Export delete like.
And for that we need the ID as usual.
So that's like the element.
So document.queryselector
and then we will do our special css selector,
where we can select based on the href attribute.
And we did this one here before
in the search view, I believe.
Yeah, it's down here.
We select it based on the ID.
And let's go ahead and actually copy it
because it's the exact same thing.
Okay, so we want to select all of the anchors.
So all of the links which have the href with this ID.
Alright, and actually this is not quite correct
because we don't want to select all of the links.
We just want to select the links that are a like.
So we want to select not the links
but the ones with the likes link class.
So likes link and then the ones that have this ID.
Okay, and the same actually applies to the search view here.
So we don't want to select all of the links
because then that might select the link in the likes list
and not the one in the search results.
And so that is here a small bug.
And so instead, let's simply select the results link.
It's this, the results link.
That's the one that we need to actually select.
Alright, so this selects the link.
But we don't wanna just remove the link.
We want to remove the entire li element, right?
So we're selecting this link element.
But what we wanna delete really is this entire list element.
And that's very simple.
We just select the parent.
So parent element.
Very simple.
And if there is an element,
so it's always best to test here
if the selection was actually successful,
so if there is an element we can then remove it.
And just like before,
we move up to the parent element and remove the child.
Okay, now it is time to actually test this.
And this is our version.
Pizza and let's try it with the pizza quesadillas.
No error.
And it's here but it's not really in the list.
So something went wrong here.
While this functionality still works,
and the button is still gone,
but something in the code is not correct
and it didn't even give us an error,
so maybe it's just something with the render like.
Yeah, I guess the problem is
that we didn't really already call this function.
Yeah, so we just logged it to the console.
And so, of course, we need to do likesview.renderlike
and pass in the new like.
Okay, and so that's why we saved it here
also to this variable.
So we did the add like,
which then, remember, returns the newly added like,
so we can save it here into this variable
and then pass it to the likes view module.
Alright, so we have render like here and then also...
Well, actually let's get rid of this console.log here.
And here as well.
We already know that it works.
And so, all we have to do now is likesview.deletelike
and what we need to pass in now is the ID.
So current ID that we have up here.
And so now, we should be good to go.
So let's like this one.
The heart appeared and here we go.
And so we have pizza quesadillas.
Now we have to also shorten the title here, right?
So like it appears here.
And we already have a function for that.
So it's right here in the search view.
It is the...
Where is it?
So it's the limit recipe title.
Now we want to actually use it
here in our likes view as well.
So first we have to export it.
And so, let's now actually import this entire module
into our likes view module.
Or actually not all of it.
All we really want if the...
And I have to go back to copy it.
So all we want is just this function from search view.
So here we have title and...
It's actually not this one here.
The one in h4.
And let's now say limit the recipe title.
And let's see if that works.
Pizza, and we liked this one already.
And, yeah, so now it's better.
Let's now like this one as well.
And indeed, here we go.
And I can now click this and it takes me to that recipe.
And at the same time, it also highlights it here.
Everything's working perfect.
Our icon is also still liked.
If we take a look at this one,
then this is not liked.
But we can add it and, you can see,
that is now added of course to this one.
Now let's open one of these
and let's unlike it and see what happens.
And it's gone.
So it's working.
Our functionality is now fully implemented
and it works just fine.
Let's delete all of them
and take a look if the button actually disappears.
And indeed it does.
Okay, let's add it back and here we go.
And if you now reload this, then it's gone.
So it's no longer liked.
And so what we're gonna do in the next video
is to actually persist this data.
So basically save it in a browser
and then when we reload the page,
all our likes will still be there.
So that's a bit more useful for the user
if we were to use it on our local computer.
Great work, great job making it all the way to this point.
There's just a tiny bit missing,
which is this functionality that I just talked about
that we're gonna implement in the next video.