Now that we can both see a list of questions.
Yeah.
Indian component and the details of the single instances.
It's finally time to give our users the ability to create new questions before starting to write their
code for this new component.
Let's fix two things.
First of all we need to change the order of the questions on the backend of our project.
We want a new questions to appear first.
And as you can see that's not the case at the moment.
And let's also change the content of the bottom from ad question to a more Stack Overflow like ask a
question.
So you are invisible in your code.
First of all let's open up enough bar to view and let's change this to ask a question and then let's
open up questions API views and he had a below in the question you said.
Plus let us simply add his ORDER BY clause
let's save and restart Jangles development server just to be sure that everything works as intended.
So let's go back to Chrome and let's ask for the questions one more time.
Perfected the order is now a much more appropriate to ask a question button looks much better and we
can also increase the page size at the moment.
We only have to question instances but soon we will have more.
So let's open up Question Time settings.
Goodbye and yeah let's increase these to let's say for instance is and by the way later on we're going
to implement a load more button here in the home page so that users can read as many questions as they
want to.
Let's say I created a new component to create new questions inside of the views folder can just call
the question editor.
View question editor is an appropriate name because we are going to use the component also to update
questions later on.
For now let's just define template script.
There is no need to define any style tag at the moment.
So first of all name for this component.
Question editor and we can also define data right away.
So return first of all question but it will also error ever.
This component is going to look very similar to the comment component created in the view.
J Yes section of the course.
Let us also add user created lifecycle lookup so that we can define document that title as editor.
Question time let's not write a bit of HMO code for a component.
So first of all diva class container with a bit of margin topper.
And yet inside.
Let's define an h1 tag.
Ask a question you can use a bit of margin here as well.
BUT THIS TIME magazine bottom and that's because you had to be low.
We want to define a form we want to define this form that we can use to create new questions inside
of this form.
We can define a text area we don't need name I.D. or columns there's justifying rows as three and well
here.
First of all we need to add depth V Model detective because we want to bind question body to our steadier
than considering data to using Bootstrap.
We can add classic form control and we can also find a place holder with something like what do you
want to ask you then do we can add a line break the R and now we need the bottom of course we need this
matter to submit the form so type equals seventy two plus the bottom button success so and then as a
value we can simply add publish constituting data we might also need to show an error message we've
defined the error of probity ere below the form we can define a paragraph with class it was muted margin
top 2 and yet we can simply interpolate error and we can also add the effect error we want the data
over forum to be handled by a method that we can call on submit to and so yeah we can add on submitter
dot preventive because we want to prevent the default behavior of a forum that is meeting in Europe
equals on submit to that.
We now have to define of course.
So here
methods
and you are before sending any data to the rest api.
We want to perform it two checks.
First of all we need to be sure that the user is actually created in your question meaning that the
text area is not empty.
And then we also need to check that the question has been answered is no longer than two hundred and
forty characters.
That's the limit.
That is you remember we've enforced year on the models level.
So first of all if not these dot question body and as an error message we can add something like you
can to send an empty question.
Then let's check for the questions Langton so.
Else if these dot question buddy dots linked is greater than two hundred and forty characters then let's
define another error message.
These third error equals and sure this field as no more than two hundred and forty characters.
And now finally we can add some letters and find equals API questions and actually let's also add the
semicolons here and yet then let the method equals post and we can also use API service to send this
data to the endpoint data to create a new questioning distance.
So let's import API service
and your API service on this and bind using the post method.
And at this time you also need to pass the body of the question itself.
So the content is these dot question body after submitting a new question we want to be redirected to
the question component and viewer route that provides us a very convenient way to do so.
So first of all we're going to get some data from these endpoint.
So question data and remember that among all the data serialized for each question.
We also have it's a lag.
And so we get past this lag as a parameter.
The same way we've passed it here.
I'm just going to copy this line of code but instead of routinely encode this time we're going to use
these dot dollar sign the router that pusher.
And then here it can now define simply name parents let's delete this two so we have a name which is
the name of the path logger which is to be question data that's logger so that as soon as we get the
data back we are going to be redirected using your router to the question component that will show us
the data of these new question based on it's like let's all sorted out the code a little Beta before
we can test this code.
We need to create a new proper path for the question Ed component in the router and go three yes file.
So first of all let us important component question Ed question Ed..
That view and yet let's define an other path that we can set as Lesh ask we can call it the question
Ed..
And he's going to use the question Ed component of course we can now was open up the Nevada component
because he added We can now change the path to the question Ed. So let's finally test this new feature
of our single page application.
Ask a question.
Here is the form.
So let's ask a question.
What is the mass of Earth.
Let's publish the question.
And yet we are regulated automatically to the question component.
We can see all the relevant details and also the title of the page that's changed accordingly.
And if we now go back to home we also see these new question.
Let's also ask another one.
You see that the title of the page changes to Ed question time.
What is a black hole.
Publish and everything works as expected.
Now that we have the ability to create new questions in the next lesson we will see how to implement
a lot more about on page.