WEBVTT 00:02.740 --> 00:05.970 Now that we can both see a list of questions. 00:05.990 --> 00:06.470 Yeah. 00:06.540 --> 00:10.270 Indian component and the details of the single instances. 00:10.270 --> 00:16.480 It's finally time to give our users the ability to create new questions before starting to write their 00:16.480 --> 00:18.130 code for this new component. 00:18.130 --> 00:19.710 Let's fix two things. 00:19.720 --> 00:25.300 First of all we need to change the order of the questions on the backend of our project. 00:25.300 --> 00:27.640 We want a new questions to appear first. 00:27.640 --> 00:30.740 And as you can see that's not the case at the moment. 00:30.760 --> 00:37.210 And let's also change the content of the bottom from ad question to a more Stack Overflow like ask a 00:37.210 --> 00:38.090 question. 00:38.110 --> 00:39.910 So you are invisible in your code. 00:39.910 --> 00:48.940 First of all let's open up enough bar to view and let's change this to ask a question and then let's 00:48.940 --> 00:56.510 open up questions API views and he had a below in the question you said. 00:56.510 --> 00:59.860 Plus let us simply add his ORDER BY clause 01:04.020 --> 01:12.090 let's save and restart Jangles development server just to be sure that everything works as intended. 01:12.660 --> 01:18.960 So let's go back to Chrome and let's ask for the questions one more time. 01:19.070 --> 01:25.170 Perfected the order is now a much more appropriate to ask a question button looks much better and we 01:25.170 --> 01:27.510 can also increase the page size at the moment. 01:27.510 --> 01:31.390 We only have to question instances but soon we will have more. 01:31.830 --> 01:35.380 So let's open up Question Time settings. 01:35.420 --> 01:44.740 Goodbye and yeah let's increase these to let's say for instance is and by the way later on we're going 01:44.740 --> 01:50.860 to implement a load more button here in the home page so that users can read as many questions as they 01:50.860 --> 01:51.990 want to. 01:52.010 --> 01:58.720 Let's say I created a new component to create new questions inside of the views folder can just call 01:58.720 --> 02:02.120 the question editor. 02:02.230 --> 02:07.330 View question editor is an appropriate name because we are going to use the component also to update 02:07.360 --> 02:08.910 questions later on. 02:08.910 --> 02:13.750 For now let's just define template script. 02:13.790 --> 02:16.930 There is no need to define any style tag at the moment. 02:17.350 --> 02:20.620 So first of all name for this component. 02:20.770 --> 02:26.210 Question editor and we can also define data right away. 02:26.320 --> 02:36.750 So return first of all question but it will also error ever. 02:37.120 --> 02:41.500 This component is going to look very similar to the comment component created in the view. 02:41.500 --> 02:43.510 J Yes section of the course. 02:43.690 --> 02:55.150 Let us also add user created lifecycle lookup so that we can define document that title as editor. 02:55.270 --> 03:02.910 Question time let's not write a bit of HMO code for a component. 03:03.160 --> 03:09.250 So first of all diva class container with a bit of margin topper. 03:09.940 --> 03:10.860 And yet inside. 03:10.870 --> 03:13.510 Let's define an h1 tag. 03:13.840 --> 03:18.190 Ask a question you can use a bit of margin here as well. 03:18.190 --> 03:25.790 BUT THIS TIME magazine bottom and that's because you had to be low. 03:25.800 --> 03:33.150 We want to define a form we want to define this form that we can use to create new questions inside 03:33.150 --> 03:33.870 of this form. 03:33.870 --> 03:44.070 We can define a text area we don't need name I.D. or columns there's justifying rows as three and well 03:44.160 --> 03:44.590 here. 03:44.610 --> 03:53.070 First of all we need to add depth V Model detective because we want to bind question body to our steadier 03:54.230 --> 03:56.250 than considering data to using Bootstrap. 03:56.250 --> 04:06.210 We can add classic form control and we can also find a place holder with something like what do you 04:06.210 --> 04:15.090 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 04:15.090 --> 04:26.490 matter to submit the form so type equals seventy two plus the bottom button success so and then as a 04:26.490 --> 04:35.180 value we can simply add publish constituting data we might also need to show an error message we've 04:35.180 --> 04:44.210 defined the error of probity ere below the form we can define a paragraph with class it was muted margin 04:44.210 --> 04:56.360 top 2 and yet we can simply interpolate error and we can also add the effect error we want the data 04:56.390 --> 05:05.910 over forum to be handled by a method that we can call on submit to and so yeah we can add on submitter 05:06.000 --> 05:14.230 dot preventive because we want to prevent the default behavior of a forum that is meeting in Europe 05:14.760 --> 05:17.640 equals on submit to that. 05:17.640 --> 05:20.580 We now have to define of course. 05:20.580 --> 05:21.120 So here 05:24.010 --> 05:24.610 methods 05:28.870 --> 05:32.350 and you are before sending any data to the rest api. 05:32.350 --> 05:34.660 We want to perform it two checks. 05:34.690 --> 05:39.670 First of all we need to be sure that the user is actually created in your question meaning that the 05:39.670 --> 05:41.500 text area is not empty. 05:41.770 --> 05:48.340 And then we also need to check that the question has been answered is no longer than two hundred and 05:48.340 --> 05:49.420 forty characters. 05:49.780 --> 05:50.520 That's the limit. 05:50.530 --> 05:54.240 That is you remember we've enforced year on the models level. 05:54.310 --> 06:05.380 So first of all if not these dot question body and as an error message we can add something like you 06:05.380 --> 06:09.750 can to send an empty question. 06:10.190 --> 06:12.910 Then let's check for the questions Langton so. 06:12.910 --> 06:23.110 Else if these dot question buddy dots linked is greater than two hundred and forty characters then let's 06:23.110 --> 06:25.370 define another error message. 06:25.390 --> 06:35.260 These third error equals and sure this field as no more than two hundred and forty characters. 06:35.260 --> 06:47.380 And now finally we can add some letters and find equals API questions and actually let's also add the 06:47.560 --> 06:57.250 semicolons here and yet then let the method equals post and we can also use API service to send this 06:57.250 --> 07:02.070 data to the endpoint data to create a new questioning distance. 07:02.110 --> 07:05.780 So let's import API service 07:09.000 --> 07:19.170 and your API service on this and bind using the post method. 07:19.170 --> 07:23.380 And at this time you also need to pass the body of the question itself. 07:23.610 --> 07:33.950 So the content is these dot question body after submitting a new question we want to be redirected to 07:33.950 --> 07:39.520 the question component and viewer route that provides us a very convenient way to do so. 07:39.530 --> 07:43.150 So first of all we're going to get some data from these endpoint. 07:43.280 --> 07:51.730 So question data and remember that among all the data serialized for each question. 07:51.750 --> 07:53.230 We also have it's a lag. 07:53.500 --> 07:56.790 And so we get past this lag as a parameter. 07:56.790 --> 07:58.670 The same way we've passed it here. 07:58.690 --> 08:04.580 I'm just going to copy this line of code but instead of routinely encode this time we're going to use 08:04.590 --> 08:09.760 these dot dollar sign the router that pusher. 08:10.250 --> 08:23.880 And then here it can now define simply name parents let's delete this two so we have a name which is 08:23.880 --> 08:31.470 the name of the path logger which is to be question data that's logger so that as soon as we get the 08:31.470 --> 08:37.170 data back we are going to be redirected using your router to the question component that will show us 08:37.170 --> 08:44.490 the data of these new question based on it's like let's all sorted out the code a little Beta before 08:44.490 --> 08:45.560 we can test this code. 08:45.570 --> 08:51.970 We need to create a new proper path for the question Ed component in the router and go three yes file. 08:51.990 --> 08:58.460 So first of all let us important component question Ed question Ed.. 08:58.590 --> 09:08.220 That view and yet let's define an other path that we can set as Lesh ask we can call it the question 09:08.730 --> 09:09.570 Ed.. 09:09.830 --> 09:16.920 And he's going to use the question Ed component of course we can now was open up the Nevada component 09:17.840 --> 09:25.380 because he added We can now change the path to the question Ed. So let's finally test this new feature 09:25.460 --> 09:27.490 of our single page application. 09:27.840 --> 09:28.800 Ask a question. 09:28.890 --> 09:29.930 Here is the form. 09:29.970 --> 09:32.000 So let's ask a question. 09:32.010 --> 09:35.280 What is the mass of Earth. 09:35.430 --> 09:37.080 Let's publish the question. 09:37.410 --> 09:41.000 And yet we are regulated automatically to the question component. 09:41.160 --> 09:46.830 We can see all the relevant details and also the title of the page that's changed accordingly. 09:46.830 --> 09:51.680 And if we now go back to home we also see these new question. 09:51.750 --> 09:53.530 Let's also ask another one. 09:53.970 --> 09:58.840 You see that the title of the page changes to Ed question time. 09:58.950 --> 10:03.390 What is a black hole. 10:04.220 --> 10:07.790 Publish and everything works as expected. 10:07.870 --> 10:12.310 Now that we have the ability to create new questions in the next lesson we will see how to implement 10:12.310 --> 10:14.020 a lot more about on page.