WEBVTT 00:02.620 --> 00:08.620 In this lesson we'll finally implemented the Like button for single and sweet instances for all those 00:08.620 --> 00:09.250 answers. 00:09.370 --> 00:13.210 That is not being created by the user who's making the request. 00:13.210 --> 00:20.030 So as we've said in the previous lessons users will either see a like button or to edit delete combo. 00:20.050 --> 00:24.280 Let's jump right into visual studio code and let's get started. 00:24.280 --> 00:30.460 As you can see here in the aged e-mail code of the answer component we have this diva. 00:30.510 --> 00:37.330 We've added and delete bottles that is shown only if they use it was making the request is also the 00:37.330 --> 00:38.460 answer suffer. 00:38.530 --> 00:41.800 So yeah we know we can create another diva. 00:41.800 --> 00:46.050 We have a v Elsa and the inside of this diva. 00:46.060 --> 00:55.030 We can create an edit button and inside of this button we can add like so I'm just going to move these 00:55.210 --> 01:01.990 stronger here and yet we can also add it Larsen. 01:02.050 --> 01:05.280 So Glass for an out button. 01:05.290 --> 01:13.660 Martha on ascent and if we now go back to Chrome we can see that the Like button is in fact here. 01:13.710 --> 01:18.150 There is no style at all so we only see the like Word. 01:18.240 --> 01:23.370 And that's because we want to style the like barter in a very specific way. 01:23.400 --> 01:25.950 You see the delete button here. 01:25.980 --> 01:32.670 This is an outline button meaning that in these specific case the class used to give a color to the 01:32.670 --> 01:40.450 button his button outline danger where danger is specifically the class that provides these red color. 01:40.500 --> 01:46.010 So the Like button is going to be very similar to the delete one but we want to turn the background 01:46.130 --> 01:49.370 completely red as you see it right now. 01:49.380 --> 01:53.490 Only if a user has already left a like on a specific answer. 01:53.520 --> 01:58.030 Otherwise only the border will be shown like you see right now. 01:58.050 --> 02:04.800 So in order to achieve our goal the component is to know if a user has already left alike or not. 02:04.800 --> 02:10.120 So yeah we can define data attitude 02:13.290 --> 02:24.010 and we can set to properties user like and swear that we can initialize as these dot elsewhere dot user 02:24.390 --> 02:32.870 as voted which as you probably remember is one of the fields serialized in our answer to see realized 02:32.870 --> 02:40.580 that a class you see and then let's also define another property which is going to be very useful and 02:40.580 --> 02:52.950 we can call these likes no these not answer not likes count Oh well in fact even better that we can 02:52.950 --> 02:56.090 just call it legs count it. 02:56.190 --> 03:02.370 So basically as soon as the answer component is rendered it will already know if the request user is 03:02.370 --> 03:09.130 already like the specific answer for instance that it's showing and the likes counter for the same instance. 03:09.180 --> 03:10.920 So appear in the template. 03:10.920 --> 03:17.090 Now we can't customize classes based on the value of user like dance. 03:17.280 --> 03:25.210 So yeah we can't define the class to be button danger 03:29.940 --> 03:33.320 if the user isn't not really liked the answer. 03:33.410 --> 03:40.240 Otherwise the glass can be button outline danger. 03:40.690 --> 03:45.280 If they use it as not liked the elsewhere and adjust tested. 03:45.430 --> 03:56.540 Yeah we can add on Clicker use it like advanced work equals not use that like dancer. 03:56.650 --> 04:01.140 And if you now go back to Chrome we see that we have the like button. 04:01.530 --> 04:09.960 Let's explore that component using new dev to also sew up a question. 04:10.530 --> 04:19.950 We have this where component and in data let's move these down we have use it like dance a force so 04:20.520 --> 04:24.030 therefore as you can see the glasses button outline danger. 04:24.030 --> 04:32.140 But as soon as I press the button the big round turns red and use it like dance where is set to true. 04:32.160 --> 04:33.210 Perfect. 04:33.210 --> 04:39.060 We now have to add all the code needed to communicate with the rest api so that the preference can be 04:39.060 --> 04:41.080 registered in the database. 04:41.130 --> 04:50.580 So going back to answer that view now what we can do is that we can assign a tangled like method to 04:50.580 --> 04:52.190 their own click event. 04:53.340 --> 05:02.530 And now we can define these methods so toggle like and it to avoid the use in a lot of if as clauses 05:02.580 --> 05:08.720 to make the code a bit cleaner we can use Ethernet to open a door to check if the user is already like 05:08.820 --> 05:15.450 the answer so that if they use that as already like the answer but is still pressing the button we can 05:15.450 --> 05:20.580 call the UN like transfer method. 05:21.030 --> 05:25.980 And if a user has not yet liked the answer everybody wants to like it. 05:25.980 --> 05:30.680 We can call the like and swear method button. 05:30.690 --> 05:34.320 So now we are inside the toggle like method. 05:34.320 --> 05:40.150 We can add these dot user liked elsewhere is false. 05:40.460 --> 05:47.570 And so if true we call these dot like answerer. 05:47.910 --> 05:55.400 Otherwise we call these dot like cancer so let's implement these two methods. 05:55.740 --> 06:05.940 First of all to make everything faster these thought the user liked answer set to true and d dot likes 06:06.820 --> 06:07.420 counter. 06:07.500 --> 06:09.450 Plus equals 1. 06:09.600 --> 06:14.100 Then we can define the like end point. 06:14.250 --> 06:24.660 So the EPA and these dot elsewhere dot I.D. and then life. 06:25.630 --> 06:32.160 So this is the endpoint that as always we can use. 06:32.800 --> 06:35.770 We have the API set of these functions. 06:35.770 --> 06:42.730 So first of all let us imported and now you had to be low. 06:43.030 --> 06:54.010 We can make a post to do like end point the unlike password metal is going to be very similar. 06:54.030 --> 06:58.950 Of course yeah we can set user like dance for two forms. 06:59.080 --> 07:03.500 Yeah we can remove it like the endpoint is exactly the same. 07:03.510 --> 07:06.470 What changes is the age DPP method. 07:06.480 --> 07:10.400 So before testing the new functionality we can add. 07:11.010 --> 07:12.180 The likes counter. 07:12.720 --> 07:17.390 I can just use different kinds of parentheses like so. 07:17.910 --> 07:24.850 And yet inside I can interpolate the value of flags counter like so. 07:25.350 --> 07:26.860 So there's no test. 07:26.900 --> 07:31.440 However if he works first of all we see that we have an error here. 07:31.490 --> 07:33.130 So let's check it out. 07:33.320 --> 07:39.040 Property to like is not defined like your stuff because we add not defined it. 07:39.140 --> 07:40.900 So let's refresh the page. 07:41.030 --> 07:48.380 And now everything works as you see so let's press like and dislike is added If we refresh the page 07:48.530 --> 07:50.030 it is still here. 07:50.060 --> 07:51.250 Perfect. 07:51.290 --> 07:58.790 So let's look out and the idea let's just create a new account so that we can basically test everything. 07:58.980 --> 08:09.560 Simply test account test at account that's com that set password and now we adding. 08:09.570 --> 08:11.350 So let's open up the question. 08:11.370 --> 08:15.440 We see that we now know that relied on large on each of the letters. 08:15.570 --> 08:21.450 And most importantly as you see the like button on the first question tells us that this answer has 08:21.450 --> 08:27.820 already been lied to once and if we now press like one more time the counter goes up to two. 08:27.990 --> 08:28.770 Awesome. 08:28.980 --> 08:33.560 And if we add the brand new question log Dean it is test account. 08:34.770 --> 08:36.030 Let's see what happens. 08:36.030 --> 08:40.300 Submit your answer and in fact we don't see a like button. 08:40.320 --> 08:47.400 Of course we see the edit and delete buttons but as you see there is something odd going on. 08:47.400 --> 08:55.680 It's like if the flags counter is gone well let's inspect question we see that we have three and swear 08:55.680 --> 08:56.460 components. 08:56.520 --> 09:06.900 And if we check a key we have 0 1 2 because in the question component we are passing the index of the 09:06.900 --> 09:12.750 answer we have surveyed for every single question as a value for the key prop. 09:12.840 --> 09:22.700 And so if we go back to Chrome and inspect these first and sort a component we keep zero in these. 09:23.070 --> 09:29.820 We see that the likes counter for these is set to two even though this is in fact the nuance where just 09:29.820 --> 09:32.080 added by the test account user. 09:32.160 --> 09:39.270 And this is one of the reasons why setting a proper value for the key prob is so important because the 09:39.270 --> 09:47.130 key prop is very important for a user Yes to keep track of all the nodes in the application as a matter 09:47.130 --> 09:47.580 of fact. 09:47.610 --> 09:55.110 If I now delete these elsewhere we can see that they like counter up here once again in the proper answer 09:55.140 --> 09:56.340 for instance. 09:56.400 --> 10:04.410 So to fix this problem let's go back to question that view and yeah let's just delete all of these and 10:04.410 --> 10:06.470 so forth and swear in and swear. 10:06.540 --> 10:15.990 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 10:15.990 --> 10:19.190 see that the values pass to the key props have changed. 10:19.320 --> 10:28.110 And if we now add a new answer submit your answer for everything now works perfectly very well. 10:28.110 --> 10:34.020 Developers are a single page application is basically completed most of the features have been added 10:34.050 --> 10:36.570 and everything works perfectly. 10:36.570 --> 10:41.940 There is however one very last feature that that application really needs before compiling the production 10:41.940 --> 10:45.510 builder and we are going to implement that feature in the next lesson.