Okay.
We are now redirected to the list here.
And as you can see, we have a static token here.
So that means we can actually use our new token that we store it in the async storage in that component.
So how can we do that?
So basically let's create a new constant and will actually that will be variable let because we'll kind
of override it.
So I will do token.
It's a type of well, I will initially set it as null, so it will be a null, but the very beginning.
And then what we can do is we can have a new function.
So I will do a similar function as we had before.
So I will do constant get data and then we can do async and then arrow function.
So similar of what we had before and then we can do here.
So I will assign token, this is what we've created here, so it will be accessible everywhere in this
function.
So token await and then I can do async.
Actually I need what I need to do is I need to also include it here.
So async storage.
Once this is here, I can do async storage and then I can do get item.
And in fact, I will need to use the same key as I use it here in the authentication.
So this is my token.
So once I have that, then I can check it.
So if token because initially this is null and this is I set it to this token getting from async store
storage.
So if we have a token, then we do something.
Otherwise we'll do something else.
So what can we do?
Basically, we have use effect here and that will be used for the beginning here to fetch the data.
But this time we when we fetch, when we use the effect, we will load this component.
We would like to have get data trigger.
But this option to get the movies, we can put it in a separate function.
So I will do constant get movies like this.
So we'll kind of extract it to a separate function and then we'll trigger whenever we need it.
So I will put it like this.
So we have a get movies and then I can actually trigger that, get movies wherever we have a token.
So if we have a token, then it's fine.
We can do get movies and we'll use that token there.
Otherwise what we can do is we can do props, navigation and then navigate.
And then what we can do is we can navigate to out like this.
So if we don't have it and you are in the list, then navigate back to the out.
Otherwise you can get the movies.
So we have get the movies here, but this time we have touched like static token here and we can replace
it with our token variable.
So I will save it here.
And you can see it is still working the same way as it worked before.
What we can do is we can do console log and then let's console log the token here and then you can see
here the the log is console, but we have a lot of them.
That means because it is auto refreshing and it's trying to fetch the data all the time.
So we can do here is use the effect we can actually limit that to run it only once, not getting the
data all the time.
So it will just keep it once there.
So we'll scroll down here and you can see here, once a token is printed because of this and then it
stops.
So that means you will need to manually, manually control how you get the movies.
So basically wherever you what you can do is whenever you will navigate back to this component to list
of movies, you can pass a param to update it or not.
So if you have that updated then you will trigger get movies.
If not, then you can ignore it or something like that.
So it's really up to you when you would like to fetch a new data, but having that in a separate function
will give you all the power so you can trigger that whenever you need it.
So in the same way as we pass it to edit here, the props so we can pass the props movie you can going
back and navigating to this to movie list.
I think if we we navigate here so we can navigate to movie list and then you can ask add extra properties
here and you can say, okay, update it and then you listen for.
That drops in in the in the list and then you will trigger this get movie.
So you know, you know already how to do it and that will be a straight forward.
But what we have so far here is in the list we we kind of need to do that here everywhere.
It's like get the data songster and await and so on.
This is one way to do that.
And I intentionally done it this way because I would like to show you how we can actually get the async
storage item through there, but it might not be optimized to do it for every single component.
So what you can do, instead of having that in every single component that needs to have a token, what
you can do is you can pass that token as a param.
So let's say props, navigation, you will do that out, you don't need it, but you have other places
like navigation details, so you pass movie title and also you can pass a token.
That is our token.
So this time if you go to the details.
So I will open details here.
I will just duplicate this and then I have token and I will do token and by default it will be empty
string.
So this time I don't need to check the token here in the details.
I only check it in the initial list, but I pass the token down the props so this time I can use this.
Token directly from from the props.
So let me do the rating here and try if that works.
So Titanic three, I will do three and then rate it and rating.
Okay.
So we kind of have it working and this time we don't need to ask for a token anymore.
We just pass the token with this params and then we can get it from there.
So that's much more handy.
And then doing that all the time in, uh, in every single component.