WEBVTT 00:01.220 --> 00:01.700 Okay. 00:01.730 --> 00:08.000 There is one more thing that I would like to show you before we'll actually conclude this chapter is 00:08.030 --> 00:09.020 our services. 00:09.020 --> 00:16.700 So if we go to our our API services, you see we still repeat a lot of these things over and over again. 00:16.700 --> 00:20.420 We have the same thing here almost in every single method. 00:20.690 --> 00:26.660 And there are many ways how we can actually reuse it, because we could have like possibly one function 00:26.660 --> 00:33.770 that will require a body token and then a method and a URL, and it will do all of all of that for us, 00:33.770 --> 00:36.650 because all of the the methods are similar in a way. 00:36.650 --> 00:41.270 So if we provide this, then we could construct any API call like this. 00:41.270 --> 00:43.880 So we don't need to have multiple calls. 00:43.880 --> 00:50.480 But what I want to do is I want to use the opportunity to show you how to write our own hooks. 00:50.480 --> 00:53.930 We use a hooks a lot in this tutorial. 00:53.930 --> 00:58.550 So we use use state, use effect, use cookies and use context and so on. 00:58.550 --> 01:05.720 So basically I would like to show you how to create your own hook, and that will kind of let you understand 01:05.720 --> 01:07.850 it, how that works in the background. 01:07.850 --> 01:11.090 So let's create our own hook in this video. 01:11.120 --> 01:22.310 What I will do is maybe in the services I will have create new file and I will do name it use fetch. 01:22.310 --> 01:26.570 So basically what we will do is we will have a hook. 01:26.570 --> 01:27.680 That is use fetch. 01:27.680 --> 01:32.720 And convention needs to to have the name use as you have it here. 01:32.720 --> 01:35.510 So use cookies, use state use effect and so on. 01:35.540 --> 01:36.350 Use context. 01:36.350 --> 01:38.330 So that's the convention for naming. 01:38.330 --> 01:41.420 And what we need to do is we need to create a normal function. 01:41.420 --> 01:44.570 So it will be very similar to what we've done for our component. 01:44.600 --> 01:46.310 So I will say use fetch. 01:46.880 --> 01:49.880 And that's going to be on our function here. 01:50.180 --> 01:53.120 And there is nothing really unique about this. 01:53.150 --> 01:57.530 What I can do is I can export use fetch. 01:59.840 --> 02:01.190 I can do default. 02:03.260 --> 02:04.690 Export default usefetch. 02:04.720 --> 02:09.610 So basically what we have a function that we exported here. 02:09.610 --> 02:15.820 What what that will give me is we can actually use whatever is coming in the react. 02:15.820 --> 02:22.240 So I can have you state here and we'll need it and use affect. 02:22.240 --> 02:25.270 It will make a little bit more sense in a in a second. 02:25.270 --> 02:28.900 So we can use whatever it's coming in react. 02:28.900 --> 02:34.690 And what we want to do is we want to return something from that from that function. 02:34.690 --> 02:37.840 But first let's create some data inside our function. 02:37.840 --> 02:39.610 So I will do constant. 02:40.870 --> 02:44.680 Let's say we'll have a data and use. 02:46.990 --> 02:47.860 Set data. 02:47.860 --> 02:50.140 That's that's going to be a way to set it up. 02:50.140 --> 02:52.450 And you will use date. 02:52.450 --> 02:53.800 And we've done it before. 02:53.800 --> 02:56.140 And at start it will be null. 02:56.170 --> 02:58.510 What I want to do is I want to have two more. 02:58.540 --> 03:03.250 So one I will have a for a loading and set loading. 03:05.350 --> 03:06.850 And that's going to be true. 03:06.850 --> 03:09.820 So by default we will have like loading true. 03:09.850 --> 03:13.600 And then we will have error and set error. 03:16.240 --> 03:17.320 And it's going to be null. 03:17.320 --> 03:20.050 So basically this is what we will have in our function. 03:20.050 --> 03:23.950 We will have data and we will have a loading state. 03:23.950 --> 03:25.450 And then we'll have error. 03:25.480 --> 03:30.520 So what we need to do is at the end of this we will return. 03:31.420 --> 03:38.860 And I can return data loading and error. 03:39.460 --> 03:47.260 So this is basically how hooks works I have something here and I will return it like this. 03:47.920 --> 03:50.380 And I have a misspelled this loading. 03:50.380 --> 03:54.100 So that's what I have I don't do anything much here. 03:54.100 --> 04:00.880 But what I can do is I can go to any of my components and let's say I would like to have we have the 04:00.880 --> 04:06.940 way here to fetch the list of the movies, fetch list of the movies, and let's replace this functionality 04:06.940 --> 04:11.350 with or what I have here with something our own, with our own hooks. 04:11.350 --> 04:14.230 So if I want to use the hook, I can import. 04:14.260 --> 04:15.370 Import. 04:17.410 --> 04:20.860 And I will do use fetch from services. 04:20.860 --> 04:21.400 Use fetch. 04:21.400 --> 04:24.190 You see this is similar to what we have here. 04:24.190 --> 04:28.300 I export the default so I don't have to have that curly braces. 04:28.300 --> 04:29.920 But I have that use fetch. 04:29.920 --> 04:36.880 So what I can do here is I can do constant and curly braces the same as I have done it here. 04:36.880 --> 04:47.230 You see I could do here data loading and error. 04:47.590 --> 04:50.590 And that's going to be my use fetch. 04:51.460 --> 04:54.670 So this is at the moment we have some collision here. 04:54.670 --> 04:58.540 But I will just comment it out and that's what I have. 04:58.570 --> 05:06.840 So if I will use fetch this is my own hook basically that's what's coming back from here like that and 05:06.840 --> 05:07.950 that will be available. 05:07.950 --> 05:10.680 You can also do the array here if you like. 05:10.770 --> 05:13.680 If you prefer array kind of style, it's fine. 05:14.130 --> 05:15.060 It doesn't really matter. 05:15.060 --> 05:20.010 So we have that three values data loading and error that we use our hook. 05:20.040 --> 05:23.610 And we can actually use it here in our fetch. 05:23.610 --> 05:24.480 So let's do that. 05:24.480 --> 05:28.740 So if I will go into fetch we need to do something with that. 05:28.740 --> 05:30.750 So we'll use use effect. 05:30.750 --> 05:32.880 We've done it before in this tutorial. 05:32.880 --> 05:34.080 So use effect. 05:34.260 --> 05:38.850 And what I will do is I will have an arrow function as a first argument. 05:38.850 --> 05:42.120 And the second argument will be a at the moment. 05:42.120 --> 05:44.610 So we can have it as an empty array. 05:44.610 --> 05:47.910 So what should I actually do there. 05:47.940 --> 05:51.450 We can do similar thing as we've done it here. 05:51.450 --> 05:54.240 So let's say we'll have that. 05:54.240 --> 05:58.290 I will copy that and I can put it here. 05:58.380 --> 06:01.620 So we will have a function here. 06:01.620 --> 06:03.030 We can do fetch. 06:06.720 --> 06:07.980 Let's say fetch data. 06:08.010 --> 06:11.600 It will be more generic name, it will be a sunk function. 06:11.600 --> 06:13.040 We'll call it from here. 06:14.030 --> 06:18.380 And what we'll have here we can call API. 06:18.410 --> 06:23.330 But let's say we want to use the this one. 06:23.330 --> 06:31.550 So if I will go fetch movies I'll just copy that and I will put it here in the fetch. 06:34.310 --> 06:37.190 We'll need to have that say API URL. 06:38.900 --> 06:42.560 So I'll copy that and I will put it here. 06:43.430 --> 06:47.420 We can either put it here or outside. 06:47.420 --> 06:48.290 It doesn't really matter. 06:48.290 --> 06:49.610 So we will have that. 06:49.610 --> 06:51.290 So we'll have fetch data. 06:51.290 --> 06:53.510 We will fetch whatever URL. 06:53.510 --> 07:01.430 And then this bit and this bit actually if we want to have that fetch reusable what we can do is we 07:01.430 --> 07:02.930 can actually provide it here. 07:02.930 --> 07:10.910 So if I will do URL and that will be sent to this hook, then I can use that URL bit. 07:10.910 --> 07:15.590 Instead of that, I will take this bit here and I will cut it. 07:15.590 --> 07:21.560 And in our component when we actually use our fetch here, I will put it like this. 07:21.560 --> 07:25.280 So this is what we will send first to our use fetch. 07:25.310 --> 07:27.590 And that will be as a URL. 07:27.590 --> 07:33.710 And that URL will put it here dollar sign curly braces and inside URL. 07:33.710 --> 07:37.340 So basically this will be a static part of it. 07:37.340 --> 07:41.240 And this will be whatever we will send here in our fetch. 07:41.240 --> 07:42.530 And then we have a get. 07:42.560 --> 07:44.870 Then we will have a token token here. 07:44.870 --> 07:48.590 What we could do is we can basically use this. 07:48.590 --> 07:53.720 So we can as this is the normal function, we can use cookies here. 07:53.720 --> 07:55.850 So we can say this is cookie. 07:55.850 --> 07:59.630 And we will need to also import use cookies. 08:02.360 --> 08:05.090 And I can say this is a cookie. 08:08.420 --> 08:14.920 Mr. token so basically the cookie will be loaded directly from here, so we don't need to pass it. 08:14.950 --> 08:18.070 Then we could to make it reusable. 08:18.070 --> 08:21.280 We could have like a body and we could have a method here. 08:21.280 --> 08:22.840 But I will keep it very simple. 08:22.840 --> 08:25.390 So this is what we will have. 08:25.420 --> 08:34.030 But if I don't return anything here or I don't want to return anything here, what I can do is we can 08:34.030 --> 08:35.980 actually set, set an error here. 08:35.980 --> 08:38.140 So I can do set an error. 08:43.570 --> 08:45.880 Error getting data. 08:47.080 --> 08:51.760 And here what I can do is set data. 08:53.950 --> 08:56.020 Whatever is coming from there. 08:56.020 --> 08:58.300 But I need to actually. 08:58.480 --> 09:01.450 So we want to await for the result. 09:01.450 --> 09:11.620 So what I can do is I can do constant result is equal to await response JSON. 09:11.620 --> 09:15.460 So and that will be returned here. 09:15.460 --> 09:21.790 And then what we can also do is set loading here. 09:21.820 --> 09:23.800 At the very end to false. 09:24.820 --> 09:29.080 And I can do at the very beginning here. 09:33.220 --> 09:34.330 For a beginning here. 09:34.360 --> 09:35.800 Set loading to false. 09:35.800 --> 09:41.500 And we can also do set error to null. 09:41.500 --> 09:44.800 So whatever we sow to null. 09:44.800 --> 09:46.780 So whatever we start. 09:46.810 --> 09:49.750 Use effect at the moment is not trigger or anything here. 09:49.750 --> 09:53.800 So whatever we start this we will trigger that function Fetchdata. 09:53.830 --> 09:59.740 This is the function we will set loading to false because that's the set loading to true actually. 09:59.740 --> 10:01.000 And excuse me. 10:01.000 --> 10:02.710 So we will set it to true. 10:02.710 --> 10:04.210 Then we will set error to null. 10:04.210 --> 10:09.520 And then we'll try to fetch it based on the URL that we passed to this hook. 10:09.550 --> 10:12.340 And then we will have the cookie here. 10:12.340 --> 10:19.380 And if we have a response not if we don't have a response, then we set an error so it will be an error 10:19.410 --> 10:19.770 there. 10:19.770 --> 10:25.140 And then if we have that, we will set the data as is whatever is coming as a data. 10:25.140 --> 10:28.080 And then we will set the loading as a false. 10:28.080 --> 10:28.980 And that's it. 10:28.980 --> 10:32.430 And here what we will do is we will actually return it. 10:32.430 --> 10:36.630 What we can do is we can base that useeffect on that URL. 10:36.630 --> 10:40.200 So whenever we change the URL it will be retrigger. 10:40.200 --> 10:43.470 So this is what we have here. 10:44.340 --> 10:48.060 And basically our usefetch hook is done. 10:48.060 --> 10:55.680 So what we have now here is in that component, what we have is we have data, we have loading and we 10:55.680 --> 10:56.490 have error. 10:56.490 --> 10:59.310 So we don't need to do that anymore. 10:59.310 --> 11:01.890 So we fetch the movies like this. 11:01.890 --> 11:07.110 I will comment it out for the future reference so you can keep it this way if you like. 11:07.110 --> 11:09.570 But so we already have it here. 11:09.570 --> 11:17.820 So in the next video what we will do is we will adjust this component to work fully with Usefetch hook.