1
00:00:01,110 --> 00:00:02,208
Instructor: In the last section, we added in

2
00:00:02,208 --> 00:00:04,200
our render buttons method right here

3
00:00:04,200 --> 00:00:05,580
to the app component.

4
00:00:05,580 --> 00:00:07,470
So we've got these two buttons that are being displayed

5
00:00:07,470 --> 00:00:08,670
on the screen.

6
00:00:08,670 --> 00:00:10,350
If a user clicks on either one,

7
00:00:10,350 --> 00:00:12,630
we presumably want to log the user in

8
00:00:12,630 --> 00:00:14,880
or log them out of our application.

9
00:00:14,880 --> 00:00:17,790
To authenticate or deauthenticate a user,

10
00:00:17,790 --> 00:00:19,440
we had created that action creator

11
00:00:19,440 --> 00:00:24,180
called changeAuth inside of our actions index.js file.

12
00:00:24,180 --> 00:00:25,680
So inside of here at the very bottom,

13
00:00:25,680 --> 00:00:27,210
you'll recall we put this action creator

14
00:00:27,210 --> 00:00:29,070
together just a moment ago.

15
00:00:29,070 --> 00:00:31,836
We can call changeAuth with either true or false

16
00:00:31,836 --> 00:00:34,920
and that will flip the Boolean recording whether

17
00:00:34,920 --> 00:00:37,870
or not the user is authenticated inside of our application.

18
00:00:38,910 --> 00:00:41,580
So all we have to do is import this changeAuth

19
00:00:41,580 --> 00:00:43,860
action creator into our app file

20
00:00:43,860 --> 00:00:46,380
and then wire it up to the component.

21
00:00:46,380 --> 00:00:49,410
So I'm gonna flip back over to the app component.

22
00:00:49,410 --> 00:00:54,410
At the top I will import star as actions from actions

23
00:00:55,380 --> 00:00:57,870
and then I'll take all of our action creators and wire them

24
00:00:57,870 --> 00:01:00,520
up to the connect function at the bottom of the file.

25
00:01:01,380 --> 00:01:04,620
So at the bottom of the file, here's my connect function

26
00:01:04,620 --> 00:01:07,893
and as the second argument I'll pass in actions like so.

27
00:01:10,122 --> 00:01:12,810
So now we can go back up to that render button method

28
00:01:12,810 --> 00:01:14,970
and we're gonna add a click event handler

29
00:01:14,970 --> 00:01:17,220
to each of these buttons.

30
00:01:17,220 --> 00:01:18,187
If a user clicks on this sign out button,

31
00:01:18,187 --> 00:01:22,260
we'll probably want to call that changeAuth action creator

32
00:01:22,260 --> 00:01:25,230
with a value of false to indicate that we want

33
00:01:25,230 --> 00:01:28,110
to change the user's authentication status to false

34
00:01:28,110 --> 00:01:30,510
or not logged in.

35
00:01:30,510 --> 00:01:34,710
So for the first button, I'm gonna add an on click handler.

36
00:01:34,710 --> 00:01:36,540
Whenever a user clicks on this thing,

37
00:01:36,540 --> 00:01:38,520
we're gonna have an arrow function

38
00:01:38,520 --> 00:01:43,520
that will call this.props.changeAuth with a value of false.

39
00:01:45,660 --> 00:01:48,450
And then I'm going to do a little bit of reformatting here

40
00:01:48,450 --> 00:01:50,970
just so you can see this entire line of code.

41
00:01:50,970 --> 00:01:53,070
Cause right now it's a little bit unclear.

42
00:01:57,540 --> 00:02:01,140
And there we go. So a lot better.

43
00:02:01,140 --> 00:02:03,540
Now when I save this file, my code formatter

44
00:02:03,540 --> 00:02:05,370
might recollapse this thing again,

45
00:02:05,370 --> 00:02:06,990
but at least for right now you can get a better sense

46
00:02:06,990 --> 00:02:08,490
of what's going on.

47
00:02:08,490 --> 00:02:10,620
So now that we've got the sign out button put together

48
00:02:10,620 --> 00:02:13,860
we'll repeat that same process for this sign in as well.

49
00:02:13,860 --> 00:02:16,170
If a user clicks on the sign button or sign in,

50
00:02:16,170 --> 00:02:18,780
we probably want to call that changeAuth action creator

51
00:02:18,780 --> 00:02:20,609
with a value of true to indicate that

52
00:02:20,609 --> 00:02:22,683
the user should be authenticated.

53
00:02:23,520 --> 00:02:25,440
So I'm gonna do the same little bit of reformatting

54
00:02:25,440 --> 00:02:26,913
for this button tag as well.

55
00:02:31,470 --> 00:02:33,300
Like so, that's good.

56
00:02:33,300 --> 00:02:35,550
And then I'll add on the on click handler.

57
00:02:35,550 --> 00:02:39,000
So I'll say on click, run the arrow function to

58
00:02:39,000 --> 00:02:43,323
call this.props.changeAuth with true.

59
00:02:45,630 --> 00:02:46,680
Now I'm gonna save that here.

60
00:02:46,680 --> 00:02:48,210
Let me undo that, just so you can see it

61
00:02:48,210 --> 00:02:49,500
before I actually save this

62
00:02:49,500 --> 00:02:52,440
and my code formatter just butchers it.

63
00:02:52,440 --> 00:02:54,420
So just to make sure you see what's going on here.

64
00:02:54,420 --> 00:02:56,883
So for sign out, we want to call changeAuth with false.

65
00:02:56,883 --> 00:03:00,930
If we wanna sign in, we want to call changeAuth with true.

66
00:03:00,930 --> 00:03:02,550
All right, now we'll save this thing

67
00:03:02,550 --> 00:03:04,320
and now we can go back over to our browser

68
00:03:04,320 --> 00:03:05,583
and test this out.

69
00:03:07,350 --> 00:03:09,693
So back over here, I'll do a quick refresh.

70
00:03:14,490 --> 00:03:15,990
Now I should be able to click on sign in

71
00:03:15,990 --> 00:03:18,630
and see the button toggle over to sign out.

72
00:03:18,630 --> 00:03:20,010
And then of course I can click on that

73
00:03:20,010 --> 00:03:21,750
and it goes back to sign in.

74
00:03:21,750 --> 00:03:25,200
So now we've got that simple Boolean inside of our reducer

75
00:03:25,200 --> 00:03:27,420
or our redux state that says whether or not

76
00:03:27,420 --> 00:03:29,490
our user is authenticated.

77
00:03:29,490 --> 00:03:32,670
So that's pretty much it for the actual kind of react router

78
00:03:32,670 --> 00:03:34,410
and redux side of things.

79
00:03:34,410 --> 00:03:36,090
Now we get to continue in the next section

80
00:03:36,090 --> 00:03:38,160
and figure out how we actually put together

81
00:03:38,160 --> 00:03:39,960
a higher order component.

82
00:03:39,960 --> 00:03:42,241
So everything up to this point was just preparation work.

83
00:03:42,241 --> 00:03:44,850
Now we get to really dive into the fun stuff.

84
00:03:44,850 --> 00:03:46,290
So quick break and we'll take care of that

85
00:03:46,290 --> 00:03:47,313
in the next section.