It's now time to finally implement the ad answer the functionality to a single page application so that
users can finally answer all the questions that have been asked.
We need to customize the question component in order to handle three possible scenarios.
First of all like in this case the user as not answered the question.
In this case we want to show the users a green advance red button in the second scenario.
The user has already pressed the green button.
Therefore we need to show the user ID form so that the new answerer can be created and submitted to
the application.
And then in the third scenario the user has already answered the question and therefore look it up in
some quarter.
We want to show the user a sentence which tells the user that he has already answered the question.
So here we are in with the rest of your code and as you can see in the file that I've opened is the
question dot view component because as we said this is the components that we need to customize.
Considering that as we said we are going to show our users a form so that they can create and submit
new answers here in data.
First of all let's define new answer body as normal.
And those so error is normal.
And this of course will improve the user experience.
Considering that we are not allowing them to submit empty answers and then let us also define 2 boolean
flags user as password that we can initialize as false and also show form we can now use these two boolean
flag search to change the HDMI content shown based on the different circumstances we've discussed earlier
the two boolean flags are initialized as false because that's the most plausible scenario for both of
them we want to show the as reform only after the answer button has been pressed and more importantly
if an application where to go life it would be very unlikely for the typical user to events where the
vast majority of the questions.
Let's also keep in mind that the most appropriate boolean value for use it as password can be obtained
directly while communicating we want rest api.
And that's because as you probably remember up for every single question we get these user as answers
field so we know that they're currently logged in user admin as not ask where these for questions but
it as answered this fifth question.
And it's because here we have true.
So let's add a line of code here in the get questions data method Yeah we can simply set this dot user
as in straight equals data not user as That's right.
Technically yes we could derive these data from inside the questions object.
However I believe that having a dedicated field in that data function is in this case a much cleaner
option.
So let's now finally customize the age team and code here.
I'm going to add in other H.R. tag and in between.
Let's now create 3 div elements.
So 1 2 3.
Yeah we can add V if the user is answered in the second one.
V as if show former and in the third one simply means.
So if the user is answered we simply want to show a paragraph.
Let's also maybe add this SS class to answer.
I did and yeah we can add you've written an answer.
Let's also create these CSF classes.
Yeah below and we can add funds weight balls and color green then you are in the Third Division.
Let's add a bottom so bottom as we said a green button.
So class up button.
Button a Sam button successor and one clicker we want to set show format for true.
And then as a value it's about time we can simply add elsewhere.
The question.
So let's go back to Chrome.
Just going to delete 1 and 2 let's make another get request here.
And so yeah of course we see the green paragraph because we have answered this question.
So let's go to view Dave to set up a question.
We see that the user as answered is a set to true and let us know check the other question.
So let's refresher let's open up a few dev tools so Hopper question and yet of course we have a show
form of force and use it as an squared to force.
Therefore we have the green button and as soon as we press it we see that the button disappears and
show forum is set to true let us know what the forum itself yeah.
In the second diva so form yeah we can set the classic form Kaja or rather simply card just to give
it a nice shape.
And more importantly so that even inside we can define a diva of class card.
Heather we have some padding but x 3 in the air in the other.
Let's not answer the question then air in other Diva this the same class cars block come and eat inside
we can place the text area needed.
We don't need to name I.D. or columns and we can set rows to five.
So most importantly we need V more than on new and square body.
Then we can add the some form control place holder and we can add.
Answer the question.
Once again like so.
And then yeah we can add another diva.
This time we class cards for that part in x 3 and the inside.
We can simply define about ton of.
Sub meta yet another green button social class that John Button S.M. button success idea is a value
we can add.
Submit your answer then outside of the forum.
We can add a paragraph with any editor message so we're on the eve of class.
And that bit of margin so let's define these CSX class so you are below and we can make it very similar
to the answer.
Did class by design the color has to be right.
So let's go back to Kron.
Let's go back to home and let's open up another question.
And if we now press asked the question how do we see the answer to the question form.
Actually we can change the place holder from answer the question to the application more.
Don't share your knowledge.
So let's go back here you are in place holder share your knowledge let's save and going back to Chrome
we see of course that it is updated much better of course what happens now if you try to submit the
form is of course that the form tries to send its content and a page refreshes.
So as always we now needed to prevent this kind of behavior but we need to create an own submit method.
So going back to these what is your code here in the form let's add on some meta dot prevent equals
on submit to that we now need to create.
So you're into methods
first of all let's check if these dots knew.
Answer your body.
Otherwise so these not air equals.
You can't send an empty answer.
However if the user is in fact answered the appropriate answer.
Let's define an endpoint.
And defined as API questions and in fact we can use the back to the API.
Questions are saying these not so long ago and an answer which is different you see from this end point.
So let's use API service to make it pause to request on D and point and we need to pass the body of
that post request up.
So as body in the field this time we can pass START you ask where her body then we are going to get
back the data of these new and sweeping instance so we can added to the beginning of the answer straight
with decent not answers not shifting.
And then of course we pass data again.
We are now dead.
The user is in fact answering the question.
We can set new ones to our body back to rule.
So these still new on this one body equals no love.
Then we can set show form and back to force these both short form for self and also we need to set these
dot user as an effort to true.
And considering that we are managing errors we can also check if d dot error in this case because that's
D dot error.
Back to normal.
So let's not try this new feature of our application.
We can't go back to the home page.
Oh well in fact we can just answer these questions okay.
So answer the question yes we have our form and yet I can add something like in my opinion that's python.
Let's also examine the question component.
Sure for them is true.
Use it as answer is false and the array is empty.
So as soon as I press this submit your answer button we see that the form disappears.
Now we have you've written an answer.
We have the answer right here below.
The answer is the array of course now contains an object.
I saw the bodies back to normal.
Short form is false and use it as answered is true.
And if we now go back to home and we see it now Wandsworth is set to 1.
Going back to the component we can make in there and get gets request still.
The answer is here because it has in fact been submitted to address backend.
Let's also try to submit an empty question.
Let's see what happens.
And of course in this case we get an error note that users can finally create new answers.
It's time to implement a new feature.
I'm talking about a new button here in the question component.
Then load more answers button.