1
00:00:01,260 --> 00:00:03,450
Narrator: We just added in a renderHeader method

2
00:00:03,450 --> 00:00:05,103
to our App component.

3
00:00:06,000 --> 00:00:08,970
We also added in a renderButton method to this thing as well

4
00:00:08,970 --> 00:00:11,130
which is going to eventually house the logic

5
00:00:11,130 --> 00:00:13,560
to decide what button we should render,

6
00:00:13,560 --> 00:00:15,810
a button that's gonna sign the user in

7
00:00:15,810 --> 00:00:18,810
or a button that's going to sign the user out.

8
00:00:18,810 --> 00:00:20,340
Now, before we can actually figure out

9
00:00:20,340 --> 00:00:21,630
whether or not we need to show a button

10
00:00:21,630 --> 00:00:24,270
that says sign in or sign out, we need to make sure

11
00:00:24,270 --> 00:00:26,670
that our App component knows whether or not

12
00:00:26,670 --> 00:00:29,133
the user is actually signed in at all.

13
00:00:30,900 --> 00:00:33,060
Whether or not the user is signed in is recorded

14
00:00:33,060 --> 00:00:34,620
inside of our auth reducer

15
00:00:34,620 --> 00:00:36,720
and we had assigned the auth reducer

16
00:00:36,720 --> 00:00:38,970
to our auth piece of state.

17
00:00:38,970 --> 00:00:40,680
So the first thing we have to do inside of here

18
00:00:40,680 --> 00:00:42,840
is import our connect helper

19
00:00:42,840 --> 00:00:45,570
and we're going to define a mapStateToProps

20
00:00:45,570 --> 00:00:47,280
to tell our App component

21
00:00:47,280 --> 00:00:50,400
whether or not the user is currently signed in.

22
00:00:50,400 --> 00:00:52,230
So let's get to it.

23
00:00:52,230 --> 00:00:53,073
At the top,

24
00:00:54,270 --> 00:00:58,233
I will import my connect function from react-router.

25
00:00:59,100 --> 00:01:01,230
And then rather than trying to export

26
00:01:01,230 --> 00:01:04,800
or define and export my App component on a single line,

27
00:01:04,800 --> 00:01:07,020
I'm gonna move the export default statement

28
00:01:07,020 --> 00:01:09,120
down to the bottom of the file instead

29
00:01:09,120 --> 00:01:11,970
so that I have enough space to define my mapStateToProps.

30
00:01:12,941 --> 00:01:15,090
So I'm gonna cut that out of there.

31
00:01:15,090 --> 00:01:16,840
And then at the bottom of the file,

32
00:01:17,790 --> 00:01:20,673
I will add back in export default App.

33
00:01:21,690 --> 00:01:25,007
And right above that, I will define a mapStateToProps.

34
00:01:26,400 --> 00:01:28,590
So that's gonna get our state object.

35
00:01:28,590 --> 00:01:32,040
We will return an object with a key of auth

36
00:01:32,040 --> 00:01:34,710
and that will just take whatever value is coming out

37
00:01:34,710 --> 00:01:37,083
of our auth reducer at this point in time.

38
00:01:38,610 --> 00:01:40,380
Then we can make use of our connect function

39
00:01:40,380 --> 00:01:42,180
that we just imported.

40
00:01:42,180 --> 00:01:43,630
I'll pass mapStateToProps

41
00:01:47,100 --> 00:01:50,103
and get my other set of parentheses around the App as well.

42
00:01:52,110 --> 00:01:53,700
So now our App component knows

43
00:01:53,700 --> 00:01:55,740
whether or not the user is signed in.

44
00:01:55,740 --> 00:01:57,360
That means that now we can put together

45
00:01:57,360 --> 00:02:00,453
our renderButton method up here.

46
00:02:01,410 --> 00:02:03,360
So inside of renderButton,

47
00:02:03,360 --> 00:02:05,760
I'm gonna put down an if statement to check to see

48
00:02:05,760 --> 00:02:08,699
whether or not the user is signed in to start.

49
00:02:08,699 --> 00:02:10,800
So we are getting that auth Boolean

50
00:02:10,800 --> 00:02:14,763
or that auth flag on this.props.auth.

51
00:02:15,780 --> 00:02:18,180
So if the user is signed in,

52
00:02:18,180 --> 00:02:21,820
then we will immediately return a button tag

53
00:02:24,720 --> 00:02:27,240
that has the text Sign Out.

54
00:02:27,240 --> 00:02:28,560
So if the user is signed in,

55
00:02:28,560 --> 00:02:31,410
if true they are signed into the application right now,

56
00:02:31,410 --> 00:02:33,723
we want to give them the ability to sign out.

57
00:02:34,710 --> 00:02:38,370
Otherwise, so else, we'll say return,

58
00:02:38,370 --> 00:02:40,800
we want to show a button here as well,

59
00:02:40,800 --> 00:02:45,063
but this button will instead have the text of Sign In.

60
00:02:47,010 --> 00:02:48,060
And when I save this file,

61
00:02:48,060 --> 00:02:49,920
you're probably gonna see a bunch of this code jump

62
00:02:49,920 --> 00:02:52,020
thanks to my code formatter.

63
00:02:52,020 --> 00:02:52,950
So there we go.

64
00:02:52,950 --> 00:02:55,860
Okay, so a little bit of a jump there. Not that bad.

65
00:02:55,860 --> 00:02:56,700
So now we need to make sure

66
00:02:56,700 --> 00:03:00,060
that renderButton gets referenced inside of renderHeader.

67
00:03:00,060 --> 00:03:01,860
It is right here, so we're good to go.

68
00:03:01,860 --> 00:03:03,660
And we need to make sure that renderHeader gets called

69
00:03:03,660 --> 00:03:06,600
from our render method as well.

70
00:03:06,600 --> 00:03:09,090
So down here, right above our two route components,

71
00:03:09,090 --> 00:03:14,090
I'm gonna call this.renderHeader inside of my curly braces.

72
00:03:15,270 --> 00:03:17,100
All right, I think that we're ready for a test now.

73
00:03:17,100 --> 00:03:18,180
We don't actually have the ability

74
00:03:18,180 --> 00:03:20,340
to flip our authentication state,

75
00:03:20,340 --> 00:03:22,920
but we at least have the ability to show a header

76
00:03:22,920 --> 00:03:26,373
that should have the correct Sign In or Sign Out button.

77
00:03:27,480 --> 00:03:29,520
So I'll save this file and then I'll flip back

78
00:03:29,520 --> 00:03:31,420
over to my application in the browser.

79
00:03:32,610 --> 00:03:35,130
Aha, it looks like I made a silly typo in there.

80
00:03:35,130 --> 00:03:37,710
So I think two sections ago or this section,

81
00:03:37,710 --> 00:03:40,830
I must have imported from connect from react-router.

82
00:03:40,830 --> 00:03:43,713
My mistake, that's react-redux.

83
00:03:44,610 --> 00:03:47,560
I was looking at react-router right above it. That was bad.

84
00:03:48,540 --> 00:03:50,290
Okay, so let's see how we're doing.

85
00:03:52,470 --> 00:03:53,730
There's the reload

86
00:03:53,730 --> 00:03:56,430
and now we've got our not that great looking header,

87
00:03:56,430 --> 00:03:58,110
but hey, it's a start.

88
00:03:58,110 --> 00:03:59,700
So I can click on post a comment,

89
00:03:59,700 --> 00:04:01,950
which will take me to my post form,

90
00:04:01,950 --> 00:04:03,510
and I can go back to home

91
00:04:03,510 --> 00:04:05,160
and I can click on the Sign In button,

92
00:04:05,160 --> 00:04:06,270
which right now does nothing,

93
00:04:06,270 --> 00:04:08,880
but we're gonna fix that up in just a second.

94
00:04:08,880 --> 00:04:11,040
So this is looking like we're making some progress,

95
00:04:11,040 --> 00:04:13,590
just a little bit more setup and then we'll be able to focus

96
00:04:13,590 --> 00:04:15,570
on our higher order component.

97
00:04:15,570 --> 00:04:18,269
So quick break and we'll continue in the next section.