WEBVTT 00:02.160 --> 00:02.790 Okay. 00:02.880 --> 00:05.730 We are now redirected to the list here. 00:05.730 --> 00:10.080 And as you can see, we have a static token here. 00:10.080 --> 00:17.430 So that means we can actually use our new token that we store it in the async storage in that component. 00:17.430 --> 00:19.120 So how can we do that? 00:19.140 --> 00:27.090 So basically let's create a new constant and will actually that will be variable let because we'll kind 00:27.090 --> 00:27.990 of override it. 00:27.990 --> 00:29.850 So I will do token. 00:29.880 --> 00:38.130 It's a type of well, I will initially set it as null, so it will be a null, but the very beginning. 00:38.130 --> 00:41.490 And then what we can do is we can have a new function. 00:41.490 --> 00:45.060 So I will do a similar function as we had before. 00:45.060 --> 00:54.060 So I will do constant get data and then we can do async and then arrow function. 00:54.240 --> 00:59.940 So similar of what we had before and then we can do here. 00:59.940 --> 01:05.710 So I will assign token, this is what we've created here, so it will be accessible everywhere in this 01:05.710 --> 01:06.190 function. 01:06.190 --> 01:10.780 So token await and then I can do async. 01:10.780 --> 01:14.860 Actually I need what I need to do is I need to also include it here. 01:15.430 --> 01:18.490 So async storage. 01:20.350 --> 01:26.860 Once this is here, I can do async storage and then I can do get item. 01:26.860 --> 01:32.920 And in fact, I will need to use the same key as I use it here in the authentication. 01:32.920 --> 01:36.100 So this is my token. 01:36.100 --> 01:40.000 So once I have that, then I can check it. 01:40.000 --> 01:49.920 So if token because initially this is null and this is I set it to this token getting from async store 01:50.410 --> 01:51.100 storage. 01:51.100 --> 01:54.760 So if we have a token, then we do something. 01:54.790 --> 01:57.010 Otherwise we'll do something else. 01:57.010 --> 01:58.870 So what can we do? 01:59.050 --> 02:06.850 Basically, we have use effect here and that will be used for the beginning here to fetch the data. 02:06.850 --> 02:11.920 But this time we when we fetch, when we use the effect, we will load this component. 02:11.920 --> 02:14.590 We would like to have get data trigger. 02:14.590 --> 02:21.340 But this option to get the movies, we can put it in a separate function. 02:21.340 --> 02:26.110 So I will do constant get movies like this. 02:26.110 --> 02:31.090 So we'll kind of extract it to a separate function and then we'll trigger whenever we need it. 02:31.090 --> 02:32.980 So I will put it like this. 02:32.980 --> 02:40.870 So we have a get movies and then I can actually trigger that, get movies wherever we have a token. 02:40.870 --> 02:43.450 So if we have a token, then it's fine. 02:43.450 --> 02:46.030 We can do get movies and we'll use that token there. 02:46.060 --> 02:53.920 Otherwise what we can do is we can do props, navigation and then navigate. 02:53.920 --> 02:58.960 And then what we can do is we can navigate to out like this. 02:58.960 --> 03:03.400 So if we don't have it and you are in the list, then navigate back to the out. 03:03.400 --> 03:05.320 Otherwise you can get the movies. 03:05.320 --> 03:11.200 So we have get the movies here, but this time we have touched like static token here and we can replace 03:11.200 --> 03:16.030 it with our token variable. 03:16.420 --> 03:18.580 So I will save it here. 03:19.390 --> 03:24.400 And you can see it is still working the same way as it worked before. 03:24.400 --> 03:35.020 What we can do is we can do console log and then let's console log the token here and then you can see 03:35.020 --> 03:39.010 here the the log is console, but we have a lot of them. 03:39.010 --> 03:43.780 That means because it is auto refreshing and it's trying to fetch the data all the time. 03:43.780 --> 03:52.060 So we can do here is use the effect we can actually limit that to run it only once, not getting the 03:52.060 --> 03:53.080 data all the time. 03:53.080 --> 03:56.050 So it will just keep it once there. 03:56.170 --> 04:02.260 So we'll scroll down here and you can see here, once a token is printed because of this and then it 04:02.260 --> 04:02.980 stops. 04:03.190 --> 04:08.560 So that means you will need to manually, manually control how you get the movies. 04:08.560 --> 04:16.870 So basically wherever you what you can do is whenever you will navigate back to this component to list 04:16.870 --> 04:21.010 of movies, you can pass a param to update it or not. 04:21.010 --> 04:23.710 So if you have that updated then you will trigger get movies. 04:23.710 --> 04:26.260 If not, then you can ignore it or something like that. 04:26.260 --> 04:31.930 So it's really up to you when you would like to fetch a new data, but having that in a separate function 04:31.930 --> 04:36.160 will give you all the power so you can trigger that whenever you need it. 04:36.160 --> 04:43.930 So in the same way as we pass it to edit here, the props so we can pass the props movie you can going 04:43.930 --> 04:49.630 back and navigating to this to movie list. 04:49.630 --> 04:58.660 I think if we we navigate here so we can navigate to movie list and then you can ask add extra properties 04:58.660 --> 05:01.630 here and you can say, okay, update it and then you listen for. 05:01.650 --> 05:06.600 That drops in in the in the list and then you will trigger this get movie. 05:06.600 --> 05:10.680 So you know, you know already how to do it and that will be a straight forward. 05:10.680 --> 05:20.250 But what we have so far here is in the list we we kind of need to do that here everywhere. 05:20.410 --> 05:23.550 It's like get the data songster and await and so on. 05:23.550 --> 05:25.320 This is one way to do that. 05:25.320 --> 05:31.920 And I intentionally done it this way because I would like to show you how we can actually get the async 05:32.070 --> 05:40.980 storage item through there, but it might not be optimized to do it for every single component. 05:40.980 --> 05:47.070 So what you can do, instead of having that in every single component that needs to have a token, what 05:47.070 --> 05:49.530 you can do is you can pass that token as a param. 05:49.530 --> 05:55.860 So let's say props, navigation, you will do that out, you don't need it, but you have other places 05:55.860 --> 06:01.540 like navigation details, so you pass movie title and also you can pass a token. 06:01.540 --> 06:03.130 That is our token. 06:03.130 --> 06:06.100 So this time if you go to the details. 06:06.940 --> 06:08.860 So I will open details here. 06:10.270 --> 06:20.200 I will just duplicate this and then I have token and I will do token and by default it will be empty 06:20.230 --> 06:20.560 string. 06:20.560 --> 06:24.460 So this time I don't need to check the token here in the details. 06:24.460 --> 06:32.440 I only check it in the initial list, but I pass the token down the props so this time I can use this. 06:33.470 --> 06:37.410 Token directly from from the props. 06:37.430 --> 06:42.290 So let me do the rating here and try if that works. 06:42.290 --> 06:47.560 So Titanic three, I will do three and then rate it and rating. 06:47.570 --> 06:48.260 Okay. 06:48.260 --> 06:54.710 So we kind of have it working and this time we don't need to ask for a token anymore. 06:54.710 --> 06:59.960 We just pass the token with this params and then we can get it from there. 06:59.960 --> 07:01.940 So that's much more handy. 07:01.940 --> 07:08.930 And then doing that all the time in, uh, in every single component.