1
00:00:00,720 --> 00:00:05,560
In the last video we played around with the API library a little bit more inside the browser console.

2
00:00:05,610 --> 00:00:08,910
We saw that we can call that get off instance method.

3
00:00:09,000 --> 00:00:13,440
And anytime that we call that it's going to give us a object back that has a ton of different functions

4
00:00:13,440 --> 00:00:18,230
assigned to it that we can use to essentially manipulate the user's authentication status.

5
00:00:18,240 --> 00:00:22,510
So now in this video we're going to continue developing our Google Earth class right here.

6
00:00:22,530 --> 00:00:25,580
Let me set up a couple of quick goals for what we're going to try to do.

7
00:00:26,490 --> 00:00:27,320
All right.

8
00:00:27,660 --> 00:00:33,720
So inside of my component or the Google off component I want to try to get a reference to that off object

9
00:00:33,780 --> 00:00:35,280
after it is initialized.

10
00:00:35,450 --> 00:00:41,100
Now when I say object right here I'm talking about how just in the last video we were able to say API

11
00:00:41,840 --> 00:00:47,790
to get off instance when we call that this is the author object I'm talking about.

12
00:00:47,790 --> 00:00:51,690
So this is the thing that has all those different methods assigned to it that we can use to manipulate

13
00:00:51,690 --> 00:00:57,750
the user's authentication status or even figure out if they are currently signed in.

14
00:00:57,770 --> 00:01:02,330
So we're going to get a reference to that object after we initialize the library.

15
00:01:02,330 --> 00:01:06,560
Then after that we're going to attempt to figure out whether or not the user is currently signed in.

16
00:01:06,560 --> 00:01:09,920
Remember in the last video we went through the authentication flow.

17
00:01:09,920 --> 00:01:14,520
So right now in theory we are currently a lot with Google inside of our application.

18
00:01:14,720 --> 00:01:18,560
So I want to figure out whether or not the user using our application is signed in.

19
00:01:18,560 --> 00:01:23,530
And then once we figure that out I want to somehow print out that authentication status on the screen.

20
00:01:23,760 --> 00:01:28,610
It's just a very quick little goal here to make sure that we understand the basics of Google both in

21
00:01:28,610 --> 00:01:30,330
how to interact with this library.

22
00:01:30,410 --> 00:01:33,620
Remember right now we're not going to worry about redux at all.

23
00:01:33,620 --> 00:01:36,380
I just want to get this component up and running by itself.

24
00:01:37,900 --> 00:01:38,250
OK.

25
00:01:38,260 --> 00:01:42,940
So back inside of my code editor I'm going to find my google off class.

26
00:01:43,000 --> 00:01:48,040
So remember when we loaded up that additional library right here we had to pass in a callback function

27
00:01:48,100 --> 00:01:53,890
that was invoked after this additional module inside the library was success successfully loaded up

28
00:01:54,400 --> 00:01:55,650
in a very similar fashion.

29
00:01:55,720 --> 00:02:01,660
When we call client Dom init right here that executes an asynchronous operation or an asynchronous network

30
00:02:01,660 --> 00:02:06,330
request over to Google's API server in order to initialize our client.

31
00:02:06,490 --> 00:02:11,890
So we want to get some type of callback function or some type of notice for when that initialization

32
00:02:11,890 --> 00:02:13,570
set up is all done.

33
00:02:13,660 --> 00:02:17,650
So to do so we're going to chain on a then statement right here.

34
00:02:18,850 --> 00:02:20,820
All right let me tell you why we are doing that.

35
00:02:20,920 --> 00:02:26,950
When we called Load up here load only allows us to get a signal or a notification of when the loading

36
00:02:26,950 --> 00:02:30,700
process is complete bypassing in a callback function.

37
00:02:30,700 --> 00:02:37,120
But when we call init we do not have to use a callback function when we called in it it returns a promise

38
00:02:37,510 --> 00:02:42,070
a promise is an object that will give us a little tap on the shoulder so to speak after this client

39
00:02:42,070 --> 00:02:44,320
library has been successfully initialized.

40
00:02:44,560 --> 00:02:45,840
So by chaining on this.

41
00:02:45,850 --> 00:02:48,930
Then steepen right here and passing in an Aero function.

42
00:02:49,000 --> 00:02:53,740
This aero function is going to be automatically invoked after a library has successfully initialized

43
00:02:53,740 --> 00:02:54,770
itself.

44
00:02:54,790 --> 00:03:01,720
So inside of here we can write some amount of code that will be only executed once our entire API library

45
00:03:01,720 --> 00:03:02,940
is ready to go.

46
00:03:03,190 --> 00:03:06,940
So it's at this point right here that we can start to figure out whether or not the user is currently

47
00:03:06,940 --> 00:03:10,810
signed in and then attempt to print out that status on the screen.

48
00:03:10,810 --> 00:03:16,720
So inside if you're going to first begin by getting a reference to that off object and saving a reference

49
00:03:16,720 --> 00:03:19,020
to it on my component class.

50
00:03:19,240 --> 00:03:24,940
So I'm going to say this dot off equals window dot G API.

51
00:03:25,000 --> 00:03:28,380
Off to get off instance.

52
00:03:28,400 --> 00:03:33,740
So now after running this code right here inside of any other function inside my class I can reference

53
00:03:33,740 --> 00:03:38,900
this dot off and that will give me a reference to that Auth. instance that I can use to sign the user

54
00:03:38,900 --> 00:03:44,890
in or sign them out or get the users current on the nation status.

55
00:03:45,090 --> 00:03:50,130
Because remember our goal right now is to somehow figure out whether or not the user is signed in and

56
00:03:50,130 --> 00:03:53,240
then print out that authentication status on the screen.

57
00:03:53,570 --> 00:03:59,760
So keep in mind that when this component or this method right here gets called our component has already

58
00:03:59,760 --> 00:04:01,520
been rendered to the screen.

59
00:04:01,530 --> 00:04:07,110
So now if we want to essentially update the text or what content this component shows we need to somehow

60
00:04:07,110 --> 00:04:08,720
get the component to the render.

61
00:04:08,730 --> 00:04:11,600
So we're going to be making use of component level state here.

62
00:04:12,650 --> 00:04:18,380
After we initialize our library and get access to this object we're going to update our component level

63
00:04:18,380 --> 00:04:22,350
state with whether or not the users currently signed in when we update that state.

64
00:04:22,370 --> 00:04:26,720
It will cause the component to automatically render and we can then print up the authentication status

65
00:04:26,720 --> 00:04:33,100
on the screen so inside of here after getting a reference to this start off I'm going to call this Scott

66
00:04:33,100 --> 00:04:38,440
set state and I going to pass an object here and say is signed in.

67
00:04:38,440 --> 00:04:44,840
And that's going to be the result of calling this off that is signed in.

68
00:04:44,980 --> 00:04:50,390
Get like so.

69
00:04:50,490 --> 00:04:56,070
OK so now after loading a library after initializing it we finally get our reference to the author library

70
00:04:56,080 --> 00:04:57,450
itself or the author object.

71
00:04:57,480 --> 00:05:01,800
And then we're going to update our component level state with this new property called is signed in.

72
00:05:01,890 --> 00:05:06,450
And we're just going to take that directly off with that object now is signed in right here if you want

73
00:05:06,450 --> 00:05:12,510
to you can flip back over to the Google API documentation and see that this is a property on that object.

74
00:05:12,560 --> 00:05:16,950
And if we want to get whether or not the user is currently signed in we just referenced that get function

75
00:05:16,980 --> 00:05:19,800
or we invoke it like so.

76
00:05:19,830 --> 00:05:24,590
OK so now that we are making use of component level state we need to make sure that we initialize the

77
00:05:24,590 --> 00:05:27,650
state object when our component class is created.

78
00:05:27,650 --> 00:05:35,120
So at the top of this class I'm going to say state is is signed in and I'm going to default that to

79
00:05:35,120 --> 00:05:36,740
have a value of NULL.

80
00:05:36,740 --> 00:05:42,140
The reason I'm putting no right here is that we do not know if the user is signed in or not signed in

81
00:05:42,320 --> 00:05:44,370
when our application first loads.

82
00:05:44,570 --> 00:05:49,280
So if there is a value of no four is signed in that means that we do not know if the user is signed

83
00:05:49,280 --> 00:05:50,360
in or not signed in.

84
00:05:50,390 --> 00:05:54,140
And so we we probably should not print anything on the screen at that point in time.

85
00:05:55,520 --> 00:05:55,800
OK.

86
00:05:55,810 --> 00:06:01,480
So now inside my render method I could put some logic directly inside if you're to look at the value

87
00:06:01,480 --> 00:06:05,680
of this statement is signed in and then print out either yes no they are signed in.

88
00:06:05,680 --> 00:06:10,330
But instead I'm going to make a little helper method just to help us kind of print out the appropriate

89
00:06:10,330 --> 00:06:15,840
text sanguinea make a helper method called render off button.

90
00:06:15,850 --> 00:06:18,930
Right now we're just going to be returning some div with text in it.

91
00:06:18,940 --> 00:06:24,480
But as you might guess in just a moment we're going to replace this with some actual button logic or

92
00:06:24,490 --> 00:06:26,710
some button to show up on the screen.

93
00:06:27,930 --> 00:06:36,570
OK so inside if you're all say if this statement is signed in equals no then I'm going to return a div

94
00:06:37,140 --> 00:06:41,270
that says I don't know if we are signed

95
00:06:44,850 --> 00:06:53,320
and then else if this state DOT this statement is signed in we could say equals equals true.

96
00:06:53,330 --> 00:06:55,420
But we don't actually have to say equals equals true.

97
00:06:55,430 --> 00:06:58,840
We can just reference the property by itself and would be the same thing.

98
00:06:58,880 --> 00:07:06,100
Now if we are signed in then I'm going to return a div that says I am signed in.

99
00:07:06,240 --> 00:07:11,190
And then finally we'll handled the last case the case in which I am not signed in and is signed in is

100
00:07:11,190 --> 00:07:12,830
equal to a value of false.

101
00:07:12,840 --> 00:07:20,190
And so in this case I will return a div that says I am not signed in like so.

102
00:07:20,300 --> 00:07:24,080
And then finally done inside my render method I'm going to reference that helper method we just put

103
00:07:24,080 --> 00:07:24,480
together.

104
00:07:24,500 --> 00:07:26,620
So I will call this render off

105
00:07:30,160 --> 00:07:30,660
OK.

106
00:07:30,850 --> 00:07:34,210
I'm going to save this and we'll flip back with the browser and test this out.

107
00:07:34,310 --> 00:07:40,670
So I'm going to flip back over and I see at the top right hand side it says I am signed in.

108
00:07:40,670 --> 00:07:42,380
So that means we are currently signed in.

109
00:07:42,450 --> 00:07:46,890
Now just to make this a little bit more interesting let's try actually signing out right now we don't

110
00:07:46,890 --> 00:07:51,450
have a button to sign our user out but we can very easily sign out by using our counsel and directly

111
00:07:51,450 --> 00:07:56,090
manipulating the API library so I can say gee API.

112
00:07:56,130 --> 00:08:01,750
Off to get off instance your number that's going to get us access to the thought ject.

113
00:08:01,800 --> 00:08:07,620
And then one of the methods on that object is sign out right there.

114
00:08:07,670 --> 00:08:12,050
So I'm going to say gee AAPI off to get instant start.

115
00:08:12,380 --> 00:08:15,440
Sign out.

116
00:08:15,620 --> 00:08:21,400
And then once I called out I'm no longer considered to be signed in via Google Earth so I can now refresh

117
00:08:21,400 --> 00:08:21,970
the page.

118
00:08:21,990 --> 00:08:26,020
And when I do so I should see I am not signed in print up inside my head or.

119
00:08:26,210 --> 00:08:27,860
So refresh of the page.

120
00:08:28,030 --> 00:08:31,370
You see that it said there very briefly it said I don't know if I'm signed in.

121
00:08:31,390 --> 00:08:35,920
That was while the JPI Libre was loading up and trying to decide whether or not our user was signed

122
00:08:35,920 --> 00:08:40,630
in and the ones that determined that the user was not signed in we called Set States and we now see

123
00:08:40,690 --> 00:08:42,230
I am not signed in.

124
00:08:42,310 --> 00:08:44,940
So now if we want to we can sign in one more time.

125
00:08:46,390 --> 00:08:52,800
By doing GPI off to get instance sign in that will kick us through the floor again.

126
00:08:52,810 --> 00:08:55,160
So I'm going to select an account right here.

127
00:08:56,080 --> 00:08:58,540
And then we get kicked active back over to our page.

128
00:08:58,540 --> 00:09:03,670
Now we don't have any logic inside of our application right now to get a callback or some type of notification

129
00:09:03,670 --> 00:09:05,110
when the user does sign in.

130
00:09:05,110 --> 00:09:08,720
So if you want to see that header text update we have to actually refresh the page.

131
00:09:08,980 --> 00:09:13,000
So I'll do so right now and you'll see that it now goes back to saying I am signed in.

132
00:09:13,180 --> 00:09:17,560
Now the really nice thing about this Google API library is that it's going to hold your authentication

133
00:09:17,560 --> 00:09:20,290
status between refreshes of the page.

134
00:09:20,290 --> 00:09:25,480
So for example if I refresh right now you'll see that I am still signed in and I can refresh as much

135
00:09:25,480 --> 00:09:29,440
as I want and I'm still going to be signed in until I actually sign out.

136
00:09:29,880 --> 00:09:30,140
OK.

137
00:09:30,160 --> 00:09:32,930
So that's pretty much the basics of this library.

138
00:09:32,950 --> 00:09:34,040
In a nutshell.

139
00:09:34,270 --> 00:09:39,700
Now it would be really nice if we made sure that whenever the user actually signs in we dynamically

140
00:09:39,700 --> 00:09:42,390
like on the fly changed the text right here.

141
00:09:42,670 --> 00:09:45,570
So let's try to take a shot at that in the next section.

142
00:09:45,580 --> 00:09:47,650
So quick break and I'll see you in just a minute.