WEBVTT 00:00.770 --> 00:01.370 Okay. 00:01.400 --> 00:05.990 At the moment, what we have is we have a fixed list of movies movie one and movie two. 00:06.020 --> 00:13.160 This is what we done in the previous video, and we've done it like hard coded reference here as a simple 00:13.160 --> 00:13.640 strings. 00:13.640 --> 00:18.590 What we want to do is we want to remove that from our movie list component. 00:18.590 --> 00:23.600 And what we want to do is we want to fetch the list of movies from our API. 00:23.600 --> 00:25.280 And how can we do that? 00:25.280 --> 00:30.050 If first thing first, we need to have something in our component to start fetching. 00:30.050 --> 00:34.910 So whatever we render that component, we want to start fetching the list of movies. 00:34.910 --> 00:38.210 And we can do it with another hook that is coming from react. 00:38.210 --> 00:40.520 And I will use use effect. 00:41.540 --> 00:44.420 And here so we will import use effect from here. 00:44.420 --> 00:46.940 And we can use it inside our component. 00:46.970 --> 00:51.590 So use effect and that will require two arguments. 00:51.620 --> 00:56.480 First is a function we can put an arrow function here like that. 00:56.480 --> 01:04.680 And second after that curly braces we can specify what variables change will trigger that use effect 01:04.680 --> 01:05.160 at the moment. 01:05.160 --> 01:05.490 We can. 01:05.520 --> 01:07.380 We can do empty array. 01:07.410 --> 01:11.790 That means it will trigger only once when this component will render. 01:11.790 --> 01:15.330 So empty array will render it only once. 01:15.480 --> 01:23.340 So what we can put here in the Useeffect is basically we can a get the data from from the API from here. 01:23.340 --> 01:24.690 How can we do that? 01:24.690 --> 01:26.790 There is a few ways we can do it. 01:26.820 --> 01:34.170 We could use library like access, or we could use a fetch function that is actually built in JavaScript. 01:34.170 --> 01:38.580 So what we can do is we can use that function here. 01:38.580 --> 01:39.360 So fetch. 01:39.360 --> 01:46.620 And basically what we need to provide in that function is a URL that we will get that data from. 01:46.620 --> 01:54.240 So if we will go here and I will go this is my admin here, but this is the URL that we are running 01:54.240 --> 01:54.870 that with. 01:54.900 --> 02:02.220 So if I will put it here and then API slash movies, this is the URL that we want to get it from. 02:02.220 --> 02:04.620 Another argument will be a option. 02:04.620 --> 02:07.330 So if I will open the object here. 02:07.360 --> 02:09.760 Curly braces I can specify some options. 02:09.760 --> 02:12.970 First thing first, what I need to specify is a method. 02:12.970 --> 02:20.770 So if a method like this and our method we want to use get. 02:20.830 --> 02:25.030 Basically we are using the get method to get the list of the movies. 02:25.060 --> 02:27.220 Another thing is headers. 02:27.250 --> 02:32.590 Headers will create another object here with a curly braces. 02:32.590 --> 02:34.060 And we provide two things. 02:34.060 --> 02:39.130 So first will be content type. 02:41.320 --> 02:46.600 And we will say its application slash JSON. 02:46.600 --> 02:50.770 So basically that's what we are requesting from the our API. 02:50.770 --> 02:58.570 And another thing what we need to do is we need to how to authorization like that. 02:58.630 --> 03:06.100 And we need to provide a token and put a token here at the moment we don't have a login yet. 03:06.100 --> 03:12.760 So we don't we can't really provide the token here, but what we could do is we could go to our Django, 03:12.790 --> 03:18.850 we can go to the tokens, I can select this token and this token, and I can copy that from here. 03:18.850 --> 03:21.670 And I can go back here and hardcode it here. 03:21.670 --> 03:24.490 So token slash and then actual token. 03:24.490 --> 03:27.310 We will remove it with something more useful later on. 03:27.310 --> 03:29.380 But at the moment it will do. 03:29.410 --> 03:32.650 So we have that fetched basically that will fetch it. 03:32.650 --> 03:34.330 But we want to store it. 03:34.360 --> 03:38.350 Whatever we will get from there, we can store it in a variable. 03:38.380 --> 03:41.260 So I will do constant and I will do result. 03:42.490 --> 03:45.130 So basically we will fetch it there. 03:45.280 --> 03:49.930 The good practice for fetching things like this is actually a sync. 03:49.930 --> 03:54.520 So how can we do it async if I will do here await. 03:54.610 --> 03:59.380 It's not going to allow me because I need to have like a async function here. 03:59.380 --> 04:05.080 So what we need to do, we could have a thing there. 04:05.080 --> 04:12.050 But the good practice for use effect will be to use our function inside a function. 04:12.050 --> 04:13.580 So we have use effect here. 04:13.580 --> 04:22.460 And we will use a function which will be constant patch move it. 04:23.270 --> 04:27.650 And that's going to be our uh that's going to be our function here. 04:27.650 --> 04:30.650 So I will create a function here. 04:30.650 --> 04:33.530 And all of it I will put it there. 04:39.500 --> 04:39.980 Like that. 04:39.980 --> 04:45.140 So we have a function that is fetch movies and we can call it from here. 04:45.140 --> 04:52.370 So basically inside our useeffect we will specify the function arrow function. 04:52.370 --> 04:53.900 And we will call it from here. 04:53.900 --> 05:00.230 Inside that function we will actually can use the weight because we can decorate this with async. 05:00.230 --> 05:06.620 So that will give us an option to wait for a result and respond on that results here. 05:06.620 --> 05:11.210 So what we can do is we specify it here, we trigger that here. 05:11.210 --> 05:14.970 And then this will be uh this will be triggered inside. 05:14.970 --> 05:19.230 So once we have that result fetch we can actually check it. 05:19.230 --> 05:28.950 So if result result okay we go to check the status as well and so on. 05:28.950 --> 05:34.050 Then we will do something we can say like if we have result then do that all other thing. 05:34.260 --> 05:37.290 What we can say is like if we don't have a result okay. 05:37.290 --> 05:42.840 So if we it's not going to go come back from our server, then we will do something. 05:42.840 --> 05:47.100 So what we want to do basically we could create another use state. 05:47.100 --> 05:52.620 So I will duplicate this line and I will call it error and set error. 05:55.770 --> 05:57.600 Here and that will be a state. 05:57.600 --> 05:59.520 And at the moment it will be nothing. 05:59.520 --> 06:01.920 So it will be let's say null. 06:01.920 --> 06:03.240 So we don't have an error. 06:03.240 --> 06:09.630 But if I'm not going to have a result from our fetch, what I can do is I can use set error and I will 06:09.630 --> 06:13.290 say error 06:15.240 --> 06:17.830 getting Movies, for example, like this. 06:17.830 --> 06:22.990 So that means we will have that error setup if we can't get them the movies from there. 06:22.990 --> 06:28.270 And basically what what I could do here is if. 06:30.220 --> 06:31.150 Error. 06:33.580 --> 06:34.420 Return. 06:37.090 --> 06:37.960 H1. 06:40.540 --> 06:43.360 And in curly braces error here. 06:43.360 --> 06:50.530 So what I'm saying here is if I have an error at the moment by default I don't have anything here. 06:50.530 --> 06:53.230 But if I don't get the result I will set that error. 06:53.230 --> 06:55.060 So it's not going to be null. 06:55.060 --> 06:56.830 So it will be trigger this one. 06:56.830 --> 07:01.300 If I have an error, then return h1 and specify what's in the error. 07:01.300 --> 07:04.180 I set it as a string like this a here. 07:04.180 --> 07:10.240 And this is not going to be trigger at all because we it will be rendered from top to bottom. 07:10.240 --> 07:13.900 So if that will trigger, it will be returned and this will never be returned. 07:13.900 --> 07:19.600 So we kind of cover the error here if we are not going to have anything from the database. 07:19.930 --> 07:21.370 And so this is done. 07:21.370 --> 07:23.440 We could also do a loading as well. 07:23.440 --> 07:26.290 So we go to say like before we'll fetch it. 07:26.320 --> 07:28.210 We'll have another state for loading. 07:28.210 --> 07:29.920 And we'll set the loading to true. 07:29.950 --> 07:30.730 Set to false. 07:30.760 --> 07:32.530 And we can have some spinner as well. 07:32.560 --> 07:34.360 But for now it's good. 07:34.360 --> 07:41.380 And what we can do now is now we have our movies here. 07:41.380 --> 07:44.800 So let's say const response. 07:45.910 --> 07:51.370 And that response will be the result. 07:51.400 --> 07:53.320 So we can actually convert. 07:53.320 --> 07:55.420 We need to convert that to JSON. 07:55.420 --> 07:59.110 So I will await result JSON. 08:00.640 --> 08:03.220 Or actually we could do it in other way. 08:03.220 --> 08:06.340 So if I will this will be my response. 08:06.340 --> 08:07.510 And I will check the response. 08:07.510 --> 08:11.050 This will be a response from the server and this will be the result. 08:11.050 --> 08:15.610 So I will fetch it and I will assign it to response. 08:15.640 --> 08:25.640 I will check if response is okay and then my result will be whatever coming from that response JSON. 08:25.640 --> 08:28.790 So I will have it in my variable here. 08:28.820 --> 08:34.880 So once I have it in that variable I can actually set it for for my movie. 08:34.910 --> 08:37.640 So I can use my use hook method here. 08:37.640 --> 08:41.120 And I can do set movies and result. 08:41.360 --> 08:50.870 So in that case what we are doing here is if we have this response here, we can actually do return. 08:51.650 --> 08:55.100 So we are not going to progress anymore. 08:55.100 --> 08:58.850 So if we don't have a response we will set the error and return. 08:58.850 --> 09:03.560 This is never going to be set up as a set movies, so it will be always empty. 09:03.560 --> 09:07.190 And also if we have don't have a response this will be triggered. 09:07.190 --> 09:15.800 So if I will go save now, if I will go back here to our application and I have error getting movies. 09:15.800 --> 09:21.980 So this is kind of working fine because it will tell us that we can't get the movie and we will see 09:21.980 --> 09:24.350 why we have that error in the next video.