WEBVTT 00:02.090 --> 00:08.870 Okay, so what we've done in the previous video is to we implement our new hook and we use it here, 00:08.870 --> 00:11.600 but we need to change the way it is handled. 00:11.600 --> 00:14.060 So at the moment what we have is we have a data. 00:14.060 --> 00:17.600 We don't need to keep that this name as a data. 00:17.840 --> 00:22.940 So what we can do is we can actually check it if we have that working. 00:22.940 --> 00:28.130 So if I will go console and I will clear everything we need to login first. 00:30.230 --> 00:33.320 And here I don't see a list of movies. 00:33.320 --> 00:37.280 And but if I will go to network here and I can see. 00:37.280 --> 00:42.110 So let's refresh it and I will refresh everything here. 00:42.110 --> 00:46.190 So you can see here movies are actually loaded and use it. 00:46.190 --> 00:50.180 So basically this is coming now from our hook. 00:50.210 --> 00:53.780 So what we have here is we have that in data. 00:53.810 --> 01:01.460 So what I can say is we we still have a few methods to set the movie like we, we do it here and here 01:01.460 --> 01:01.970 and now. 01:01.970 --> 01:05.540 I don't want to refactor everything, but we can actually have a hack. 01:05.540 --> 01:08.600 So this will give us all the all the data here. 01:08.600 --> 01:11.600 But we can use that data to set our movies. 01:11.840 --> 01:17.630 Or you could change the name this to movies, but since we have a lot of methods with the movies, I 01:17.630 --> 01:18.890 can I can do it this way. 01:18.890 --> 01:20.330 So if I will have. 01:22.370 --> 01:25.610 Use effect that will be based on the data. 01:25.610 --> 01:32.750 So whatever the data will change, what I will do is I will set the movies to that data. 01:32.750 --> 01:36.560 So basically one effect will look for this data. 01:36.560 --> 01:39.710 And if we have that data it will put it there to the movie. 01:39.710 --> 01:42.890 So all the rest of the things will work the same as it was. 01:42.890 --> 01:46.940 We don't need to have this one because we already have that based on data. 01:46.970 --> 01:51.500 You could call this movies as well, so it will work a similar way. 01:51.500 --> 01:55.340 But we also have that loading and we have that error. 01:55.340 --> 01:58.460 So you see what we've done here. 01:58.460 --> 01:59.610 We already have. 01:59.640 --> 02:03.030 If arrow returned this one, we can also do similar thing. 02:03.030 --> 02:12.510 So we can say if loading you can say let's say H1 loading. 02:14.790 --> 02:15.870 Or I'll save it. 02:17.250 --> 02:20.850 And then we have some problems here okay. 02:20.880 --> 02:22.530 If I refresh it everything is fine. 02:22.530 --> 02:29.040 But you, you could see maybe for a split of a second there and it was loading. 02:29.070 --> 02:31.740 So what I could do is maybe I can simulate it. 02:31.770 --> 02:35.820 So if I go here we can go to use fetch. 02:35.820 --> 02:42.270 And before we'll actually do this we could maybe create a fake kind of promise. 02:42.270 --> 02:47.040 So I can do await and we'll create a new promise. 02:48.420 --> 02:50.610 And what I will have is resolve. 02:51.450 --> 02:52.980 It's going to be an arrow function. 02:52.980 --> 02:57.450 And then we will use setTimeout of. 02:57.450 --> 03:00.600 We'll Will passing do pass the resolve there? 03:00.600 --> 03:02.490 And the second one is milliseconds. 03:02.490 --> 03:08.310 So let's say we want to have three seconds of this. 03:08.310 --> 03:11.940 So basically that will kind of create a promise. 03:12.030 --> 03:15.090 It will set timeout for 300 milliseconds. 03:15.090 --> 03:17.370 And then it will resolve the promise. 03:17.370 --> 03:18.390 This will be await. 03:18.390 --> 03:21.000 And then it will move to this one. 03:21.000 --> 03:25.410 So if I will go here you can if I will refresh it. 03:25.410 --> 03:30.090 You see you have that loading here and then you have the, the movie. 03:30.090 --> 03:39.780 So what happened here is that we if we go to our movie list, if you see what is happening when we have 03:39.780 --> 03:42.870 a loading then we display that loading. 03:42.870 --> 03:45.390 Nothing is here because this will be returned. 03:45.390 --> 03:52.230 If the loading is false, then we will check if the error is there was no error and then it will go 03:52.230 --> 03:52.740 to this one. 03:52.740 --> 03:53.700 If there is no error. 03:53.730 --> 04:00.610 And the same way we will test that with loading we could say movies something, something. 04:00.610 --> 04:11.380 So this will be obviously wrong URL and if I refresh it, we have a loading and we have 404. 04:11.410 --> 04:14.770 Basically we could handle this in a different way. 04:14.770 --> 04:20.200 So if I'll go use fetch then this was there was not even a response. 04:20.230 --> 04:24.340 So what we could do is we can have this in try. 04:24.370 --> 04:26.110 We've done that before. 04:29.710 --> 04:32.320 So I will do everything in try. 04:37.600 --> 04:38.950 I will do cat. 04:41.230 --> 04:41.740 Here. 04:41.770 --> 04:46.330 And basically we'll catch an error like that. 04:46.570 --> 04:53.470 And then what we can also do finally we can actually split it a little bit different. 04:53.470 --> 04:56.590 So we will do set loading false in. 04:56.620 --> 04:57.070 Finally. 04:57.070 --> 05:02.410 So whatever will finish our block and that will be trigger every single time. 05:02.410 --> 05:05.860 And then we can have that set error that we had it here. 05:05.890 --> 05:08.710 I will copy it, cut this and I will put it here. 05:08.710 --> 05:11.980 So if we catch an error we will set that error. 05:11.980 --> 05:18.310 But in here if we don't have a response or something will be kind of bad here, then what we can do 05:18.310 --> 05:21.850 is we can throw new error. 05:23.860 --> 05:29.680 And we can say maybe error getting data from here. 05:29.680 --> 05:33.340 And then we'll set that as an error from here. 05:33.370 --> 05:37.780 So it will be more like a future proof that we will have try. 05:37.810 --> 05:39.010 Then we will do this. 05:39.040 --> 05:42.610 If we don't have a response here then we will throw that error. 05:42.610 --> 05:43.720 It will be catch here. 05:43.750 --> 05:44.830 We'll set it here. 05:44.830 --> 05:47.890 Finally, at the very end, we will set out everything to false. 05:47.890 --> 05:53.020 So I will save it now and see if we actually refresh it. 05:53.560 --> 05:54.790 So loading. 05:57.040 --> 06:05.980 So basically what I've done is I draw an arrow here, but and I throw this as an, as a string. 06:05.980 --> 06:08.530 But what I have to do this is coming as an object. 06:08.530 --> 06:13.210 So I will do an error message like this. 06:13.210 --> 06:17.710 So if I will go back here, refresh it, it's loading. 06:19.300 --> 06:21.910 And then I have error getting data you see. 06:21.940 --> 06:25.870 So this is how we done it I can easily go here. 06:25.870 --> 06:30.400 And this throws an error I catch it here and set it there. 06:30.400 --> 06:34.120 And basically if I go here this is an arrow. 06:34.150 --> 06:37.300 We had our loading and everything is fine I will see this. 06:37.300 --> 06:44.230 And then if I will correct this to movies it should it should go back. 06:45.100 --> 06:45.700 No problem. 06:45.700 --> 06:46.750 So it's loading. 06:46.780 --> 06:48.310 And I have list of movies. 06:48.340 --> 06:51.220 So this is how we create our own hooks. 06:51.220 --> 06:57.650 What that will give us is we have an opportunity to create use fetch more reusable. 06:57.650 --> 07:02.060 We don't have to repeat the same thing over and over again as we've done it here. 07:02.060 --> 07:09.560 We have an option to actually fetch the cookies directly from here and to do a lot of automation here. 07:09.560 --> 07:12.380 What you could do is you can pass more options here. 07:12.380 --> 07:18.890 So we at the moment we use only URL, but you can pass also a method that you want to use. 07:18.890 --> 07:22.760 You can pass also a body if you need it and so on. 07:22.760 --> 07:28.730 So that could be a very general kind of hook that you will use it for anything that you will need. 07:28.730 --> 07:30.800 And this is how you do the cook. 07:30.830 --> 07:33.950 And that's kind of conclude our this this section. 07:33.950 --> 07:41.750 So we have a fully functional application with a full route, a full user authentication and how to 07:41.780 --> 07:46.310 handle roads, how to handle contacts, how to do the styling. 07:46.310 --> 07:52.730 And at this point you should know how to do any application using your API.