WEBVTT 00:02.690 --> 00:03.080 Okay. 00:03.080 --> 00:10.550 So what we have is we have functional form already in our application, but we don't do anything whenever 00:10.550 --> 00:11.690 we click on that button. 00:11.690 --> 00:17.120 So what we will do in this video is we'll make the safe movie available here. 00:17.120 --> 00:19.700 So we have already title and description ready. 00:19.700 --> 00:20.720 So we need to save it. 00:20.720 --> 00:24.770 So what we've done before is we've used that fetch function. 00:24.770 --> 00:31.160 But this is kind of a bad way that we repeat the same thing over and over again here. 00:31.160 --> 00:37.250 So what we could do is we can actually create a service and we will use the services from now on in 00:37.250 --> 00:38.120 our application. 00:38.120 --> 00:41.300 So for doing that is I will create a new file. 00:41.300 --> 00:44.960 Or I can create a new folder first and I will do services. 00:45.320 --> 00:49.190 And here I can do new file inside services. 00:49.190 --> 00:53.390 And I will do API service JS. 00:54.050 --> 00:59.420 So basically that's a it will be a file where we will hold our service. 00:59.420 --> 01:02.240 We can have it in many different ways. 01:02.240 --> 01:05.240 We can have it like different functions, or we can have it as a class. 01:05.240 --> 01:07.820 I will show you how to do a class based services. 01:07.820 --> 01:11.690 So we will create a class and I will call it API. 01:11.780 --> 01:13.880 And I will do curly braces here. 01:13.880 --> 01:16.220 So inside we can have some methods. 01:16.220 --> 01:21.020 So let's say I would like to have a method update movie here. 01:21.020 --> 01:24.110 So that will be a method that I will be able to call. 01:24.260 --> 01:27.320 And that will take some parameters and it will execute it. 01:27.320 --> 01:32.600 So what we want to have it here, we will do similar thing as we've done here. 01:32.600 --> 01:34.700 So I will just copy that. 01:38.900 --> 01:41.930 And I will put it directly in here. 01:41.960 --> 01:46.640 So first thing first if we want to use await this needs to be async. 01:50.870 --> 01:56.210 And there's a few things that we need to do for first thing if you will use that service. 01:56.240 --> 01:58.730 We don't have that movie ID here. 01:58.730 --> 02:02.570 So what we will need to do is we'll need to send something to that function. 02:02.570 --> 02:07.550 So I will send it movie ID and it will have it here. 02:07.550 --> 02:10.610 Then we can use it in our string. 02:10.670 --> 02:15.410 Another thing is what we could do is we can start using some constants. 02:15.740 --> 02:28.640 So if I will do api url, I can take this here and cut it. 02:28.670 --> 02:29.810 And I will put it here. 02:29.810 --> 02:35.930 So basically if I'm going to repeat it over and over again and that will be the same bit here, I can 02:35.930 --> 02:37.730 easily put it like that. 02:37.730 --> 02:39.080 So if I will. 02:40.190 --> 02:42.980 And that's supposed to be dollar sign here. 02:44.750 --> 02:47.480 So that's not going to change anything. 02:47.480 --> 02:50.540 It will just put the API URL here. 02:50.540 --> 02:53.840 I can do similar things with our token. 02:53.840 --> 02:55.580 So I will have token. 02:57.920 --> 03:03.650 Token and this token here, I can get it and put it there. 03:03.650 --> 03:11.480 So instead of having that as a hardcoded, I can convert that to backticks and put it dollar sign, 03:11.480 --> 03:13.490 curly braces and token like this. 03:13.520 --> 03:20.270 Another thing that we'll need to do is whenever we update movie, we want to send a body because that 03:20.270 --> 03:22.610 that will change from call to call. 03:22.610 --> 03:26.090 And I will have body here. 03:26.090 --> 03:31.670 So instead of having that hardcoded here, I will just send the body as it is like this. 03:31.670 --> 03:35.030 So I will send an object that will be stringified and put it there. 03:35.030 --> 03:39.230 So and what we want to do is actually update movie. 03:39.230 --> 03:41.450 It's not a post it's put. 03:41.450 --> 03:43.640 So we'll have that put method here. 03:43.640 --> 03:44.630 We'll use the token. 03:44.630 --> 03:51.830 We will use that for not rate movie, but we will have movies and specific movie ID with put. 03:51.830 --> 03:54.320 So we want to update this and we'll send the body. 03:54.320 --> 03:56.600 So at the moment this is okay. 03:56.600 --> 04:01.040 And what we want to do is we have that set error here. 04:01.040 --> 04:04.340 It's not going to work because we don't have anything here. 04:04.340 --> 04:11.450 So let's say we can return null here and then we will return. 04:11.450 --> 04:13.970 If we don't have a response, we'll return null. 04:13.970 --> 04:22.700 And then if we have a response we can do return response JSON. 04:22.730 --> 04:25.760 So that's what we are going to do. 04:25.760 --> 04:29.990 I can actually remove that try catch from here as well. 04:32.660 --> 04:36.890 So to simplify everything this will be our service. 04:36.890 --> 04:39.140 So we will have a class API. 04:39.170 --> 04:44.990 We will have update movie and then we will pass movie ID and this will be put in a string. 04:44.990 --> 04:47.600 And then it will pass a body that will be stringify. 04:47.600 --> 04:51.140 And if there is no response, it will be returned as null. 04:51.140 --> 04:54.590 If we have a response that will convert to JSON and return that. 04:54.620 --> 04:57.660 So how can we use that service here. 04:57.930 --> 05:02.550 If I will go to our movie form here, this is where we are supposed to use it. 05:02.550 --> 05:06.000 So first thing what I will do is I will need to import it. 05:06.030 --> 05:09.810 So API service at the moment I don't export it. 05:09.810 --> 05:11.310 So I need to export that. 05:11.340 --> 05:16.650 And I export a class API so I can actually do default. 05:19.920 --> 05:23.550 So going back to form I can import that from here. 05:23.550 --> 05:30.060 So import API from. 05:32.220 --> 05:34.500 And that will be in. 05:36.570 --> 05:38.580 I need to go one folder up. 05:38.580 --> 05:42.810 And then inside services I have API service. 05:42.810 --> 05:46.380 So API is now imported and I can use it. 05:46.380 --> 05:49.320 But if I would have a class we need to initiate it. 05:49.320 --> 05:54.060 So we need to say API is equal to API service and then trigger that. 05:54.060 --> 05:55.560 But I could do something different. 05:55.560 --> 06:03.430 I could go to API service and I can decorate this with a static method so I can do static update movie 06:03.460 --> 06:03.850 static. 06:03.850 --> 06:05.980 That means it will be static on this class. 06:05.980 --> 06:08.080 So I don't need to initiate this class. 06:08.080 --> 06:10.210 I can directly call it on the class. 06:10.210 --> 06:19.090 So that means if I will go here and I can do API and I can do update movie directly from here. 06:19.090 --> 06:22.360 So I don't need to create that class instance here. 06:22.360 --> 06:25.330 So API update movie requires two argument. 06:25.330 --> 06:28.780 First requires movie ID we have it from here. 06:28.780 --> 06:31.180 So I will put it movie.id. 06:31.390 --> 06:37.030 And the second thing we need to do is if you go here you remember that body. 06:37.030 --> 06:39.790 So we need to send something to body to update put. 06:39.820 --> 06:41.830 And we also have it here. 06:41.830 --> 06:43.810 So we will send the object. 06:43.810 --> 06:47.080 And inside that object we want to send a title and description. 06:47.080 --> 06:50.800 So title and description like that. 06:50.830 --> 06:53.080 So basically that's a shortcut in JavaScript. 06:53.080 --> 06:57.480 So normally if you have something like this, it will look like this. 06:57.480 --> 06:59.490 So title will be a title. 06:59.490 --> 07:01.080 Description will be description. 07:01.080 --> 07:05.820 But if parameter is the same as the value, you don't have to do it twice. 07:05.820 --> 07:10.080 So you can provide like that and it will be exactly the same. 07:10.080 --> 07:14.100 So title and description will be sent to the body and it will be sent over. 07:14.100 --> 07:17.910 So I will save it now and let's see if that actually works. 07:18.690 --> 07:20.610 We'll go to our application. 07:20.700 --> 07:23.910 I can go to network and remove everything. 07:23.910 --> 07:29.430 I will select Edit Titanic and we want to have Titanic three for example. 07:29.430 --> 07:30.960 And I will click Update Movie. 07:30.960 --> 07:35.430 So on the network what we have here is we have a new request. 07:35.460 --> 07:37.920 So if I'll go headers I have a put. 07:37.950 --> 07:39.660 This is API movie one. 07:39.660 --> 07:46.410 So put this is what we sent payload description around the movie and title was the Titanic three. 07:46.410 --> 07:53.280 So basically coming from this form and then what response is basically that's a new movie. 07:53.280 --> 07:56.700 So our fetch worked with a new service. 07:56.730 --> 08:01.410 At the moment there is a few things that we still have it hardcoded here. 08:01.410 --> 08:04.830 So this is the API and token is hardcoded. 08:04.830 --> 08:11.640 And but this we could move it all that to make more than ten lines of code we can move it. 08:11.640 --> 08:15.630 And it's not gonna pollute our components here. 08:15.630 --> 08:19.770 So we'll use the service as it is much more clearer what we are doing here. 08:19.770 --> 08:22.350 So API service you can actually name it. 08:22.350 --> 08:26.340 So for something different like an API service to. 08:26.400 --> 08:28.110 But I will leave it as an API. 08:28.140 --> 08:32.850 But but the thing is it is much more simpler to use it inside component. 08:32.850 --> 08:35.190 Then it is something like that. 08:35.190 --> 08:39.120 So you see we had a lot of different a lot of code here. 08:39.120 --> 08:46.860 We can move that code to a service and we can share some of the the reusable things in there like headers. 08:46.860 --> 08:52.740 We can also have a function that will get the headers automatically for us if we repeat it from service 08:52.740 --> 08:53.580 to service.