WEBVTT 00:02.450 --> 00:09.380 Okay, we have our component added already, so we have everything prepared for actually storing the 00:09.380 --> 00:13.790 data in our database to update the data using method put. 00:14.120 --> 00:19.460 So far what we have is whenever we click here and then I will click Save. 00:19.490 --> 00:22.060 We'll just go back to the previous page. 00:22.070 --> 00:23.570 Well, this is still valid. 00:23.600 --> 00:30.080 We want to go back to the previous page, but we would like to first update the movie and then from 00:30.080 --> 00:35.600 the response, we would like to update the current movie here as we have it on the new component. 00:35.600 --> 00:39.170 So how can we do that here inside the edit? 00:39.170 --> 00:42.980 JS In that component, we have Method Save movie. 00:43.010 --> 00:50.990 That movie will need to actually create a new fetch request and we will send some information from that 00:51.380 --> 00:52.910 component to the API. 00:52.940 --> 00:57.470 API will return updated data and then we'll navigate back to the details. 00:57.470 --> 00:59.870 JS Okay, so how can we do that? 00:59.870 --> 01:04.590 Basically what we can do is we can uh, go to the list. 01:04.590 --> 01:11.460 JS here, and the same method we used use fetch here, I will just copy and that will save us a lot 01:11.460 --> 01:13.470 of time to, to type it. 01:13.470 --> 01:17.220 And then I will go here and reuse whatever we have. 01:17.220 --> 01:18.660 We'll need to change a few things. 01:18.660 --> 01:20.880 So first thing first, the URL is different. 01:20.880 --> 01:25.230 So API movies, that's a valid for post but not for a put. 01:25.230 --> 01:26.820 So we need to go. 01:27.000 --> 01:29.700 We need to create a method put here. 01:29.970 --> 01:31.200 So this is the put. 01:31.200 --> 01:35.040 I will convert this string into a to backticks here. 01:35.040 --> 01:39.480 So in that case I can inject the variable inside here. 01:39.480 --> 01:40.860 So I'll do a slash. 01:40.860 --> 01:49.410 And inside here what I need to pass is I need to pass a movie ID so we have movie here and then we'll 01:49.410 --> 01:56.250 have also ID, So the URL is API slash movies, slash ID of the movie and slash at the end and that's 01:56.250 --> 01:57.150 a method put. 01:57.510 --> 02:00.480 Okay, so we have that already done. 02:00.480 --> 02:04.500 What we also need to provide here is we need to provide a body. 02:04.770 --> 02:09.300 So body will be our data that we will send to the server. 02:09.300 --> 02:15.150 So what we need to send, we need to send a title, which is our title. 02:15.150 --> 02:19.410 So this one is what we send and this one is the value itself. 02:19.410 --> 02:21.450 And the same with the description. 02:21.540 --> 02:25.260 So description and description like this. 02:25.260 --> 02:27.480 So this is the object that I will pass. 02:27.480 --> 02:30.450 But whatever I pass something, I need to pass it as a string. 02:30.450 --> 02:39.060 So I will do Json and then Stringify method here and I will wrap that around this object that I've created. 02:39.060 --> 02:47.160 So we just json.stringify this object here, which is a title and description, and this is what we 02:47.160 --> 02:51.960 will pass to our API that will update the records. 02:51.960 --> 02:54.510 So what else we need to do? 02:54.510 --> 02:58.590 So here we have already response and we do set movies. 02:58.620 --> 03:03.720 This is not valid anymore because we need to do a different things here. 03:03.720 --> 03:06.240 So here I will have a Json response. 03:06.240 --> 03:09.810 So I will have in response movie updated. 03:09.810 --> 03:13.080 So from from this point I will need to update the movie. 03:13.080 --> 03:20.010 So for now I will just console log it and whatever is coming there and we will see what we have so far 03:20.010 --> 03:25.590 and I will show you that it's not going to be enough for us to update movie because we also need to 03:25.590 --> 03:28.110 take care of the content type. 03:28.290 --> 03:34.560 Whatever we use output, we need to specify what we are sending and we are sending here a Json. 03:34.560 --> 03:38.100 So we need to tell our application that to accept the Json. 03:38.370 --> 03:41.100 And what I can do is I can add it here. 03:41.100 --> 03:44.670 Let's say I will add Titanic to and I will save it. 03:44.670 --> 03:51.030 And you can see here I have unsupported media type plain charset. 03:51.030 --> 03:58.920 So this is it's expecting a text plain, but what we need to do is we need to tell that we will provide 03:58.920 --> 04:02.220 actually a content type of Json. 04:02.220 --> 04:13.140 So content content type and that's going to be application slash Json like this. 04:13.140 --> 04:23.040 So once we will provide this, I can save it now and then let's try again edit the Titanic Titanic to 04:23.040 --> 04:23.730 save it. 04:23.730 --> 04:27.420 And you can see here that's what it's coming back from here. 04:27.420 --> 04:31.200 So, so the first end here, convert everything to Json. 04:31.200 --> 04:35.130 Then we have another then and then we expect movie and we console.log it. 04:35.130 --> 04:38.910 So this is what is coming back from the from the server. 04:38.910 --> 04:42.150 And you can see here the title is already Titanic two. 04:42.150 --> 04:45.630 But when we go here, props, navigation, go back. 04:45.630 --> 04:48.510 We actually don't overwrite anything here. 04:48.510 --> 04:55.410 This is still as it was because it's it's it's kept in the current state of this component. 04:55.410 --> 05:01.260 So what we need to do instead of console.log it here, what we can do is we can use. 05:01.280 --> 05:03.620 You similar way as we've done it here. 05:03.620 --> 05:08.330 So if we go here, you can see whatever we clicked on the movie. 05:08.330 --> 05:12.080 We are bringing back the title. 05:12.080 --> 05:21.230 So I will comment, I will copy that and I will go here and I will replace it with here with this one. 05:21.230 --> 05:28.340 So what we do here, whatever, we have a response movie from from the put response, we will navigate 05:28.340 --> 05:35.270 to the details and we'll provide that movie as a props and then movie title as well. 05:35.600 --> 05:41.690 So we will be back in this screen and we don't need that go back anymore from here. 05:42.020 --> 05:49.910 So we are just expecting this to have a response and then you can have go back with some console. 05:49.920 --> 05:50.280 Rocky. 05:50.300 --> 05:56.630 If that fails, then you can go back to the previous page with that go back method and then maybe print 05:56.630 --> 05:59.900 something on for the user that it wasn't successful. 05:59.900 --> 06:06.330 And but what we are interested in here, wherever we have a success, then we navigate back to the details 06:06.330 --> 06:09.360 and we provide a new movie from that response. 06:09.360 --> 06:11.070 So let's test it now. 06:12.450 --> 06:13.560 And then I go Titanic. 06:13.680 --> 06:21.500 You can see already that has been changed in my previous trial, but I haven't really updated back then. 06:21.510 --> 06:26.340 So you you could still see the old data, but now I can see the Titanic to here. 06:26.340 --> 06:28.650 So that means it is in database. 06:28.650 --> 06:36.210 So my, my goal is if I will edit that back to the Titanic, then I will be redirected to this page. 06:36.210 --> 06:41.820 So I will remove it and I will be back to the previous page with the Titanic, Titanic to. 06:41.850 --> 06:42.660 So save it. 06:42.660 --> 06:44.850 And in fact, I have a Titanic here. 06:44.850 --> 06:49.350 So one more test, Titanic three and then romantic movie three. 06:49.530 --> 06:50.820 I can save it here. 06:50.820 --> 06:54.090 And you can see romantic movie here and Titanic here. 06:54.090 --> 07:01.230 So that means I have already a way to update the movie on the database using our put method.