1
00:00:01,160 --> 00:00:01,450
All right.

2
00:00:01,460 --> 00:00:05,420
So in this video we're going to make use of acing storage to store the token when we get back from our

3
00:00:05,420 --> 00:00:06,630
API.

4
00:00:06,680 --> 00:00:12,620
So back inside my code editor I'll find the author context J.S. file and at the very top I'm going to

5
00:00:12,650 --> 00:00:19,720
import async storage from React Native like so.

6
00:00:19,720 --> 00:00:24,550
So as I was just mentioning in the last video if it's now at some points in the future when the other

7
00:00:24,550 --> 00:00:26,830
library is compatible with Expo.

8
00:00:26,920 --> 00:00:31,060
All we have to change is that import statement right there we're just gonna change this import statement

9
00:00:31,240 --> 00:00:33,280
change where we are pulling in the library from.

10
00:00:33,310 --> 00:00:34,280
And that's pretty much it.

11
00:00:34,870 --> 00:00:40,240
So now we can make use of async storage to set our token and make sure that we store it from our sign

12
00:00:40,240 --> 00:00:41,700
up action right here.

13
00:00:41,790 --> 00:00:47,140
So inside of sign up right after we get the response from our API remember response dot data is an object

14
00:00:47,170 --> 00:00:52,750
that has a token property in it's that token that we want to store inside of async storage.

15
00:00:52,750 --> 00:01:00,430
So I'm going to remove that console log in I'll instead call a wait async storage dot set item and I'm

16
00:01:00,430 --> 00:01:02,790
going to set a property in there called token.

17
00:01:02,920 --> 00:01:08,160
And as you would guess we're going to throw in their response dot data dot token.

18
00:01:08,440 --> 00:01:09,890
And that's pretty much it.

19
00:01:10,110 --> 00:01:15,430
It's now if we ever want to get the token out of storage we would write out a wait async storage dot

20
00:01:15,430 --> 00:01:21,100
get item token and that'll give us our token back immediately.

21
00:01:21,140 --> 00:01:23,380
So we don't need to get the token back right now.

22
00:01:23,480 --> 00:01:24,620
So he's gonna remove that line.

23
00:01:24,620 --> 00:01:27,020
Just a quick example that looks good.

24
00:01:27,020 --> 00:01:31,400
We'll eventually retrieve that token when we want to try to automatically log our user back in when

25
00:01:31,400 --> 00:01:32,810
they restart the application.

26
00:01:32,810 --> 00:01:35,060
But we're gonna handle that in just a little bit.

27
00:01:35,120 --> 00:01:38,170
So instead right now let's continue with our flow.

28
00:01:38,240 --> 00:01:43,030
The next thing we want to do is dispatch an action to take that token and put it into our state object.

29
00:01:43,700 --> 00:01:49,350
So once again down at the very bottom of the file we've got our initial state value right there.

30
00:01:49,350 --> 00:01:54,120
And we had said that storing some boolean like is signed in is not super useful.

31
00:01:54,130 --> 00:01:59,590
Instead we're gonna have a property inside there called token and we will default it to be No.

32
00:01:59,620 --> 00:02:05,680
So by default a user is not logged in because we don't have a token as soon as a token is present inside

33
00:02:05,680 --> 00:02:06,010
of here.

34
00:02:06,010 --> 00:02:08,840
Specifically the Jason Webb token we get back to the API.

35
00:02:08,950 --> 00:02:12,330
We're gonna take that as a signal that the user must be logged in.

36
00:02:12,370 --> 00:02:15,940
So essentially the presence of a token property means logged in.

37
00:02:15,940 --> 00:02:22,840
No token not logged in let's make sure that once we get our token after we set it inside of storage

38
00:02:22,840 --> 00:02:27,820
will then dispatch an action that's going to update that token piece of state.

39
00:02:27,820 --> 00:02:31,240
So I'm going to dispatch a new action.

40
00:02:31,240 --> 00:02:32,450
I'll give it a type of.

41
00:02:32,470 --> 00:02:34,100
How about sign up.

42
00:02:34,480 --> 00:02:35,800
And as the payload.

43
00:02:35,800 --> 00:02:40,270
I'll just throw in response dot data dot token.

44
00:02:40,310 --> 00:02:45,050
So now inside of our reducer at the top of the file we can handle another case or throw in another case

45
00:02:45,050 --> 00:02:55,400
to handle that type so at the very top right after add air I'll throw in a new case of sign up and inside

46
00:02:55,400 --> 00:03:05,090
of here I will return dot dot dot state with token of action dot payload like so then there's probably

47
00:03:05,090 --> 00:03:07,130
one other thing we might do inside of here.

48
00:03:07,190 --> 00:03:13,730
Let's imagine a case where a user tries to sign up and maybe they put in some invalid email and we end

49
00:03:13,730 --> 00:03:15,110
up showing an error message to them.

50
00:03:15,140 --> 00:03:20,480
So our error message piece of state would be defined as some error message when a user then signs up.

51
00:03:20,480 --> 00:03:23,130
We probably don't want to have an error message anymore.

52
00:03:23,150 --> 00:03:27,060
Now of course we probably won't be showing the user the form that would display the error message.

53
00:03:27,110 --> 00:03:31,970
Nonetheless if the user then logged out of our application and went back to that sign up form they would

54
00:03:31,970 --> 00:03:33,970
still see an error message.

55
00:03:33,980 --> 00:03:39,140
So in other words I think that when a user signs up we really just need to essentially reset our entire

56
00:03:39,140 --> 00:03:41,680
state object and say OK we've signed up.

57
00:03:41,690 --> 00:03:45,510
So here's the token and we should no longer have an error message.

58
00:03:45,620 --> 00:03:50,140
So we don't really need to persist or carry through any values from the current state object.

59
00:03:50,210 --> 00:03:54,380
We really just want to completely rebuild the state object from scratch.

60
00:03:54,440 --> 00:03:59,360
So when a user signs up I'm going to zero out my error message.

61
00:03:59,390 --> 00:04:04,880
So I'll say error message is empty string and I'll set my token and that's it.

62
00:04:04,910 --> 00:04:10,340
That's now my entire new state object OK so this looks pretty good.

63
00:04:10,430 --> 00:04:14,180
The last thing I have to do is handle some of them are navigation.

64
00:04:14,270 --> 00:04:15,630
I mean let's take a look at our diagram.

65
00:04:15,640 --> 00:04:19,400
So now we need to make sure that we just navigate our user over to the main flow.

66
00:04:19,400 --> 00:04:23,450
We'll take care of that in just a moment but before we do I want to make one quick change to our sign

67
00:04:23,450 --> 00:04:25,490
up action right here at present.

68
00:04:25,490 --> 00:04:29,110
It's starting to accumulate a lot of code and it's kind of hard to read.

69
00:04:29,150 --> 00:04:34,040
So one thing that we could do to make this a little bit more easily legible is use some compacted syntax

70
00:04:34,070 --> 00:04:39,430
for the outer function right here does a quick reminder of how IRO functions work I'm going to do a

71
00:04:39,910 --> 00:04:47,080
quick example on Arrow functions remember if we have a function called like ADD and it's an arrow function

72
00:04:48,140 --> 00:04:53,940
maybe this thing gets called With A and B that are numbers and we would return a plus b if it really

73
00:04:53,940 --> 00:04:55,500
was supposed to add.

74
00:04:55,500 --> 00:04:59,910
So this is a one way that we could write out an arrow function another way that we could write out the

75
00:04:59,910 --> 00:05:03,180
zero function because we have a single javascript expression right here.

76
00:05:03,180 --> 00:05:10,310
Just like one single expression we could decide to remove those curly braces and remove the return statement

77
00:05:10,400 --> 00:05:11,840
as well.

78
00:05:11,840 --> 00:05:14,700
So that's making use of something called an implicit return.

79
00:05:14,700 --> 00:05:19,700
It means that the result of a and b will be automatically returned and we don't have to put in a return

80
00:05:19,700 --> 00:05:20,590
statement.

81
00:05:20,930 --> 00:05:27,650
So we can either write out curly braces with return or because we have one single expression inside

82
00:05:27,650 --> 00:05:28,120
of here.

83
00:05:28,250 --> 00:05:32,750
We can write out just the expression by itself and that expression or the result of it will be returned

84
00:05:32,750 --> 00:05:38,180
for us to write a very similar scenario right now with our action function.

85
00:05:38,300 --> 00:05:45,340
We've got dispatch right here and then we are returning one single thing So alternatively if we want

86
00:05:45,340 --> 00:05:51,250
to write out this big long like kind of extra curly brace right here with return we could decide on

87
00:05:51,250 --> 00:05:53,730
the outer function to remove the curly braces.

88
00:05:53,860 --> 00:06:00,810
So one right there and one down here removed the return statement and then put that function declaration

89
00:06:00,900 --> 00:06:04,240
on the same line as dispatch like so.

90
00:06:04,260 --> 00:06:08,460
So what you see right here is 100 percent equivalent what we had before but now we don't have to have

91
00:06:08,460 --> 00:06:12,460
that extra line of indentation and the extra return statement and all that stuff as well.

92
00:06:12,810 --> 00:06:15,810
So it's a lot easier to read and see what's going on.

93
00:06:15,930 --> 00:06:19,980
So we're going to follow this pattern for all the different action functions that we write from here

94
00:06:19,980 --> 00:06:21,280
on out.

95
00:06:21,360 --> 00:06:21,590
OK.

96
00:06:21,600 --> 00:06:22,710
So this looks a lot better.

97
00:06:22,740 --> 00:06:24,370
So let's take another pause right here.

98
00:06:24,420 --> 00:06:28,680
Like I said the last thing you do is handled navigating the user over to our main flow.

99
00:06:28,710 --> 00:06:30,480
So let's take care of that in the next video.