WEBVTT 00:02.470 --> 00:08.200 It's now time to finally implement the ad answer the functionality to a single page application so that 00:08.200 --> 00:12.310 users can finally answer all the questions that have been asked. 00:12.310 --> 00:17.830 We need to customize the question component in order to handle three possible scenarios. 00:17.830 --> 00:22.540 First of all like in this case the user as not answered the question. 00:22.540 --> 00:27.850 In this case we want to show the users a green advance red button in the second scenario. 00:27.850 --> 00:30.510 The user has already pressed the green button. 00:30.520 --> 00:36.820 Therefore we need to show the user ID form so that the new answerer can be created and submitted to 00:36.820 --> 00:37.710 the application. 00:37.780 --> 00:44.560 And then in the third scenario the user has already answered the question and therefore look it up in 00:44.560 --> 00:45.160 some quarter. 00:45.400 --> 00:51.420 We want to show the user a sentence which tells the user that he has already answered the question. 00:51.430 --> 00:56.140 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 00:56.170 --> 01:02.710 question dot view component because as we said this is the components that we need to customize. 01:02.750 --> 01:08.380 Considering that as we said we are going to show our users a form so that they can create and submit 01:08.440 --> 01:10.680 new answers here in data. 01:10.690 --> 01:16.700 First of all let's define new answer body as normal. 01:17.590 --> 01:20.890 And those so error is normal. 01:21.040 --> 01:23.280 And this of course will improve the user experience. 01:23.290 --> 01:29.620 Considering that we are not allowing them to submit empty answers and then let us also define 2 boolean 01:29.620 --> 01:44.090 flags user as password that we can initialize as false and also show form we can now use these two boolean 01:44.090 --> 01:50.710 flag search to change the HDMI content shown based on the different circumstances we've discussed earlier 01:51.110 --> 01:57.770 the two boolean flags are initialized as false because that's the most plausible scenario for both of 01:57.770 --> 02:04.310 them we want to show the as reform only after the answer button has been pressed and more importantly 02:04.340 --> 02:09.920 if an application where to go life it would be very unlikely for the typical user to events where the 02:09.920 --> 02:12.060 vast majority of the questions. 02:12.130 --> 02:18.410 Let's also keep in mind that the most appropriate boolean value for use it as password can be obtained 02:18.500 --> 02:22.910 directly while communicating we want rest api. 02:23.140 --> 02:30.770 And that's because as you probably remember up for every single question we get these user as answers 02:30.910 --> 02:37.790 field so we know that they're currently logged in user admin as not ask where these for questions but 02:37.820 --> 02:40.610 it as answered this fifth question. 02:40.610 --> 02:42.450 And it's because here we have true. 02:42.500 --> 02:51.530 So let's add a line of code here in the get questions data method Yeah we can simply set this dot user 02:53.200 --> 03:02.040 as in straight equals data not user as That's right. 03:02.150 --> 03:07.280 Technically yes we could derive these data from inside the questions object. 03:07.280 --> 03:13.580 However I believe that having a dedicated field in that data function is in this case a much cleaner 03:13.580 --> 03:14.120 option. 03:14.150 --> 03:17.940 So let's now finally customize the age team and code here. 03:17.950 --> 03:22.850 I'm going to add in other H.R. tag and in between. 03:22.850 --> 03:25.460 Let's now create 3 div elements. 03:25.490 --> 03:30.540 So 1 2 3. 03:30.560 --> 03:38.020 Yeah we can add V if the user is answered in the second one. 03:38.150 --> 03:47.110 V as if show former and in the third one simply means. 03:47.540 --> 03:51.200 So if the user is answered we simply want to show a paragraph. 03:51.770 --> 03:55.310 Let's also maybe add this SS class to answer. 03:55.940 --> 04:01.120 I did and yeah we can add you've written an answer. 04:02.540 --> 04:04.910 Let's also create these CSF classes. 04:08.280 --> 04:21.310 Yeah below and we can add funds weight balls and color green then you are in the Third Division. 04:21.940 --> 04:27.760 Let's add a bottom so bottom as we said a green button. 04:27.790 --> 04:30.610 So class up button. 04:30.810 --> 04:43.960 Button a Sam button successor and one clicker we want to set show format for true. 04:44.380 --> 04:50.700 And then as a value it's about time we can simply add elsewhere. 04:50.710 --> 04:52.850 The question. 04:52.870 --> 04:54.680 So let's go back to Chrome. 04:54.850 --> 05:01.040 Just going to delete 1 and 2 let's make another get request here. 05:01.310 --> 05:06.970 And so yeah of course we see the green paragraph because we have answered this question. 05:07.210 --> 05:12.900 So let's go to view Dave to set up a question. 05:13.390 --> 05:19.840 We see that the user as answered is a set to true and let us know check the other question. 05:19.840 --> 05:30.880 So let's refresher let's open up a few dev tools so Hopper question and yet of course we have a show 05:30.880 --> 05:34.700 form of force and use it as an squared to force. 05:34.720 --> 05:40.750 Therefore we have the green button and as soon as we press it we see that the button disappears and 05:40.750 --> 05:47.090 show forum is set to true let us know what the forum itself yeah. 05:47.120 --> 05:59.150 In the second diva so form yeah we can set the classic form Kaja or rather simply card just to give 05:59.150 --> 06:01.460 it a nice shape. 06:01.460 --> 06:07.720 And more importantly so that even inside we can define a diva of class card. 06:07.880 --> 06:13.110 Heather we have some padding but x 3 in the air in the other. 06:13.910 --> 06:26.140 Let's not answer the question then air in other Diva this the same class cars block come and eat inside 06:26.150 --> 06:28.820 we can place the text area needed. 06:28.820 --> 06:35.860 We don't need to name I.D. or columns and we can set rows to five. 06:36.050 --> 06:41.990 So most importantly we need V more than on new and square body. 06:42.020 --> 06:48.630 Then we can add the some form control place holder and we can add. 06:48.650 --> 06:49.870 Answer the question. 06:50.180 --> 06:51.680 Once again like so. 06:51.830 --> 06:56.570 And then yeah we can add another diva. 06:57.020 --> 07:05.330 This time we class cards for that part in x 3 and the inside. 07:05.330 --> 07:08.660 We can simply define about ton of. 07:09.410 --> 07:18.510 Sub meta yet another green button social class that John Button S.M. button success idea is a value 07:18.540 --> 07:19.340 we can add. 07:19.350 --> 07:25.780 Submit your answer then outside of the forum. 07:25.800 --> 07:38.010 We can add a paragraph with any editor message so we're on the eve of class. 07:38.500 --> 07:49.590 And that bit of margin so let's define these CSX class so you are below and we can make it very similar 07:49.590 --> 07:50.830 to the answer. 07:51.060 --> 07:55.400 Did class by design the color has to be right. 07:56.520 --> 08:00.650 So let's go back to Kron. 08:01.150 --> 08:05.380 Let's go back to home and let's open up another question. 08:05.500 --> 08:10.160 And if we now press asked the question how do we see the answer to the question form. 08:10.270 --> 08:15.220 Actually we can change the place holder from answer the question to the application more. 08:15.220 --> 08:16.480 Don't share your knowledge. 08:16.990 --> 08:29.080 So let's go back here you are in place holder share your knowledge let's save and going back to Chrome 08:29.380 --> 08:35.560 we see of course that it is updated much better of course what happens now if you try to submit the 08:35.560 --> 08:41.800 form is of course that the form tries to send its content and a page refreshes. 08:41.860 --> 08:48.760 So as always we now needed to prevent this kind of behavior but we need to create an own submit method. 08:48.820 --> 08:57.460 So going back to these what is your code here in the form let's add on some meta dot prevent equals 08:57.880 --> 09:02.150 on submit to that we now need to create. 09:02.170 --> 09:05.240 So you're into methods 09:09.380 --> 09:13.440 first of all let's check if these dots knew. 09:13.750 --> 09:16.100 Answer your body. 09:16.110 --> 09:21.770 Otherwise so these not air equals. 09:21.770 --> 09:27.030 You can't send an empty answer. 09:27.200 --> 09:30.320 However if the user is in fact answered the appropriate answer. 09:30.740 --> 09:32.730 Let's define an endpoint. 09:32.820 --> 09:42.630 And defined as API questions and in fact we can use the back to the API. 09:42.630 --> 09:55.910 Questions are saying these not so long ago and an answer which is different you see from this end point. 09:55.910 --> 10:06.070 So let's use API service to make it pause to request on D and point and we need to pass the body of 10:06.070 --> 10:07.260 that post request up. 10:07.390 --> 10:15.520 So as body in the field this time we can pass START you ask where her body then we are going to get 10:15.520 --> 10:24.340 back the data of these new and sweeping instance so we can added to the beginning of the answer straight 10:24.400 --> 10:28.230 with decent not answers not shifting. 10:28.700 --> 10:31.360 And then of course we pass data again. 10:31.420 --> 10:32.440 We are now dead. 10:32.440 --> 10:35.410 The user is in fact answering the question. 10:35.470 --> 10:38.300 We can set new ones to our body back to rule. 10:38.340 --> 10:42.780 So these still new on this one body equals no love. 10:43.450 --> 10:51.850 Then we can set show form and back to force these both short form for self and also we need to set these 10:51.850 --> 10:56.080 dot user as an effort to true. 10:56.080 --> 11:05.100 And considering that we are managing errors we can also check if d dot error in this case because that's 11:05.130 --> 11:07.150 D dot error. 11:07.390 --> 11:08.360 Back to normal. 11:08.500 --> 11:11.620 So let's not try this new feature of our application. 11:11.620 --> 11:13.860 We can't go back to the home page. 11:14.140 --> 11:17.130 Oh well in fact we can just answer these questions okay. 11:17.140 --> 11:27.570 So answer the question yes we have our form and yet I can add something like in my opinion that's python. 11:27.610 --> 11:30.290 Let's also examine the question component. 11:30.300 --> 11:31.450 Sure for them is true. 11:31.450 --> 11:34.350 Use it as answer is false and the array is empty. 11:34.720 --> 11:41.450 So as soon as I press this submit your answer button we see that the form disappears. 11:41.450 --> 11:43.340 Now we have you've written an answer. 11:43.400 --> 11:45.700 We have the answer right here below. 11:45.730 --> 11:49.270 The answer is the array of course now contains an object. 11:49.340 --> 11:50.930 I saw the bodies back to normal. 11:50.930 --> 11:54.260 Short form is false and use it as answered is true. 11:54.330 --> 11:58.720 And if we now go back to home and we see it now Wandsworth is set to 1. 11:58.730 --> 12:02.710 Going back to the component we can make in there and get gets request still. 12:02.750 --> 12:07.170 The answer is here because it has in fact been submitted to address backend. 12:07.730 --> 12:09.830 Let's also try to submit an empty question. 12:09.860 --> 12:11.580 Let's see what happens. 12:11.670 --> 12:18.560 And of course in this case we get an error note that users can finally create new answers. 12:18.590 --> 12:20.630 It's time to implement a new feature. 12:20.630 --> 12:23.950 I'm talking about a new button here in the question component. 12:23.960 --> 12:25.520 Then load more answers button.