Let us now see how to implement all the code needed to make David Barton work.
As you might expect fees that are going to be different from what we've done.
We have the delete button.
So let's see what the difference.
Release.
First of all we need to create a new component inside of the views folder.
We could call this component elsewhere.
Ed. note for you.
So clicking on the edit button users will be redirected to the answer editor component the component
is going to be similar to the question Ed component.
So let's just copy the template HDMI code but of course we need to change it a little bit.
So first of all this can be edited your answer.
We don't need a placeholder and that's because of course this text area is going to be populated with
the content of the answer that we're editing.
This can be publish your answer and this paragraph is fine.
Let us know define the script tag.
So first of all name after Ed..
And then of course we are going to need to define some props right.
But let's think for a second about what we want to pass it as a prop.
Now considering that most of the times we are going to redirect users to this component as soon as they
press the edit button you might be tempted to bust the whole hands for instance as a you URL parameter
using view router to then pass the instance to the component that would be similar to what we've done
here in the home component where we've passed the questions logger as a slug parameter to Router link.
However passing a whole object as you URL parameter is not a good idea.
And that's because you always want to try to keep your components as independent as possible but in
a unique field such as a slug or an I.D. to the component is a great idea because the component.
Dan can retrieve all the data he needs MYSELF FROM THE REST API.
So yeah let's define idea of type.
No we've required through now that we have data we can communicate with their API set of his functions
so let's imported and we can retrieve all the data for these specific instance.
Now same as we did here in the question a lot of your component.
We could create a method such as the get questioned data method and then use created to call the method
as soon as the component is created.
However there is a better way to do so especially in a context like the one we are dealing with now
in this new way.
Let's say of doing things involves using a spatial functionality provided by your router that allows
us to execute code before entering the route.
So considering that these a single page application that automatically 18 is part of a course that was
created to teach you how to use a view.
Yes and Django let's see how to use these new functionality.
So yeah let's define a sinker before Ruth enter which accepts three parameters two from and the next
to represent the target the root object being navigated to trauma represents the current through to
being navigated away from the Y next.
That is a function that we used to move to the next book in the pipeline.
So yeah let's define an endpoint that we can use to get the details of the answer.
So API sweats and a to access idea we can use the last name in this case because we're using the back
to excel.
But most importantly to dot dot dot in this case ideas and end here.
You also need one more that's less forward.
I'm also noticing that for whatever reason this page is being indented using force bases.
So I'm going to just set everything back to to save and then format document.
So back to our function.
I can now define data using a weight to call the API set of this function on this end point.
And this of course is going to be a get to request because we want to get the details of the answer.
And now that we can access their data object which is the answer where did we want to add it.
Considering that this function is executed before entering the router we need to see how to actually
pass the data that we need to the component itself in this election we're actually going to see two
different ways to do so because this would allow us to discuss different concepts that you might then
find useful when developing your own applications.
And so now the same way that we've been using I.D. from two dot bottoms we can pass both the body of
the answer that we're editing and also the slug of the question to which these are specific and switch
instance that we've added editing has been assigned and in fact to get these questions lag we need to
change the serialize their class so C realize that it's that by eating elsewhere sterilizer let's define
question as lager using a serialize the method field so you're going to define a new method.
Def get questions like self and instance and yet I'm just going to return it is just that question.
That's luck.
So now we're going back to the component we can first of all define two more props so previews and sweat.
Which is the content of the answer had before been edited.
Type stronger and acquired through and then also question longer which is a stringer we've required
it through.
Just like we use elsewhere.
Now digital component is expecting two more props so we can finally bust him.
So to that firearms dot previews I swear.
Equals data that body and two dot bottoms dot question lag equals data dot question on this Good luck.
And then finally we can return next.
Now that we have the previews and swear content passed as a prop we can define data India returner and
we can return elsewhere body which we can initialize as these data previews and swear and then let's
also add an error field initialized as normal.
Finally we can define the and submit my thought.
So you're methods on 70 to
and Europe before these dot sort body because as always we want to check that users are not trying to
submit an empty answer.
So D dot error in that case and we can add you can to submit an empty lots where otherwise if a proper
answer has been added Let and find equals McTeague so API ask first and then say it is not Heidi let's
now use API service on this end point portal because we had to update in any instance and then let's
also pass the contents that we want to send.
So body the body of the answer they start that's the body.
Yeah we can now use DNA and we can just use it to redirect the user to the question where it is assumed
it was added using questions like.
So these dot dollar sign router do the pusher India name and the name is question so a name question
the name of the root the name of the path and the impotence slug is the questions luck.
So now that the component is finished.
Let's open up a root there.
Yes once again and let's imported so this is going to be asked where ADR and we can actually move it
up here and now we can define yeah to be low a new path I'm going to copy this code like so.
So let's delete this comment.
So the path is going to be unswayed.
And we have to pass the I.D. parameter.
We can call the path elsewhere.
And you thought a component is of course the answer editor component.
Remember as always probs true.
Now finally we can move back to the ask where a lot of your component and yeah let's define a router
Linker to proper name is password editor like so and then we also need to pass the I.D. So Pam's idea.
That's where dot I.D. So you had below we can now define plus button button as Sam button outlined and
well in fact the class was her idea below.
So I'm going to move these IPR and delete this button all altogether so that I can do edits one and
two.
So we've written a lot of code in this one.
Let's recap what's going on.
As soon as the added button is pressed up we're using a router link to redirect the user to there and
swear Ed bath and this path of course is going to use the sweat Ed component.
Considering that yeah we are defining props through this idea.
The and swear I.D. that we're passing as a parameter is past the after the component as a prop here
before entering the root itself.
The before roots enter function is called and these function uses that same I.D. passed as a parameter
to define an endpoint to which a get request is made and is get request return inside the data of the
answer that we're trying to edit.
We've danced with data we can pass through more parameters the body of the answer that we're trying
to edit in the questions larger and we can't pass them and they are going to be used as values for these
two props.
So to the previous sounds when a probe is assigned the value of the answer that's been added in into
questions like is passed does lager of the question to which this answer is assigned.
There really is in this probe as a value for the answer to our body property that is connected.
E added to the text area we have a v debt than active inside of this form.
And as soon as this form is submitted this new content these new answer were basically is the center
as a body for a dispute a requester telling the rest api that we want to update D as we instance and
then we are finally using the questions larger as a parameter to redirect the user to the same question
What did they ask what it was.
So we've written a lot of code but the great news is that this component is basically the most advanced
of the whole application.
So if you understood everything so far.
Great job.
Otherwise no worries.
Everything is going to be clear I promise.
Just take your time to understand what's going on.
There are surely multiple ways to create such a component.
For example one of these might involve using a stage manager like you AXA.
And as I said at the beginning of the video by the end of the lesson we'll also see another way to do
things.
However again this is a real world educational project so it's important to understand all of these
steps so that you can then use them of course for Europe projects for your single page applications.
So I'm now going to restart the Jangles development server because of the fact that we've changed this
utilized class so and also yet I see that we have an error so let's move up it is there and he says
questions lag is not defined yet in a router.
Don't push it because this is in fact these dot questions lag.
We now see that we have these warnings which are in fact just messages you see that are sent by the
leaned her head that we can just ignore for now let's now move back to Chrome and the we can for example
refresh the speech.
So let's click on edit and let's see what happens.
Okay.
So super cool.
We are redirected to this new component.
You see the root and swear nine.
Let us inspect this component.
We have the props we have previews elsewhere and we have questions lag.
Very good.
And so first of all let's write to delete all the content and publish the answer.
We get an error of course.
Yeah lets out.
Change the code python and JavaScript are awesome.
Let's click on publish your password and we are redirected yet to the same question.
What I said was perfect.
Let's also make a get request for the same page for the same content of the same component and everything
is still here.
Because of course the content has been updated to the database level.
Very good.
Now that I've shown you how you can use it before it roots enter to execute code before entering the
root and you can pass further parameters to finish the lesson.
Let's see how we can make the component a bit more elegant so are in the data function.
I'm just going to initialize unsought body as normal then I'm going to take questions like from the
props.
And he said I'm going to define it as property of data.
So questions lag normal.
Hey I'm just going to remove these two props.
There is in fact an easier way that we can access the component from within before a root enter.
What if I tell you that we can access the properties of data from within before roots enter.
So yet inside the AMA using a narrow function.
And we've mentioned that VM is a bit like app we use it to refer to a few instance.
So in this case D component is created and so you're inside we can define v m dot elsewhere body as
being data body and then VM a dot question this logo has simply been data not questions like So let's
come in these two lines for now because you are not going to need them anymore.
We do need to pass values as parameters and then having them passed as props we can just use them right
away as values for the properties defined in data.
So if we now go back to Chrome let's make a get request for the page and look here.
This is the console.
OK so I'm opening this question now.
Edit India you see is the content of the answer.
Perfect.
Let's also make one more checker using view.
So question answer component and so you see that at the moment of course we have this answer object.
Okay.
So.
Edit And of course redirected to answer editor and yet we have both of by the end questions like perfect.