In this lesson we'll finally implemented the Like button for single and sweet instances for all those
answers.
That is not being created by the user who's making the request.
So as we've said in the previous lessons users will either see a like button or to edit delete combo.
Let's jump right into visual studio code and let's get started.
As you can see here in the aged e-mail code of the answer component we have this diva.
We've added and delete bottles that is shown only if they use it was making the request is also the
answer suffer.
So yeah we know we can create another diva.
We have a v Elsa and the inside of this diva.
We can create an edit button and inside of this button we can add like so I'm just going to move these
stronger here and yet we can also add it Larsen.
So Glass for an out button.
Martha on ascent and if we now go back to Chrome we can see that the Like button is in fact here.
There is no style at all so we only see the like Word.
And that's because we want to style the like barter in a very specific way.
You see the delete button here.
This is an outline button meaning that in these specific case the class used to give a color to the
button his button outline danger where danger is specifically the class that provides these red color.
So the Like button is going to be very similar to the delete one but we want to turn the background
completely red as you see it right now.
Only if a user has already left a like on a specific answer.
Otherwise only the border will be shown like you see right now.
So in order to achieve our goal the component is to know if a user has already left alike or not.
So yeah we can define data attitude
and we can set to properties user like and swear that we can initialize as these dot elsewhere dot user
as voted which as you probably remember is one of the fields serialized in our answer to see realized
that a class you see and then let's also define another property which is going to be very useful and
we can call these likes no these not answer not likes count Oh well in fact even better that we can
just call it legs count it.
So basically as soon as the answer component is rendered it will already know if the request user is
already like the specific answer for instance that it's showing and the likes counter for the same instance.
So appear in the template.
Now we can't customize classes based on the value of user like dance.
So yeah we can't define the class to be button danger
if the user isn't not really liked the answer.
Otherwise the glass can be button outline danger.
If they use it as not liked the elsewhere and adjust tested.
Yeah we can add on Clicker use it like advanced work equals not use that like dancer.
And if you now go back to Chrome we see that we have the like button.
Let's explore that component using new dev to also sew up a question.
We have this where component and in data let's move these down we have use it like dance a force so
therefore as you can see the glasses button outline danger.
But as soon as I press the button the big round turns red and use it like dance where is set to true.
Perfect.
We now have to add all the code needed to communicate with the rest api so that the preference can be
registered in the database.
So going back to answer that view now what we can do is that we can assign a tangled like method to
their own click event.
And now we can define these methods so toggle like and it to avoid the use in a lot of if as clauses
to make the code a bit cleaner we can use Ethernet to open a door to check if the user is already like
the answer so that if they use that as already like the answer but is still pressing the button we can
call the UN like transfer method.
And if a user has not yet liked the answer everybody wants to like it.
We can call the like and swear method button.
So now we are inside the toggle like method.
We can add these dot user liked elsewhere is false.
And so if true we call these dot like answerer.
Otherwise we call these dot like cancer so let's implement these two methods.
First of all to make everything faster these thought the user liked answer set to true and d dot likes
counter.
Plus equals 1.
Then we can define the like end point.
So the EPA and these dot elsewhere dot I.D. and then life.
So this is the endpoint that as always we can use.
We have the API set of these functions.
So first of all let us imported and now you had to be low.
We can make a post to do like end point the unlike password metal is going to be very similar.
Of course yeah we can set user like dance for two forms.
Yeah we can remove it like the endpoint is exactly the same.
What changes is the age DPP method.
So before testing the new functionality we can add.
The likes counter.
I can just use different kinds of parentheses like so.
And yet inside I can interpolate the value of flags counter like so.
So there's no test.
However if he works first of all we see that we have an error here.
So let's check it out.
Property to like is not defined like your stuff because we add not defined it.
So let's refresh the page.
And now everything works as you see so let's press like and dislike is added If we refresh the page
it is still here.
Perfect.
So let's look out and the idea let's just create a new account so that we can basically test everything.
Simply test account test at account that's com that set password and now we adding.
So let's open up the question.
We see that we now know that relied on large on each of the letters.
And most importantly as you see the like button on the first question tells us that this answer has
already been lied to once and if we now press like one more time the counter goes up to two.
Awesome.
And if we add the brand new question log Dean it is test account.
Let's see what happens.
Submit your answer and in fact we don't see a like button.
Of course we see the edit and delete buttons but as you see there is something odd going on.
It's like if the flags counter is gone well let's inspect question we see that we have three and swear
components.
And if we check a key we have 0 1 2 because in the question component we are passing the index of the
answer we have surveyed for every single question as a value for the key prop.
And so if we go back to Chrome and inspect these first and sort a component we keep zero in these.
We see that the likes counter for these is set to two even though this is in fact the nuance where just
added by the test account user.
And this is one of the reasons why setting a proper value for the key prob is so important because the
key prop is very important for a user Yes to keep track of all the nodes in the application as a matter
of fact.
If I now delete these elsewhere we can see that they like counter up here once again in the proper answer
for instance.
So to fix this problem let's go back to question that view and yeah let's just delete all of these and
so forth and swear in and swear.
We want to pass through a dot I.D. as a value for the key prop and if we now go back to crown we can
see that the values pass to the key props have changed.
And if we now add a new answer submit your answer for everything now works perfectly very well.
Developers are a single page application is basically completed most of the features have been added
and everything works perfectly.
There is however one very last feature that that application really needs before compiling the production
builder and we are going to implement that feature in the next lesson.