WEBVTT 00:02.480 --> 00:08.430 In this lesson we seldom implemented the edit and did delete bottles for the questions as well. 00:08.930 --> 00:13.610 Okay so yeah we are invisible to your code as you can see I am currently inside the question does it 00:13.610 --> 00:19.550 view component in the first thing that we want to implement is the ability for our component to understand 00:19.550 --> 00:21.650 if the user is making the request. 00:21.650 --> 00:24.170 He's also the author of the question itself. 00:24.170 --> 00:30.300 So in a similar way to what we've done yet in that answer where a component we can create a computed 00:30.330 --> 00:39.440 property so I'm just going to copy this code and I'm going to pay state your below like so. 00:40.200 --> 00:48.080 But of course this time the name is going to be is questioned our thought and is going to tell us if 00:48.080 --> 00:50.100 the user who was making the request. 00:50.400 --> 00:56.450 It's also the questions author and this comment also can be changed like so as you can see the question 00:56.450 --> 00:59.150 component is getting really big. 00:59.150 --> 01:05.270 We have more than one hundred and eighty lines of code and so one feeling that we can do to keep everything 01:05.330 --> 01:11.990 is maintainable and readable as possible is to create a new component in the components folder and we 01:11.990 --> 01:15.840 can call it question actions. 01:16.130 --> 01:22.880 That view and yet inside of this component we can add for example the aged email code and the javascript 01:22.880 --> 01:26.850 logic that we need to provide the new functionalities 20 users. 01:26.870 --> 01:32.590 So first of all inside of the template tag I'm going to define a new diva. 01:32.600 --> 01:43.380 Let's also add the classical question actions and it inside I can actually copy most of the code used 01:43.740 --> 01:46.480 in the answer component appear. 01:46.500 --> 01:50.510 I'm just going to copy this code. 01:50.900 --> 01:58.150 Let's indent everything properly like so let's so let's see how we can now implement the deed and added 01:58.160 --> 02:01.270 functionalities here inside of this component. 02:01.280 --> 02:08.570 We can create a delete question method that we make a DELETE request to the rest api and then afterwards 02:08.780 --> 02:15.770 is going to redirect us to the on page using router not Bush and the edit button is going to redirect 02:15.770 --> 02:18.450 us to the question added our component. 02:18.540 --> 02:24.980 If you are going to update with all the code needed to implement the added functionality so let's start 02:24.980 --> 02:28.980 by creating these delete question method. 02:29.000 --> 02:30.430 Yeah we need a name. 02:30.590 --> 02:38.630 We can just call the component question actions and of course the component we left to receive as lag 02:38.750 --> 02:45.680 is a prop so that we can make a proper DELETE request to the rest api so that the same prob can then 02:45.680 --> 02:57.660 be passed as a parameter to the question Ed component so props up SLUG IT type string required. 02:59.460 --> 03:00.400 True. 03:00.550 --> 03:02.080 Now we can define 03:05.260 --> 03:10.930 methods and so let's implement the delete method which is going to be very similar to the one we've 03:10.930 --> 03:21.010 defined here in the question component and first of all of course we need to import the API service 03:21.010 --> 03:27.780 function like so we can use async await once again. 03:27.800 --> 03:39.050 So async delete question let's and bind equals API. 03:39.650 --> 03:45.180 Questions don't have sign D that is lagging. 03:47.080 --> 03:53.020 The end we can use try 0 8 API. 03:53.130 --> 03:57.810 Service on these and bind. 03:57.920 --> 03:59.550 The method is deleted. 03:59.820 --> 04:08.220 And then yeah we can simply do this dot the left sign router dot pusher and yet we can simply pass new 04:08.240 --> 04:09.140 on page there. 04:09.180 --> 04:15.410 Let's also add catch Ed console. 04:16.350 --> 04:19.050 Not log error. 04:19.410 --> 04:23.130 So now that the method is completed we can pass it here. 04:23.250 --> 04:28.260 Like so now we can finally include this component inside of question. 04:28.320 --> 04:33.510 So appear instead of template right after question dot content. 04:33.510 --> 04:47.060 I'm going to include question actions which is self closing and here the effect is question or thought. 04:47.230 --> 04:52.150 We've slug equals slug or well. 04:52.200 --> 04:58.500 To keep everything as consistent as possible we can make this question that slug now before testing 04:58.500 --> 05:01.200 if that newly inserted component works. 05:01.200 --> 05:04.020 Of course we need to import it so air 05:07.370 --> 05:10.160 let's just copy the name question. 05:10.340 --> 05:18.440 Actions from components question actions and you also need to include it. 05:18.530 --> 05:27.950 So let's go back to question actions a second and let us comment this out and if we now go back to Chrome 05:28.260 --> 05:31.130 here it is as you can see we know we have a delete button. 05:31.160 --> 05:32.020 Perfect. 05:32.060 --> 05:36.140 So let's test it on a question such as what is a black hole. 05:36.380 --> 05:38.470 So as soon as I press delete. 05:38.630 --> 05:43.360 We are already reacted to the on page and as you can see the question is gone. 05:43.610 --> 05:51.120 If implementing the delete button was pretty straight forward implemented the edit button is a bit trickier. 05:51.230 --> 05:57.530 And that's because as soon as the edit Barton is pressed we want to be redirected to the question to 05:57.590 --> 06:04.450 our component and of course to edit to properly edit the question we need to identify it. 06:04.490 --> 06:08.930 Therefore we need to pass as lag to the question Ed component. 06:08.930 --> 06:14.300 However considering that we are already using these components to create new questions. 06:14.610 --> 06:14.860 Yeah. 06:14.870 --> 06:22.820 The question Ed path is not equipped to receive as loud as a parameter and so even though we can do 06:22.910 --> 06:28.170 something like this and then props set to true. 06:28.250 --> 06:33.560 If you're using the component to create a new question there is no slug that we can pass. 06:33.710 --> 06:40.280 Luckily for us view router is a really awesome package and it allows us to define parameters like we've 06:40.280 --> 06:48.020 seen so far but it also allows us to define optional parameters using a question mark setting up the 06:48.020 --> 06:51.020 bars like so we have to leave viewed through third date. 06:51.020 --> 06:59.180 We might send as lag parameter and in cases like parameter is passed the value as then to be passed 06:59.390 --> 07:01.410 as a prop to the component. 07:01.410 --> 07:02.170 So yeah. 07:02.240 --> 07:06.200 Now we can change the code here. 07:06.260 --> 07:13.220 The name for the path is question Ed. And there is a lag parameter. 07:13.220 --> 07:17.460 We want to pass this luck. 07:17.620 --> 07:19.900 So let's comment decode. 07:20.060 --> 07:24.770 And if you now go back to the blouse that editors. 07:25.220 --> 07:26.840 So back to his vest and your code. 07:26.840 --> 07:34.160 As you can see I'm currently inside the question Ed component and first of all I'm going to define props 07:36.850 --> 07:43.590 and instead of props like type Stringer. 07:45.150 --> 07:48.970 But this time required is false. 07:49.050 --> 07:53.090 Same as we've done in the answer to our editor component. 07:53.090 --> 08:00.260 We can use before a route to enter to get all the data needed in case we are editing a question. 08:00.270 --> 08:01.460 So yeah. 08:01.560 --> 08:09.920 At the end or Well in fact before created the sink before roots enter 08:12.640 --> 08:19.860 and do before a root and that accepts three parameters two from and next. 08:20.230 --> 08:29.110 And now here we can check if two dot patterns that larger is not undefined. 08:29.500 --> 08:35.730 And in that case we want to use APAC at least to get the questions data from the rest api. 08:35.800 --> 08:40.880 So let and find equals API. 08:42.710 --> 08:43.610 Questions. 08:43.610 --> 08:56.180 The left sign to dot parents that is like the yeah let data equals a weight API. 08:56.630 --> 09:08.170 So it is on these endpoint and now we can return it next to plus indeed adult content as a value for 09:08.170 --> 09:10.150 the question body property. 09:10.150 --> 09:22.750 So we end up using an audio function and we are simply VM dot question body equals data not content 09:23.340 --> 09:24.130 otherwise. 09:24.710 --> 09:30.380 And so simply return next if no slug has been passed. 09:30.430 --> 09:30.700 Okay. 09:30.730 --> 09:32.010 Let's see how this works. 09:32.020 --> 09:38.420 Let's go back to Chrome and yeah let's open up another question such as what is the mass of Earth. 09:38.500 --> 09:41.290 Let's click on edit and edit this. 09:41.290 --> 09:42.800 The content is being passed. 09:42.880 --> 09:43.640 Perfect. 09:43.660 --> 09:51.140 Now we can change the way the all submit method is implemented by check in once again. 09:51.280 --> 09:54.100 If this lag has been passed or not. 09:54.100 --> 10:03.560 So if these dot slug it is undefined in this case we can simply update our variables. 10:03.560 --> 10:10.240 So end point plus equals these not. 10:11.950 --> 10:14.150 And the method. 10:14.260 --> 10:21.380 In that case is going to be put this however is to be not undefined of course. 10:21.460 --> 10:25.600 So if there like prop has been passed therefore it is not undefined. 10:25.630 --> 10:27.730 In that case we update the variables. 10:27.730 --> 10:30.220 So let's finally go back to Chrome. 10:30.220 --> 10:32.400 Let's open up a question. 10:32.530 --> 10:38.790 Edit and yeah for example we can add one more question mark publish and you see that a question has 10:38.800 --> 10:39.550 been updated. 10:39.550 --> 10:44.470 If we now go back to the home page it is of course still here updated. 10:44.470 --> 10:52.690 However we can still lad of course as many questions as we want such as for example who was Napoleon 10:54.480 --> 10:57.550 publish and a question of course is here.