1
00:00:00,500 --> 00:00:06,360
In the last section we modified our author douceur to ensure that only returns one of three values either

2
00:00:06,360 --> 00:00:09,390
Noal false or the user model.

3
00:00:09,830 --> 00:00:14,730
Our redux store is now aware of whether or not the user is actually logged in.

4
00:00:14,760 --> 00:00:19,740
We're now going to change over to our components heterodox G-S file where we will make sure that this

5
00:00:19,740 --> 00:00:24,690
Hetter is also aware of whether or not the users logged in by hooking up the head or component to our

6
00:00:24,690 --> 00:00:25,970
redux store.

7
00:00:25,980 --> 00:00:31,110
So we want to hook this thing up to the redux store and we want to pull out the auth piece of state

8
00:00:31,350 --> 00:00:34,770
that tells us if the user is or isn't logged in.

9
00:00:34,770 --> 00:00:37,420
Remember how we hook up a component to the redux store.

10
00:00:37,530 --> 00:00:40,950
We always import the connect helper from re-act redux.

11
00:00:40,950 --> 00:00:45,810
We define the map state to prop's function and then we pull off the little pieces of state that we actually

12
00:00:45,810 --> 00:00:47,880
care about inside this component.

13
00:00:47,880 --> 00:00:51,050
So let's get to it at the top.

14
00:00:51,050 --> 00:00:54,970
We will import the connect helper from reactor's redux.

15
00:00:55,650 --> 00:00:58,220
We'll then set up the connect tell her at the bottom of the file.

16
00:00:58,440 --> 00:01:05,490
So down here we'll say connect and then a second set of parentheses around her immediately above the

17
00:01:05,490 --> 00:01:11,880
connect statement we'll define our map state to proper function which gets calls with the entire state

18
00:01:11,910 --> 00:01:13,830
object out of the redux store.

19
00:01:14,190 --> 00:01:19,140
So we'll call it state and then we need to make sure that we return an object that will be passed to

20
00:01:19,140 --> 00:01:21,170
the header as props.

21
00:01:21,330 --> 00:01:26,970
So really the only thing that we care about the state object right now is the auth piece of state and

22
00:01:26,970 --> 00:01:33,570
specifically off because recall that inside the reducers index file we had assigned to the auth reducer

23
00:01:33,570 --> 00:01:34,900
to the auth property.

24
00:01:35,070 --> 00:01:40,010
So our state object will have one property right now called off.

25
00:01:40,140 --> 00:01:46,310
So we're going to say the auth property is going to be generated by state got off.

26
00:01:46,500 --> 00:01:49,530
Now we can do a little bit of refactoring with iOS 6 here.

27
00:01:49,590 --> 00:01:53,760
First we can structure the auth property off the state object.

28
00:01:53,760 --> 00:01:56,920
So put down some Crilley races and then say off.

29
00:01:56,970 --> 00:02:00,960
So now the object condenses down to off is off.

30
00:02:00,960 --> 00:02:07,310
And since these keys and values are the same we can further condense it down to be just off like so.

31
00:02:07,920 --> 00:02:08,230
OK.

32
00:02:08,250 --> 00:02:12,750
So in the last step we're going to take straight to props past it as the first argument to the connect

33
00:02:12,750 --> 00:02:13,410
function.

34
00:02:13,410 --> 00:02:19,380
So map state to prop's like so now just to test this thing out and make sure everything is working the

35
00:02:19,380 --> 00:02:20,490
way we expect.

36
00:02:20,490 --> 00:02:25,010
Let's put a console log inside of the render method of the head or component.

37
00:02:25,090 --> 00:02:27,600
So inside of your we'll say this or log.

38
00:02:27,600 --> 00:02:34,630
This props and we'll just look at the entire prop's object.

39
00:02:34,650 --> 00:02:39,240
So now back inside the browser we immediately see two council locks which is exactly what we really

40
00:02:39,330 --> 00:02:43,940
would expect the first concert log has the off property as no.

41
00:02:44,190 --> 00:02:49,540
Which means hey we're still making the request to figure out if the user is currently logged in.

42
00:02:49,590 --> 00:02:55,560
We then shortly after that see a follow up console log in which the off property is set to our user

43
00:02:55,560 --> 00:02:59,940
model which indicates that I personally am currently logged in right now.

44
00:02:59,940 --> 00:03:04,980
Now of course we can always test the case in which we are logged out by going over to a new tab and

45
00:03:04,980 --> 00:03:11,920
navigating to localhost 5000 slash API slash log out like so.

46
00:03:12,450 --> 00:03:15,430
So I'm now considered to be logged out by the application.

47
00:03:15,690 --> 00:03:20,970
If I go back to the re-act out and refresh the page I will again see two console logs.

48
00:03:20,970 --> 00:03:24,550
The first one that says we don't know what our current status is.

49
00:03:24,600 --> 00:03:29,910
And the second one that says hey we are definitely not logged in off is false.

50
00:03:29,940 --> 00:03:30,220
OK.

51
00:03:30,240 --> 00:03:31,360
So this is looking good.

52
00:03:31,530 --> 00:03:34,130
We can now use this new property right here.

53
00:03:34,140 --> 00:03:38,170
This off property to decide what content to show inside the header.

54
00:03:38,280 --> 00:03:42,100
So start that process right now inside the header.

55
00:03:42,120 --> 00:03:44,820
I'm going to start off by removing the console log statement.

56
00:03:44,820 --> 00:03:49,920
So I'm going to take this thing out and I'm going to locate the portion of the header that I want to

57
00:03:49,920 --> 00:03:53,770
replace depending upon my current authentication status.

58
00:03:53,880 --> 00:03:55,720
Really it's everything inside of this.

59
00:03:55,750 --> 00:04:00,970
Well if I am logged in I don't want to see this button if I am not logged in.

60
00:04:00,990 --> 00:04:06,780
I want to see the button and then most importantly if I'm still pending or I'm still making the request.

61
00:04:06,780 --> 00:04:10,030
Still trying to figure out if I am or am not logged in.

62
00:04:10,140 --> 00:04:12,340
I don't want to show anything here at all.

63
00:04:12,660 --> 00:04:17,560
So let's we're going to put all this logic inside of a helper method called render content.

64
00:04:17,780 --> 00:04:20,840
So going to make a helper method and call it render content.

65
00:04:21,060 --> 00:04:27,060
And so inside of here we're going to inspect the this prop's done on the property and then depending

66
00:04:27,120 --> 00:04:32,860
on its value we will return some different blob of GSX to show inside this UAA.

67
00:04:33,360 --> 00:04:35,070
So let's get to it.

68
00:04:35,070 --> 00:04:42,590
Now given that the props off property or this property or property can only be one of three values.

69
00:04:42,630 --> 00:04:47,460
This is actually another great location to put together a switch statement cause will say OK if the

70
00:04:47,460 --> 00:04:52,950
user is false they're not logged in show this if it's Noal show this and if they are logged in then

71
00:04:52,950 --> 00:04:54,200
show this.

72
00:04:54,330 --> 00:04:59,170
So we will switch over this stopped props start off.

73
00:04:59,520 --> 00:05:06,240
And then there's three cases that we really care about the case in which this drops off is Noal the

74
00:05:06,240 --> 00:05:08,190
case in which it is false.

75
00:05:08,640 --> 00:05:12,710
And then the case in which it is an object which means we are logged in.

76
00:05:12,840 --> 00:05:15,790
And for that we don't really have to put down a distinct case statement.

77
00:05:15,810 --> 00:05:19,070
We can just say default as OK if it's not.

78
00:05:19,080 --> 00:05:19,480
No.

79
00:05:19,500 --> 00:05:22,000
If it's not false then they must be logged in.

80
00:05:22,020 --> 00:05:25,130
So they're going to fall underneath the default case.

81
00:05:25,290 --> 00:05:30,930
Now right now I think that we can probably just forget any fancy markup let's put in some dummy values

82
00:05:30,930 --> 00:05:34,830
here just so we can test out inside the browser and make sure that this entire approach is going to

83
00:05:34,830 --> 00:05:36,410
work appropriately.

84
00:05:36,540 --> 00:05:43,980
So for the No case I will return still logging or still deciding because that's what it really means.

85
00:05:43,980 --> 00:05:49,000
It means that we're still waiting for our requests to be resolved for the false case.

86
00:05:49,080 --> 00:05:51,920
It means I'm logged out.

87
00:05:52,470 --> 00:05:56,580
And then for the default case it means that I'm logged in.

88
00:05:57,270 --> 00:05:57,530
OK.

89
00:05:57,570 --> 00:06:06,150
So now let's replace everything inside the US down here with a call to render content.

90
00:06:06,280 --> 00:06:10,010
So inside the well I can replace the fly with a call.

91
00:06:10,020 --> 00:06:14,660
So we're referencing some javascript inside of some GSX So we knew the curly braces here.

92
00:06:14,820 --> 00:06:18,970
This dot render content like so.

93
00:06:19,180 --> 00:06:20,170
So let's give this a shot.

94
00:06:20,170 --> 00:06:23,880
And I think when we test this out it will be awfully interesting to see what happens.

95
00:06:24,100 --> 00:06:29,230
So when we go back over we already got our refresh and you can see that I currently am logged out because

96
00:06:29,230 --> 00:06:31,780
I just logged out on this other tab over here.

97
00:06:31,780 --> 00:06:36,400
Now what's really interesting however and to kind of prove the case of why we needed these three separate

98
00:06:36,400 --> 00:06:41,920
values coming out of the author douceur two really very clearly does designate our current authentication

99
00:06:41,920 --> 00:06:42,750
status.

100
00:06:42,760 --> 00:06:48,200
We're going to refresh the page and when we do I want you to watch the text right here very carefully.

101
00:06:48,250 --> 00:06:51,710
So when I refreshed it it's very fast.

102
00:06:51,730 --> 00:06:58,850
But every now and then you can kind of just for like a half second see the text loading.

103
00:06:59,140 --> 00:07:02,230
See the still deciding text right here.

104
00:07:02,380 --> 00:07:07,030
Now a better way that can really test this out very effectively is to throttle our Internet connection

105
00:07:07,280 --> 00:07:12,320
and then we can use that and by enable the inside of the chrome developer console.

106
00:07:12,340 --> 00:07:16,860
So up here on the chrome developer console you'll see toggle device toolbar.

107
00:07:17,230 --> 00:07:23,950
If we click that and and click the dots over here you can see something that says remove network throttling

108
00:07:23,960 --> 00:07:28,680
now we don't want to remove network throttling you know the setting might have actually been moved slightly.

109
00:07:28,690 --> 00:07:33,850
I'll tell you what I think that just like five minutes ago I actually updated my chrome installation

110
00:07:33,940 --> 00:07:35,290
to the latest version of chrome.

111
00:07:35,300 --> 00:07:37,060
I think they might have changed the location of that.

112
00:07:37,060 --> 00:07:42,370
So let's take a quick pause to find where the new location of throttling is and we'll be able to test

113
00:07:42,370 --> 00:07:44,110
this out and really verify that.

114
00:07:44,200 --> 00:07:47,430
Yes we really truly needed these three authentication States.

115
00:07:47,620 --> 00:07:48,330
So a quick break.

116
00:07:48,340 --> 00:07:49,890
We'll come back and we'll test this thing out.