1
00:00:01,110 --> 00:00:02,790
-: In this section, we're gonna do a little bit

2
00:00:02,790 --> 00:00:05,010
of polish on our header component.

3
00:00:05,010 --> 00:00:07,140
So right now we're always showing all the buttons

4
00:00:07,140 --> 00:00:08,850
inside there, regardless of whether

5
00:00:08,850 --> 00:00:10,590
or not the user is signed in.

6
00:00:10,590 --> 00:00:12,600
In addition, all these links right here

7
00:00:12,600 --> 00:00:14,160
are sandwiched up against each other.

8
00:00:14,160 --> 00:00:17,790
So I just wanna do, maybe a touch of styling as well.

9
00:00:17,790 --> 00:00:20,910
So to get started, I'll open up my header component,

10
00:00:20,910 --> 00:00:23,220
inside of my components directory.

11
00:00:23,220 --> 00:00:24,330
And then inside of here,

12
00:00:24,330 --> 00:00:27,120
I'm going to define a helper method.

13
00:00:27,120 --> 00:00:29,730
I'll call it something like, render links.

14
00:00:29,730 --> 00:00:31,030
I think that's reasonable.

15
00:00:32,400 --> 00:00:33,900
And then inside of here we're gonna check

16
00:00:33,900 --> 00:00:36,090
to see if the user is signed in.

17
00:00:36,090 --> 00:00:37,710
If they're signed in then we're gonna

18
00:00:37,710 --> 00:00:41,430
show the link for sign out and feature.

19
00:00:41,430 --> 00:00:42,930
Otherwise, if they're not signed in,

20
00:00:42,930 --> 00:00:45,603
we'll show sign up and sign in.

21
00:00:46,650 --> 00:00:48,270
In order to figure out whether or not a user

22
00:00:48,270 --> 00:00:49,830
is signed in in the first place,

23
00:00:49,830 --> 00:00:51,870
we need to import our connect helper,

24
00:00:51,870 --> 00:00:55,380
and pull out that authenticated piece of state.

25
00:00:55,380 --> 00:00:56,550
So at the top,

26
00:00:56,550 --> 00:00:59,680
I'll import connect from react-redux

27
00:01:01,440 --> 00:01:03,450
and then down at the bottom,

28
00:01:03,450 --> 00:01:05,760
I'll define a,

29
00:01:05,760 --> 00:01:08,580
map state to props.

30
00:01:08,580 --> 00:01:10,620
I'll take my state object,

31
00:01:10,620 --> 00:01:13,511
and I will return authenticated,

32
00:01:13,511 --> 00:01:15,810
coming from state dot auth

33
00:01:15,810 --> 00:01:18,870
dot authenticated,

34
00:01:18,870 --> 00:01:19,703
like so.

35
00:01:21,464 --> 00:01:24,100
Then we could put in our connect function

36
00:01:24,990 --> 00:01:27,840
with map state to props.

37
00:01:27,840 --> 00:01:29,430
I'll make sure I get my parentheses

38
00:01:29,430 --> 00:01:31,230
around the header component as well.

39
00:01:33,090 --> 00:01:33,960
Okay, so that's good.

40
00:01:33,960 --> 00:01:35,370
Now our component knows whether

41
00:01:35,370 --> 00:01:37,233
or not the user is authenticated.

42
00:01:38,280 --> 00:01:41,403
I'll now go back up to my render links function right here,

43
00:01:42,330 --> 00:01:46,383
and I'll say if this dot props dot authenticated,

44
00:01:47,520 --> 00:01:48,353
then I'm going to

45
00:01:48,353 --> 00:01:51,003
return a div.

46
00:01:54,150 --> 00:01:56,850
So if the user is authenticated, we want to show

47
00:01:56,850 --> 00:01:59,910
the sign out and feature links.

48
00:01:59,910 --> 00:02:02,700
So I'm gonna copy these two links right here,

49
00:02:02,700 --> 00:02:04,533
and I'll put them inside that div.

50
00:02:07,816 --> 00:02:11,490
And then else, so if the user's not authenticated,

51
00:02:11,490 --> 00:02:13,020
then I'm going to return the two buttons

52
00:02:13,020 --> 00:02:15,520
that will allow them to either sign up or sign in.

53
00:02:16,650 --> 00:02:19,023
So I'll grab sign up and sign in right here.

54
00:02:19,903 --> 00:02:21,570
Here's the return statement.

55
00:02:21,570 --> 00:02:23,770
I'll make sure I put a div in there as well,

56
00:02:25,194 --> 00:02:27,483
and then I'll paste in the two links.

57
00:02:29,550 --> 00:02:34,320
Then finally, right underneath my redux off link,

58
00:02:34,320 --> 00:02:37,953
I will call this dot, render links.

59
00:02:40,290 --> 00:02:43,233
So this dot render links, like so.

60
00:02:44,430 --> 00:02:46,680
Okay, I think we're ready to test this out.

61
00:02:46,680 --> 00:02:48,530
So let's go back over to the browser.

62
00:02:51,600 --> 00:02:56,310
Now when we refresh the page, so I'm currently signed in,

63
00:02:56,310 --> 00:02:58,320
so I see the buttons that allow me to sign out,

64
00:02:58,320 --> 00:03:00,150
or go to the feature page.

65
00:03:00,150 --> 00:03:03,630
If I sign out, it goes to sign up and sign in.

66
00:03:03,630 --> 00:03:05,520
Now I can go to sign in.

67
00:03:05,520 --> 00:03:10,339
I'll do desk at desk dot com and sign into the application.

68
00:03:10,339 --> 00:03:12,990
All right, it looks pretty good.

69
00:03:12,990 --> 00:03:14,370
Let's take a quick pause right here.

70
00:03:14,370 --> 00:03:15,540
We'll come back in the next section

71
00:03:15,540 --> 00:03:17,580
and we'll do just a touch of styling on that header,

72
00:03:17,580 --> 00:03:20,393
to make it look a little bit better that it does right now.