In this lesson we'll see how to customize their application to provide a delete functionality for the
answers to the creators of the single instances.
Before we started writing the future yes code it's important to remember that we are enforcing a permission
check at the server level and this is a very important thing to keep in mind because the permission
checks that we are going to make at the future yes level are going to be very useful for the user experience.
Overall however it's very important to enforce this kind of checks at the server level so that even
if a bad actor is able to change the code of application because after all it's javascript code executed
in the browser.
The core of the application itself and the rest api is still secure.
That's very important again.
Keep it in mind.
With that said we can close the views that by file and let us move to the app door to view component.
By the time our application is completed users will be able to delete or edit the answer which they've
created or to live like on defense where is created by other users so in the elsewhere component we
are going to either show with the Like button or the edit delete buttons in order to evaluate which
buttons to show for every single and switching instance we are going to check the answer or thought
and we're going to compare it to the user was making the request and to get the user name of the user
it was making the request we were going to make a get requested to the user end point in our arrest
API and we're going to save the user name to local storage which as you probably already know it's basically
a storage area that every page in the browser s and we're going to use a local storage to save his value
instead of let's say appropriate in saved or the data model so that other components such as question
can access the value easily.
So now it's up to you you're going to define methods and instead of methods let's define a set user
info method we can use in a synchronous function instead of using promises which by the way are in my
humble opinion perfectly fine and that's why we've been using them so far but to also explain something
new maybe to those of you who do not already know them.
We can now define a variable using a constant and then we can use a weight on the API set of his function
that in fact we need to import.
So first of all let's import API service and so as I said to begin he was now await with API service
passing it to the user endpoints so API as an abuser.
And so what the async await combo dazzle is that it allows us basically to wait until we get the proper
data that we need without having to use then to wait for the problem is to be resolved.
And so yeah we can define another variable without having to use then as we've done so far.
So basically now that we have data which contains the results provided by the rest api we can define
another variable request user and we can access the user name of the user who's making the request by
getting the user name and value from data.
Now that we have the user name we can save it to local storage and we can do that.
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
value.
So the key user name and the value request user.
And just to be explicit for now we can also log the values to console.
So data and also request user.
And now that we have our method we can use a lifecycle lookup created to actually call it is not set.
Use it in full and if we now go back to crawl let's open up the console.
You see that we get this object which contains user user name and then user name itself admin and same
thing happens from the first time of course we call the application.
So basically from the first time as soon as we log in.
They use their user name is saved in local storage.
Let's now remove these two console logs.
And what we can do instead is to move to the question Does of your component India in data.
Let's define request user as no love.
Yeah let's define another method set.
Request user which is going to access local storage to set the proper value for the property.
So here we can simply write these dot request.
User equals window dot lock and storage dot get item with the key user name and we can add the D method
to the methods that are called Yeah using created.
So these dot set request user.
The reason why we've defined the set request user method yet in the question component is so that now
we can pass that request users to anger as a prop today as one component.
So first of all Indians for a component let's define that is a prop so request user
type stranger required through and how we get past it.
As we said is a prop so air quest user equals request use.
Now inside of the asked for a component we can define a computed property so computed
isn't and Square also the data we get simply return a decent not asked we're not author equals these
not request user and in fact here we don't need the parenthesis but colon.
And so now we have the easy answer off our property.
We can define a diva.
V.
If he's answered author and yeah we can now add two bottles and added button that we're going to implement
in the next lesson and delete button.
Now considering that we are rendering the abstract a component using debt V for active from inside of
the question component which in fact is the component where debt and well as sadly is defined.
Considering d e adding the answer component we can define it trigger dilettante to a method which will
emit a signal that will be received by the question component where we're going to define a delete answer
method that will remove dead and sweet e answer from Debbie and then we'll also make a deleted request
to the rest api so let's define this method below we can use and seeing a way once again so a sync delete
on Twitter which accepts enhanced readings this is a parameter India let and buoyant we can in fact
copy these end point but of course this time is going to be very different so API answers India Astrid
dot idea where the answer is they want passed as a parameter and you're below we can use try except
so try 0 8 API service on D and find request of type deleted and then below we can use these dot dollar
sign deleted which is a feature provided by Abuja yes so that's why we use the ISA that allows us to
remove an element from another array.
So in this case the is d dot and Swiss and the R we can use these dot passwords dot index for the dance
for the past as a parameter and any idea we also need to set.
Use it as elsewhere before it's considered in there try using try to be use catch up error also let's
log Edward now that we have our daily transfer method appear in the template we can place the component
in a state where it's waiting for a delete and swear event.
It is going to be used to call delete answer.
So now in US where a component is defined as method so my thoughts you get delete and spread.
And this method is going to meet these signals so a decent dot dollar sign hit me to delete password.
Everyone who passes a parameter is thought as well.
So now appear.
Let's define this style for this matter.
And most importantly let's define on clique.
As calling.
Did you get a delete dancer and in this style which means defining the class as bottom button Sam button
outline legit
and yet in fact we can do something similar for the edit about done.
So this is going to be edited without any click and the class can be of an outline secondary with a
bit of margin as well.
Let's now move to Chrome and let's check out the new functionality works so let's look for a question
that we've answered such as this one and you'll see that now we have two buttons.
Edit and delete and that's because we are currently logged in as admin so going to inspect the application
with if you would have to us the question component.
So you see that request.
User is admin and notice also all the other properties we have to show form falls.
Use it as who of the true of course.
EDIT If he's legit and we also have an object in dance for a Saturday so if we now press the edit button
nothing happens of course but as soon as we press the delete button you'll see that everything changes.
The answer to Saturday is no empty show form is false but also use it as answer is false.
So we can now add another answer.
So python.
Submit your answer and edit is once again.
And if we now refresh the page yes it is still here of course because you are communicating with the
rest api.
You also see that we have no buttons for answers that we have not read them.
And later on we'll see how to implement a like button for the other answers just to be 100 percent sure
that everything is working as it should.
Let's open up and your question.
Let's add it elsewhere and yet it is.
So now let's move to the browser API so as Lesh API is less questions and let's check the details of
these specific questions.
So questions what is a black hole.
And also let's check its answers.
The reason we are of course logged in as admin and therefore you are.
We also have user events where the true and sort of account 1 and this is the answer.
Again tester.
So let's delete.
Let's make another request.
So what is it his answer to the false answer discount.
Zero.
Now you raise empty now that the delete button is working perfectly.
It's time to implement the added functionality for the second button.