WEBVTT 00:02.440 --> 00:07.780 In this lesson we'll see how to customize their application to provide a delete functionality for the 00:07.780 --> 00:11.320 answers to the creators of the single instances. 00:11.620 --> 00:16.690 Before we started writing the future yes code it's important to remember that we are enforcing a permission 00:16.690 --> 00:22.630 check at the server level and this is a very important thing to keep in mind because the permission 00:22.630 --> 00:29.440 checks that we are going to make at the future yes level are going to be very useful for the user experience. 00:29.500 --> 00:36.340 Overall however it's very important to enforce this kind of checks at the server level so that even 00:36.340 --> 00:43.030 if a bad actor is able to change the code of application because after all it's javascript code executed 00:43.060 --> 00:44.170 in the browser. 00:44.170 --> 00:49.350 The core of the application itself and the rest api is still secure. 00:49.360 --> 00:51.000 That's very important again. 00:51.020 --> 00:52.410 Keep it in mind. 00:52.440 --> 00:58.690 With that said we can close the views that by file and let us move to the app door to view component. 00:58.690 --> 01:04.650 By the time our application is completed users will be able to delete or edit the answer which they've 01:04.660 --> 01:11.850 created or to live like on defense where is created by other users so in the elsewhere component we 01:11.850 --> 01:18.010 are going to either show with the Like button or the edit delete buttons in order to evaluate which 01:18.010 --> 01:23.860 buttons to show for every single and switching instance we are going to check the answer or thought 01:24.010 --> 01:30.230 and we're going to compare it to the user was making the request and to get the user name of the user 01:30.230 --> 01:35.620 it was making the request we were going to make a get requested to the user end point in our arrest 01:35.680 --> 01:41.800 API and we're going to save the user name to local storage which as you probably already know it's basically 01:41.800 --> 01:47.800 a storage area that every page in the browser s and we're going to use a local storage to save his value 01:47.830 --> 01:53.980 instead of let's say appropriate in saved or the data model so that other components such as question 01:54.070 --> 01:56.790 can access the value easily. 01:56.890 --> 02:07.210 So now it's up to you you're going to define methods and instead of methods let's define a set user 02:07.900 --> 02:15.880 info method we can use in a synchronous function instead of using promises which by the way are in my 02:15.880 --> 02:21.880 humble opinion perfectly fine and that's why we've been using them so far but to also explain something 02:21.880 --> 02:25.180 new maybe to those of you who do not already know them. 02:25.180 --> 02:34.540 We can now define a variable using a constant and then we can use a weight on the API set of his function 02:34.540 --> 02:37.830 that in fact we need to import. 02:37.950 --> 02:47.130 So first of all let's import API service and so as I said to begin he was now await with API service 02:48.060 --> 02:52.410 passing it to the user endpoints so API as an abuser. 02:52.410 --> 03:00.780 And so what the async await combo dazzle is that it allows us basically to wait until we get the proper 03:00.780 --> 03:05.690 data that we need without having to use then to wait for the problem is to be resolved. 03:05.700 --> 03:13.380 And so yeah we can define another variable without having to use then as we've done so far. 03:13.830 --> 03:21.030 So basically now that we have data which contains the results provided by the rest api we can define 03:21.150 --> 03:28.260 another variable request user and we can access the user name of the user who's making the request by 03:28.260 --> 03:34.470 getting the user name and value from data. 03:34.470 --> 03:39.000 Now that we have the user name we can save it to local storage and we can do that. 03:39.000 --> 03:50.580 Like so we know dot local stone age don't set item and you see first of all we pass a key and then add 03:50.580 --> 03:51.240 value. 03:51.240 --> 03:57.530 So the key user name and the value request user. 03:58.200 --> 04:03.070 And just to be explicit for now we can also log the values to console. 04:03.090 --> 04:09.280 So data and also request user. 04:09.640 --> 04:20.330 And now that we have our method we can use a lifecycle lookup created to actually call it is not set. 04:20.370 --> 04:26.830 Use it in full and if we now go back to crawl let's open up the console. 04:28.610 --> 04:37.230 You see that we get this object which contains user user name and then user name itself admin and same 04:37.230 --> 04:40.860 thing happens from the first time of course we call the application. 04:40.890 --> 04:44.170 So basically from the first time as soon as we log in. 04:44.460 --> 04:47.850 They use their user name is saved in local storage. 04:47.850 --> 04:52.480 Let's now remove these two console logs. 04:52.860 --> 04:59.170 And what we can do instead is to move to the question Does of your component India in data. 04:59.970 --> 05:05.330 Let's define request user as no love. 05:05.580 --> 05:08.130 Yeah let's define another method set. 05:08.270 --> 05:18.260 Request user which is going to access local storage to set the proper value for the property. 05:18.290 --> 05:23.210 So here we can simply write these dot request. 05:23.510 --> 05:35.030 User equals window dot lock and storage dot get item with the key user name and we can add the D method 05:35.240 --> 05:39.110 to the methods that are called Yeah using created. 05:39.120 --> 05:42.300 So these dot set request user. 05:42.560 --> 05:49.730 The reason why we've defined the set request user method yet in the question component is so that now 05:50.120 --> 05:57.050 we can pass that request users to anger as a prop today as one component. 05:57.350 --> 06:06.410 So first of all Indians for a component let's define that is a prop so request user 06:09.180 --> 06:16.140 type stranger required through and how we get past it. 06:16.140 --> 06:25.190 As we said is a prop so air quest user equals request use. 06:25.700 --> 06:31.970 Now inside of the asked for a component we can define a computed property so computed 06:34.810 --> 06:48.100 isn't and Square also the data we get simply return a decent not asked we're not author equals these 06:48.100 --> 06:55.410 not request user and in fact here we don't need the parenthesis but colon. 06:55.450 --> 06:58.960 And so now we have the easy answer off our property. 06:58.960 --> 07:01.570 We can define a diva. 07:01.650 --> 07:02.130 V. 07:02.770 --> 07:10.660 If he's answered author and yeah we can now add two bottles and added button that we're going to implement 07:10.720 --> 07:15.400 in the next lesson and delete button. 07:15.400 --> 07:22.330 Now considering that we are rendering the abstract a component using debt V for active from inside of 07:22.330 --> 07:28.880 the question component which in fact is the component where debt and well as sadly is defined. 07:28.900 --> 07:35.650 Considering d e adding the answer component we can define it trigger dilettante to a method which will 07:35.650 --> 07:42.670 emit a signal that will be received by the question component where we're going to define a delete answer 07:42.790 --> 07:49.390 method that will remove dead and sweet e answer from Debbie and then we'll also make a deleted request 07:49.450 --> 08:00.780 to the rest api so let's define this method below we can use and seeing a way once again so a sync delete 08:01.870 --> 08:11.670 on Twitter which accepts enhanced readings this is a parameter India let and buoyant we can in fact 08:11.690 --> 08:23.630 copy these end point but of course this time is going to be very different so API answers India Astrid 08:25.070 --> 08:33.380 dot idea where the answer is they want passed as a parameter and you're below we can use try except 08:33.410 --> 08:46.980 so try 0 8 API service on D and find request of type deleted and then below we can use these dot dollar 08:46.980 --> 08:53.940 sign deleted which is a feature provided by Abuja yes so that's why we use the ISA that allows us to 08:53.940 --> 08:55.660 remove an element from another array. 08:55.680 --> 09:05.040 So in this case the is d dot and Swiss and the R we can use these dot passwords dot index for the dance 09:05.060 --> 09:10.860 for the past as a parameter and any idea we also need to set. 09:10.890 --> 09:21.850 Use it as elsewhere before it's considered in there try using try to be use catch up error also let's 09:22.010 --> 09:31.080 log Edward now that we have our daily transfer method appear in the template we can place the component 09:31.110 --> 09:35.640 in a state where it's waiting for a delete and swear event. 09:35.790 --> 09:39.150 It is going to be used to call delete answer. 09:39.270 --> 09:53.060 So now in US where a component is defined as method so my thoughts you get delete and spread. 09:53.570 --> 10:03.470 And this method is going to meet these signals so a decent dot dollar sign hit me to delete password. 10:03.700 --> 10:07.550 Everyone who passes a parameter is thought as well. 10:07.570 --> 10:08.610 So now appear. 10:08.620 --> 10:11.880 Let's define this style for this matter. 10:12.190 --> 10:15.590 And most importantly let's define on clique. 10:16.610 --> 10:18.010 As calling. 10:18.010 --> 10:26.800 Did you get a delete dancer and in this style which means defining the class as bottom button Sam button 10:27.820 --> 10:30.030 outline legit 10:33.470 --> 10:36.650 and yet in fact we can do something similar for the edit about done. 10:36.720 --> 10:46.960 So this is going to be edited without any click and the class can be of an outline secondary with a 10:46.960 --> 10:49.930 bit of margin as well. 10:49.990 --> 10:55.540 Let's now move to Chrome and let's check out the new functionality works so let's look for a question 10:55.540 --> 10:59.660 that we've answered such as this one and you'll see that now we have two buttons. 10:59.680 --> 11:07.030 Edit and delete and that's because we are currently logged in as admin so going to inspect the application 11:08.140 --> 11:13.120 with if you would have to us the question component. 11:13.470 --> 11:14.920 So you see that request. 11:15.000 --> 11:20.500 User is admin and notice also all the other properties we have to show form falls. 11:20.540 --> 11:22.950 Use it as who of the true of course. 11:22.950 --> 11:28.940 EDIT If he's legit and we also have an object in dance for a Saturday so if we now press the edit button 11:29.340 --> 11:36.780 nothing happens of course but as soon as we press the delete button you'll see that everything changes. 11:36.780 --> 11:42.660 The answer to Saturday is no empty show form is false but also use it as answer is false. 11:42.690 --> 11:44.990 So we can now add another answer. 11:45.180 --> 11:47.640 So python. 11:47.640 --> 11:50.610 Submit your answer and edit is once again. 11:50.790 --> 11:57.210 And if we now refresh the page yes it is still here of course because you are communicating with the 11:57.210 --> 11:58.490 rest api. 11:58.620 --> 12:02.510 You also see that we have no buttons for answers that we have not read them. 12:02.610 --> 12:09.330 And later on we'll see how to implement a like button for the other answers just to be 100 percent sure 12:09.330 --> 12:11.840 that everything is working as it should. 12:11.880 --> 12:13.740 Let's open up and your question. 12:13.740 --> 12:17.350 Let's add it elsewhere and yet it is. 12:17.430 --> 12:26.370 So now let's move to the browser API so as Lesh API is less questions and let's check the details of 12:26.370 --> 12:29.870 these specific questions. 12:29.880 --> 12:34.490 So questions what is a black hole. 12:34.490 --> 12:37.150 And also let's check its answers. 12:37.150 --> 12:42.100 The reason we are of course logged in as admin and therefore you are. 12:42.200 --> 12:48.220 We also have user events where the true and sort of account 1 and this is the answer. 12:48.240 --> 12:49.170 Again tester. 12:49.730 --> 12:51.380 So let's delete. 12:51.970 --> 12:53.290 Let's make another request. 12:53.330 --> 12:57.540 So what is it his answer to the false answer discount. 12:57.600 --> 12:58.540 Zero. 12:58.730 --> 13:04.550 Now you raise empty now that the delete button is working perfectly. 13:04.550 --> 13:08.060 It's time to implement the added functionality for the second button.