WEBVTT 00:02.450 --> 00:07.130 Let us now see how to implement all the code needed to make David Barton work. 00:07.260 --> 00:10.550 As you might expect fees that are going to be different from what we've done. 00:10.550 --> 00:11.550 We have the delete button. 00:11.790 --> 00:13.440 So let's see what the difference. 00:13.440 --> 00:14.310 Release. 00:14.310 --> 00:18.410 First of all we need to create a new component inside of the views folder. 00:18.540 --> 00:21.110 We could call this component elsewhere. 00:21.410 --> 00:23.410 Ed. note for you. 00:23.430 --> 00:29.820 So clicking on the edit button users will be redirected to the answer editor component the component 00:29.820 --> 00:32.940 is going to be similar to the question Ed component. 00:32.940 --> 00:40.410 So let's just copy the template HDMI code but of course we need to change it a little bit. 00:40.440 --> 00:45.350 So first of all this can be edited your answer. 00:45.480 --> 00:52.020 We don't need a placeholder and that's because of course this text area is going to be populated with 00:52.020 --> 00:54.450 the content of the answer that we're editing. 00:54.450 --> 01:00.660 This can be publish your answer and this paragraph is fine. 01:00.750 --> 01:03.620 Let us know define the script tag. 01:04.260 --> 01:09.530 So first of all name after Ed.. 01:09.870 --> 01:14.310 And then of course we are going to need to define some props right. 01:14.460 --> 01:18.610 But let's think for a second about what we want to pass it as a prop. 01:18.660 --> 01:24.450 Now considering that most of the times we are going to redirect users to this component as soon as they 01:24.450 --> 01:30.840 press the edit button you might be tempted to bust the whole hands for instance as a you URL parameter 01:31.170 --> 01:37.080 using view router to then pass the instance to the component that would be similar to what we've done 01:37.080 --> 01:44.640 here in the home component where we've passed the questions logger as a slug parameter to Router link. 01:44.640 --> 01:49.800 However passing a whole object as you URL parameter is not a good idea. 01:49.950 --> 01:56.150 And that's because you always want to try to keep your components as independent as possible but in 01:56.160 --> 02:02.390 a unique field such as a slug or an I.D. to the component is a great idea because the component. 02:02.390 --> 02:07.580 Dan can retrieve all the data he needs MYSELF FROM THE REST API. 02:07.710 --> 02:12.810 So yeah let's define idea of type. 02:12.850 --> 02:21.060 No we've required through now that we have data we can communicate with their API set of his functions 02:21.090 --> 02:29.900 so let's imported and we can retrieve all the data for these specific instance. 02:30.040 --> 02:33.940 Now same as we did here in the question a lot of your component. 02:33.970 --> 02:41.350 We could create a method such as the get questioned data method and then use created to call the method 02:41.410 --> 02:43.600 as soon as the component is created. 02:43.840 --> 02:49.300 However there is a better way to do so especially in a context like the one we are dealing with now 02:49.580 --> 02:51.010 in this new way. 02:51.010 --> 02:57.010 Let's say of doing things involves using a spatial functionality provided by your router that allows 02:57.010 --> 03:01.180 us to execute code before entering the route. 03:01.180 --> 03:06.760 So considering that these a single page application that automatically 18 is part of a course that was 03:06.760 --> 03:09.330 created to teach you how to use a view. 03:09.370 --> 03:13.470 Yes and Django let's see how to use these new functionality. 03:13.600 --> 03:25.450 So yeah let's define a sinker before Ruth enter which accepts three parameters two from and the next 03:25.780 --> 03:32.440 to represent the target the root object being navigated to trauma represents the current through to 03:32.440 --> 03:35.230 being navigated away from the Y next. 03:35.230 --> 03:39.160 That is a function that we used to move to the next book in the pipeline. 03:39.430 --> 03:46.210 So yeah let's define an endpoint that we can use to get the details of the answer. 03:46.480 --> 03:55.450 So API sweats and a to access idea we can use the last name in this case because we're using the back 03:55.450 --> 03:55.960 to excel. 03:56.230 --> 04:02.830 But most importantly to dot dot dot in this case ideas and end here. 04:02.850 --> 04:06.290 You also need one more that's less forward. 04:06.310 --> 04:11.940 I'm also noticing that for whatever reason this page is being indented using force bases. 04:11.980 --> 04:19.540 So I'm going to just set everything back to to save and then format document. 04:19.540 --> 04:21.240 So back to our function. 04:21.370 --> 04:32.380 I can now define data using a weight to call the API set of this function on this end point. 04:32.470 --> 04:37.250 And this of course is going to be a get to request because we want to get the details of the answer. 04:37.300 --> 04:42.580 And now that we can access their data object which is the answer where did we want to add it. 04:42.580 --> 04:48.160 Considering that this function is executed before entering the router we need to see how to actually 04:48.160 --> 04:53.830 pass the data that we need to the component itself in this election we're actually going to see two 04:53.830 --> 04:59.560 different ways to do so because this would allow us to discuss different concepts that you might then 04:59.560 --> 05:02.490 find useful when developing your own applications. 05:02.530 --> 05:10.870 And so now the same way that we've been using I.D. from two dot bottoms we can pass both the body of 05:10.870 --> 05:16.970 the answer that we're editing and also the slug of the question to which these are specific and switch 05:16.970 --> 05:22.330 instance that we've added editing has been assigned and in fact to get these questions lag we need to 05:22.330 --> 05:28.590 change the serialize their class so C realize that it's that by eating elsewhere sterilizer let's define 05:28.980 --> 05:39.440 question as lager using a serialize the method field so you're going to define a new method. 05:39.440 --> 05:49.110 Def get questions like self and instance and yet I'm just going to return it is just that question. 05:49.940 --> 05:50.750 That's luck. 05:50.780 --> 06:00.340 So now we're going back to the component we can first of all define two more props so previews and sweat. 06:00.440 --> 06:03.770 Which is the content of the answer had before been edited. 06:03.860 --> 06:18.460 Type stronger and acquired through and then also question longer which is a stringer we've required 06:18.470 --> 06:19.310 it through. 06:19.310 --> 06:20.820 Just like we use elsewhere. 06:20.900 --> 06:25.310 Now digital component is expecting two more props so we can finally bust him. 06:25.310 --> 06:32.040 So to that firearms dot previews I swear. 06:33.420 --> 06:46.610 Equals data that body and two dot bottoms dot question lag equals data dot question on this Good luck. 06:46.740 --> 06:51.060 And then finally we can return next. 06:51.060 --> 07:01.610 Now that we have the previews and swear content passed as a prop we can define data India returner and 07:01.610 --> 07:11.030 we can return elsewhere body which we can initialize as these data previews and swear and then let's 07:11.030 --> 07:19.240 also add an error field initialized as normal. 07:19.270 --> 07:22.680 Finally we can define the and submit my thought. 07:23.500 --> 07:29.910 So you're methods on 70 to 07:33.760 --> 07:42.120 and Europe before these dot sort body because as always we want to check that users are not trying to 07:42.990 --> 07:44.580 submit an empty answer. 07:44.640 --> 07:55.800 So D dot error in that case and we can add you can to submit an empty lots where otherwise if a proper 07:55.810 --> 08:11.830 answer has been added Let and find equals McTeague so API ask first and then say it is not Heidi let's 08:11.850 --> 08:23.020 now use API service on this end point portal because we had to update in any instance and then let's 08:23.040 --> 08:25.380 also pass the contents that we want to send. 08:25.380 --> 08:30.480 So body the body of the answer they start that's the body. 08:30.570 --> 08:41.020 Yeah we can now use DNA and we can just use it to redirect the user to the question where it is assumed 08:41.080 --> 08:43.890 it was added using questions like. 08:44.190 --> 08:58.840 So these dot dollar sign router do the pusher India name and the name is question so a name question 08:58.930 --> 09:08.810 the name of the root the name of the path and the impotence slug is the questions luck. 09:08.830 --> 09:11.350 So now that the component is finished. 09:11.350 --> 09:12.670 Let's open up a root there. 09:12.790 --> 09:24.340 Yes once again and let's imported so this is going to be asked where ADR and we can actually move it 09:26.050 --> 09:37.150 up here and now we can define yeah to be low a new path I'm going to copy this code like so. 09:37.270 --> 09:39.130 So let's delete this comment. 09:39.500 --> 09:41.280 So the path is going to be unswayed. 09:41.870 --> 09:45.260 And we have to pass the I.D. parameter. 09:45.260 --> 09:47.990 We can call the path elsewhere. 09:48.700 --> 09:54.310 And you thought a component is of course the answer editor component. 09:54.450 --> 09:57.010 Remember as always probs true. 09:57.240 --> 10:03.960 Now finally we can move back to the ask where a lot of your component and yeah let's define a router 10:05.070 --> 10:21.450 Linker to proper name is password editor like so and then we also need to pass the I.D. So Pam's idea. 10:21.580 --> 10:34.470 That's where dot I.D. So you had below we can now define plus button button as Sam button outlined and 10:35.110 --> 10:37.430 well in fact the class was her idea below. 10:37.480 --> 10:47.500 So I'm going to move these IPR and delete this button all altogether so that I can do edits one and 10:47.520 --> 10:48.530 two. 10:48.600 --> 10:50.630 So we've written a lot of code in this one. 10:50.630 --> 10:52.500 Let's recap what's going on. 10:52.830 --> 10:58.950 As soon as the added button is pressed up we're using a router link to redirect the user to there and 10:58.950 --> 11:06.090 swear Ed bath and this path of course is going to use the sweat Ed component. 11:06.120 --> 11:11.680 Considering that yeah we are defining props through this idea. 11:11.700 --> 11:18.800 The and swear I.D. that we're passing as a parameter is past the after the component as a prop here 11:18.930 --> 11:22.450 before entering the root itself. 11:22.890 --> 11:30.390 The before roots enter function is called and these function uses that same I.D. passed as a parameter 11:30.600 --> 11:38.250 to define an endpoint to which a get request is made and is get request return inside the data of the 11:38.250 --> 11:40.010 answer that we're trying to edit. 11:40.020 --> 11:45.840 We've danced with data we can pass through more parameters the body of the answer that we're trying 11:45.840 --> 11:52.020 to edit in the questions larger and we can't pass them and they are going to be used as values for these 11:52.020 --> 11:52.910 two props. 11:52.950 --> 11:58.780 So to the previous sounds when a probe is assigned the value of the answer that's been added in into 11:58.830 --> 12:04.760 questions like is passed does lager of the question to which this answer is assigned. 12:04.770 --> 12:10.210 There really is in this probe as a value for the answer to our body property that is connected. 12:10.230 --> 12:15.810 E added to the text area we have a v debt than active inside of this form. 12:15.810 --> 12:23.280 And as soon as this form is submitted this new content these new answer were basically is the center 12:23.370 --> 12:30.510 as a body for a dispute a requester telling the rest api that we want to update D as we instance and 12:30.510 --> 12:36.690 then we are finally using the questions larger as a parameter to redirect the user to the same question 12:36.780 --> 12:37.890 What did they ask what it was. 12:37.950 --> 12:43.680 So we've written a lot of code but the great news is that this component is basically the most advanced 12:43.740 --> 12:45.180 of the whole application. 12:45.330 --> 12:47.340 So if you understood everything so far. 12:47.370 --> 12:48.480 Great job. 12:48.630 --> 12:49.940 Otherwise no worries. 12:49.950 --> 12:52.020 Everything is going to be clear I promise. 12:52.020 --> 12:54.750 Just take your time to understand what's going on. 12:54.750 --> 12:57.810 There are surely multiple ways to create such a component. 12:57.810 --> 13:01.720 For example one of these might involve using a stage manager like you AXA. 13:01.770 --> 13:06.330 And as I said at the beginning of the video by the end of the lesson we'll also see another way to do 13:06.330 --> 13:06.750 things. 13:06.870 --> 13:12.240 However again this is a real world educational project so it's important to understand all of these 13:12.240 --> 13:17.820 steps so that you can then use them of course for Europe projects for your single page applications. 13:17.820 --> 13:23.780 So I'm now going to restart the Jangles development server because of the fact that we've changed this 13:23.780 --> 13:32.210 utilized class so and also yet I see that we have an error so let's move up it is there and he says 13:32.210 --> 13:35.690 questions lag is not defined yet in a router. 13:35.770 --> 13:43.140 Don't push it because this is in fact these dot questions lag. 13:43.380 --> 13:49.510 We now see that we have these warnings which are in fact just messages you see that are sent by the 13:49.520 --> 13:57.720 leaned her head that we can just ignore for now let's now move back to Chrome and the we can for example 13:57.720 --> 13:59.420 refresh the speech. 13:59.490 --> 14:03.350 So let's click on edit and let's see what happens. 14:03.450 --> 14:03.780 Okay. 14:03.820 --> 14:04.860 So super cool. 14:04.860 --> 14:06.810 We are redirected to this new component. 14:06.810 --> 14:08.860 You see the root and swear nine. 14:09.020 --> 14:11.000 Let us inspect this component. 14:11.100 --> 14:14.780 We have the props we have previews elsewhere and we have questions lag. 14:14.850 --> 14:15.890 Very good. 14:15.910 --> 14:20.150 And so first of all let's write to delete all the content and publish the answer. 14:20.190 --> 14:22.000 We get an error of course. 14:22.480 --> 14:23.160 Yeah lets out. 14:23.160 --> 14:30.720 Change the code python and JavaScript are awesome. 14:30.720 --> 14:35.320 Let's click on publish your password and we are redirected yet to the same question. 14:35.320 --> 14:37.350 What I said was perfect. 14:37.350 --> 14:44.550 Let's also make a get request for the same page for the same content of the same component and everything 14:44.550 --> 14:45.500 is still here. 14:45.510 --> 14:49.660 Because of course the content has been updated to the database level. 14:49.710 --> 14:51.120 Very good. 14:51.150 --> 14:56.580 Now that I've shown you how you can use it before it roots enter to execute code before entering the 14:56.580 --> 15:00.990 root and you can pass further parameters to finish the lesson. 15:00.990 --> 15:06.720 Let's see how we can make the component a bit more elegant so are in the data function. 15:06.720 --> 15:14.280 I'm just going to initialize unsought body as normal then I'm going to take questions like from the 15:14.280 --> 15:14.810 props. 15:15.140 --> 15:18.820 And he said I'm going to define it as property of data. 15:18.900 --> 15:21.890 So questions lag normal. 15:21.990 --> 15:25.610 Hey I'm just going to remove these two props. 15:25.850 --> 15:32.410 There is in fact an easier way that we can access the component from within before a root enter. 15:32.420 --> 15:37.920 What if I tell you that we can access the properties of data from within before roots enter. 15:38.150 --> 15:42.180 So yet inside the AMA using a narrow function. 15:42.260 --> 15:47.960 And we've mentioned that VM is a bit like app we use it to refer to a few instance. 15:47.960 --> 15:59.000 So in this case D component is created and so you're inside we can define v m dot elsewhere body as 15:59.000 --> 16:13.160 being data body and then VM a dot question this logo has simply been data not questions like So let's 16:13.160 --> 16:17.710 come in these two lines for now because you are not going to need them anymore. 16:17.720 --> 16:24.140 We do need to pass values as parameters and then having them passed as props we can just use them right 16:24.140 --> 16:27.540 away as values for the properties defined in data. 16:28.000 --> 16:33.800 So if we now go back to Chrome let's make a get request for the page and look here. 16:33.830 --> 16:34.590 This is the console. 16:34.610 --> 16:37.620 OK so I'm opening this question now. 16:37.730 --> 16:42.270 Edit India you see is the content of the answer. 16:42.320 --> 16:43.400 Perfect. 16:43.400 --> 16:47.660 Let's also make one more checker using view. 16:47.870 --> 16:55.490 So question answer component and so you see that at the moment of course we have this answer object. 16:55.510 --> 16:55.960 Okay. 16:55.990 --> 16:56.630 So. 16:56.710 --> 17:04.900 Edit And of course redirected to answer editor and yet we have both of by the end questions like perfect.