In this lesson we seldom implemented the edit and did delete bottles for the questions as well.
Okay so yeah we are invisible to your code as you can see I am currently inside the question does it
view component in the first thing that we want to implement is the ability for our component to understand
if the user is making the request.
He's also the author of the question itself.
So in a similar way to what we've done yet in that answer where a component we can create a computed
property so I'm just going to copy this code and I'm going to pay state your below like so.
But of course this time the name is going to be is questioned our thought and is going to tell us if
the user who was making the request.
It's also the questions author and this comment also can be changed like so as you can see the question
component is getting really big.
We have more than one hundred and eighty lines of code and so one feeling that we can do to keep everything
is maintainable and readable as possible is to create a new component in the components folder and we
can call it question actions.
That view and yet inside of this component we can add for example the aged email code and the javascript
logic that we need to provide the new functionalities 20 users.
So first of all inside of the template tag I'm going to define a new diva.
Let's also add the classical question actions and it inside I can actually copy most of the code used
in the answer component appear.
I'm just going to copy this code.
Let's indent everything properly like so let's so let's see how we can now implement the deed and added
functionalities here inside of this component.
We can create a delete question method that we make a DELETE request to the rest api and then afterwards
is going to redirect us to the on page using router not Bush and the edit button is going to redirect
us to the question added our component.
If you are going to update with all the code needed to implement the added functionality so let's start
by creating these delete question method.
Yeah we need a name.
We can just call the component question actions and of course the component we left to receive as lag
is a prop so that we can make a proper DELETE request to the rest api so that the same prob can then
be passed as a parameter to the question Ed component so props up SLUG IT type string required.
True.
Now we can define
methods and so let's implement the delete method which is going to be very similar to the one we've
defined here in the question component and first of all of course we need to import the API service
function like so we can use async await once again.
So async delete question let's and bind equals API.
Questions don't have sign D that is lagging.
The end we can use try 0 8 API.
Service on these and bind.
The method is deleted.
And then yeah we can simply do this dot the left sign router dot pusher and yet we can simply pass new
on page there.
Let's also add catch Ed console.
Not log error.
So now that the method is completed we can pass it here.
Like so now we can finally include this component inside of question.
So appear instead of template right after question dot content.
I'm going to include question actions which is self closing and here the effect is question or thought.
We've slug equals slug or well.
To keep everything as consistent as possible we can make this question that slug now before testing
if that newly inserted component works.
Of course we need to import it so air
let's just copy the name question.
Actions from components question actions and you also need to include it.
So let's go back to question actions a second and let us comment this out and if we now go back to Chrome
here it is as you can see we know we have a delete button.
Perfect.
So let's test it on a question such as what is a black hole.
So as soon as I press delete.
We are already reacted to the on page and as you can see the question is gone.
If implementing the delete button was pretty straight forward implemented the edit button is a bit trickier.
And that's because as soon as the edit Barton is pressed we want to be redirected to the question to
our component and of course to edit to properly edit the question we need to identify it.
Therefore we need to pass as lag to the question Ed component.
However considering that we are already using these components to create new questions.
Yeah.
The question Ed path is not equipped to receive as loud as a parameter and so even though we can do
something like this and then props set to true.
If you're using the component to create a new question there is no slug that we can pass.
Luckily for us view router is a really awesome package and it allows us to define parameters like we've
seen so far but it also allows us to define optional parameters using a question mark setting up the
bars like so we have to leave viewed through third date.
We might send as lag parameter and in cases like parameter is passed the value as then to be passed
as a prop to the component.
So yeah.
Now we can change the code here.
The name for the path is question Ed. And there is a lag parameter.
We want to pass this luck.
So let's comment decode.
And if you now go back to the blouse that editors.
So back to his vest and your code.
As you can see I'm currently inside the question Ed component and first of all I'm going to define props
and instead of props like type Stringer.
But this time required is false.
Same as we've done in the answer to our editor component.
We can use before a route to enter to get all the data needed in case we are editing a question.
So yeah.
At the end or Well in fact before created the sink before roots enter
and do before a root and that accepts three parameters two from and next.
And now here we can check if two dot patterns that larger is not undefined.
And in that case we want to use APAC at least to get the questions data from the rest api.
So let and find equals API.
Questions.
The left sign to dot parents that is like the yeah let data equals a weight API.
So it is on these endpoint and now we can return it next to plus indeed adult content as a value for
the question body property.
So we end up using an audio function and we are simply VM dot question body equals data not content
otherwise.
And so simply return next if no slug has been passed.
Okay.
Let's see how this works.
Let's go back to Chrome and yeah let's open up another question such as what is the mass of Earth.
Let's click on edit and edit this.
The content is being passed.
Perfect.
Now we can change the way the all submit method is implemented by check in once again.
If this lag has been passed or not.
So if these dot slug it is undefined in this case we can simply update our variables.
So end point plus equals these not.
And the method.
In that case is going to be put this however is to be not undefined of course.
So if there like prop has been passed therefore it is not undefined.
In that case we update the variables.
So let's finally go back to Chrome.
Let's open up a question.
Edit and yeah for example we can add one more question mark publish and you see that a question has
been updated.
If we now go back to the home page it is of course still here updated.
However we can still lad of course as many questions as we want such as for example who was Napoleon
publish and a question of course is here.