WEBVTT 00:01.490 --> 00:05.720 Okay, our crowd is almost ready, but we can clean up some of the things. 00:05.720 --> 00:07.340 We have it here. 00:07.340 --> 00:16.130 So let's go back here and we you see that we still have that old method fetch here. 00:16.130 --> 00:20.270 So we could actually fetch the movie using our API service. 00:20.270 --> 00:22.640 So we can have that in the service. 00:22.640 --> 00:25.070 And it's not going to pollute that component here. 00:25.100 --> 00:26.420 So let's do that here. 00:27.320 --> 00:36.770 So I will go here and I will create at the very beginning I will duplicate this and I will have fetch 00:36.800 --> 00:43.910 movies where we are not going to provide anything here because we will fetch all the movies and that 00:43.910 --> 00:48.350 will be get and then we will have method movies here. 00:48.680 --> 00:56.210 So we don't need to provide any body and then we will respond null and response.json if that will be 00:56.210 --> 00:56.810 available. 00:56.810 --> 00:58.880 So we have that new method fetch movies. 00:58.880 --> 01:01.520 And I can go back to movie list here. 01:01.520 --> 01:04.910 And we used this before so we had fed. 01:04.910 --> 01:06.740 So basically we've done that. 01:06.740 --> 01:13.700 Instead of having that here, I could go back here and remove everything I will do. 01:13.730 --> 01:21.410 Constant response is equal to API and I will click enter. 01:21.410 --> 01:22.910 So it should be imported. 01:22.910 --> 01:24.860 It is imported from the services. 01:24.890 --> 01:26.870 And then I can do fetch. 01:27.110 --> 01:28.460 Move it like this. 01:28.490 --> 01:31.220 So basically whatever I fetch it I will have it in response. 01:31.220 --> 01:42.080 And if I have that response then what I can do is I can do set movies like that and I will use that 01:42.080 --> 01:43.490 response to set the movies. 01:43.490 --> 01:49.070 So if I will save it now, what I will do is cannot read properties of null. 01:49.070 --> 01:51.620 I think it's coming back this error. 01:51.620 --> 01:53.000 So from the movie list. 01:53.000 --> 01:59.330 But if I will clean this and refresh it, I still have movies. 01:59.330 --> 02:00.350 Map is not a function. 02:00.350 --> 02:09.320 So what we need to do is so what I have to do is I need to create a function so I will have a function. 02:11.450 --> 02:18.830 Fetch a list of movies and that's going to be an arrow function. 02:20.810 --> 02:23.960 And what we can do is I will put it here. 02:25.280 --> 02:27.440 I will call that function here. 02:28.220 --> 02:30.530 And in that way I can await here. 02:31.730 --> 02:34.370 And I can put async version here. 02:34.400 --> 02:39.530 So basically I will have that function that I will trigger from here that will be async will await. 02:39.530 --> 02:41.540 The response is not going to go back as a promise. 02:41.570 --> 02:43.100 It will come back as a JSON. 02:43.100 --> 02:49.370 So if I will come back here and I have it to my list of movies, so it's coming back to normal as well, 02:49.550 --> 02:51.110 the same way as it was before. 02:51.110 --> 02:55.490 But now it's a kind of much more cleaner. 02:55.520 --> 03:01.010 And this way it's not going to polluting that much of our component to use it this way. 03:01.040 --> 03:06.140 So what I could do is I could also go back to movie details. 03:06.170 --> 03:14.900 This is where we fetch our and we have rate movies and we also Fetch our movie ID, so this will be 03:14.900 --> 03:17.510 very similar to what we've done there. 03:17.510 --> 03:19.940 So I will go back to API service. 03:19.970 --> 03:32.240 We'll have new method fetch movie or I can say get movie maybe so get movie and then we'll need to provide 03:32.240 --> 03:38.270 movie ID and then it will be here. 03:38.300 --> 03:40.460 Dollar sign curly braces slash. 03:40.490 --> 03:42.890 And then it's going to be movie ID here. 03:42.890 --> 03:46.190 So we'll have get and all the rest of the things is the same. 03:46.190 --> 03:48.530 But we need to provide a movie ID here. 03:48.530 --> 03:53.780 So going back to movie details so I can go back to movie list here. 03:53.780 --> 03:58.160 And when we use this one sorry, we've used this one here. 03:58.160 --> 03:59.300 I can copy that. 03:59.300 --> 04:05.900 And I can go to our movie details and instead of get new movie as we had it there, I will just take 04:05.900 --> 04:08.870 this all and replace it with something similar. 04:08.870 --> 04:13.550 So fetch movie I will say fetch movie. 04:13.820 --> 04:20.610 And so I will have this function and instead of patching movie I will have get. 04:22.950 --> 04:23.790 Movie. 04:23.820 --> 04:27.000 That's the method we had here in the service. 04:27.000 --> 04:29.520 So get movie is a new method there. 04:29.520 --> 04:30.480 So get movie. 04:30.480 --> 04:38.040 I need to provide movie ID so I have that movie and I have ID basically we don't actually need right 04:38.040 --> 04:40.320 here in that function. 04:40.350 --> 04:41.340 We'll get new movie. 04:41.370 --> 04:44.490 We'll just get it whatever we extend the the right. 04:44.490 --> 04:49.470 So I will save it and let's go back and see if we have API is not defined. 04:49.500 --> 04:53.070 So what we need to do is we need to import that API. 04:53.100 --> 04:56.310 And so import API. 04:58.560 --> 05:00.000 From services. 05:00.000 --> 05:03.420 So once it is here I should come back here. 05:03.420 --> 05:04.110 Refresh it. 05:04.110 --> 05:05.130 We still have some problems. 05:05.130 --> 05:06.900 So movie details are set. 05:06.930 --> 05:08.550 Movies is not defined. 05:10.650 --> 05:13.140 Now of course because I don't have a set movie. 05:13.170 --> 05:17.460 What I'm having here is update movie. 05:17.460 --> 05:20.010 That's what I supposed to call from here. 05:20.550 --> 05:23.460 So if I will go here and I have it back again. 05:23.460 --> 05:27.630 So if I will go Titanic and I will write it here it is updated. 05:27.630 --> 05:30.210 So we successfully updated this one. 05:30.210 --> 05:33.780 And we have a last one that we can put in the service. 05:33.780 --> 05:36.390 And this is basically a great movie. 05:36.390 --> 05:40.890 So let's go back to the service and I will duplicate this again. 05:42.090 --> 05:44.100 And I will have write movie. 05:46.050 --> 05:48.570 And then we need to also have body. 05:49.260 --> 05:50.790 We could have it stars or something. 05:50.790 --> 05:59.070 But and so if you go here what we've done is we send the movie ID rate movie is the method that we use 05:59.070 --> 06:00.540 and we send this. 06:00.540 --> 06:09.270 So basically I will go back here and we'll have movie ID slash rate movie slash and then it will will 06:09.270 --> 06:14.550 be post and the token will be okay. 06:14.550 --> 06:17.160 But what we need to do is we need to provide that. 06:17.160 --> 06:21.540 If I will close this for now and movie details, I will close this one. 06:21.540 --> 06:25.230 So we need to put that body there. 06:25.230 --> 06:31.650 So I will go here and the body should be here, but we can actually use the body from here. 06:31.680 --> 06:34.380 So maybe that will be like that. 06:34.410 --> 06:37.860 So we have a method of right movie will pass, movie ID will pass. 06:37.860 --> 06:40.290 The body will use the post for this method. 06:40.290 --> 06:42.870 And then it will also provide the body. 06:42.900 --> 06:44.490 So we have a new method right. 06:44.520 --> 06:45.120 Movie. 06:45.120 --> 06:48.990 And if I will go back here what we can do is we can replace it. 06:48.990 --> 06:57.690 So in the same way as we've done this, I will just make some space here and we will put it inside here. 06:57.690 --> 07:06.240 So instead of this I will have great movie and I will trigger that here. 07:06.240 --> 07:12.480 And then what we need to do is we need to trigger right movie on the our API. 07:12.510 --> 07:16.080 We need to provide movie ID and also we need to provide body. 07:16.080 --> 07:18.750 Body basically was what we had here. 07:18.780 --> 07:21.570 So we'll copy that here and I will put it there. 07:21.570 --> 07:28.350 And then once we had that so successfully Updated. 07:28.350 --> 07:33.900 I can do get new movie so I can trigger this. 07:34.380 --> 07:40.230 So basically we replace whatever we had it there with the one that we have in our services. 07:40.230 --> 07:45.570 So lets me clean this now and remove the old method. 07:45.570 --> 07:49.890 So basically all of it now is a move to API services. 07:49.890 --> 07:52.020 And you see the components are much clearer. 07:52.050 --> 07:53.820 So every set of services is here. 07:53.820 --> 08:00.180 And that's kind of give us an option also for optimization where we repeat something we can actually 08:00.180 --> 08:01.500 do it as well here. 08:01.500 --> 08:04.680 So I will go back here and make sure everything is working fine. 08:04.680 --> 08:07.140 So we'll go to Titanic I can do this thing. 08:07.140 --> 08:08.010 I can rate it. 08:08.040 --> 08:08.910 It is updated. 08:08.910 --> 08:11.280 I can change it for update. 08:11.280 --> 08:17.400 I can update it, then I can go here and then I can update this one. 08:17.400 --> 08:22.260 I can create a new one and create movie. 08:22.260 --> 08:24.240 And I can also delete it from there. 08:24.240 --> 08:27.120 So everything is working as it was, but now it's much cleaner. 08:27.120 --> 08:31.110 So in the next video what we will do is we'll take a look at the routers.