1
00:00:00,510 --> 00:00:02,700
Lesing we have to take care of inside the head.

2
00:00:02,730 --> 00:00:07,350
Before we move on to our next feature is to make sure that the logo up here is a link that the user

3
00:00:07,350 --> 00:00:11,580
can click to go back to some root page inside of our application.

4
00:00:11,580 --> 00:00:15,790
Now the reason that the header up here or the link inside of it is going to be a little bit more tricky.

5
00:00:15,900 --> 00:00:21,630
Is that the page that the link directs to is going to change depending on whether or not the user is

6
00:00:21,630 --> 00:00:22,400
logged in.

7
00:00:22,620 --> 00:00:26,250
So just think about it if the user is not signed into our application.

8
00:00:26,310 --> 00:00:31,260
Clicking on this on this button right here should probably take the user back to our route route where

9
00:00:31,260 --> 00:00:33,960
essentially the landing component right here.

10
00:00:33,960 --> 00:00:42,580
However if the user is logged in and so if we log in right now by going through the flow I would really

11
00:00:42,580 --> 00:00:47,650
want to make sure that the logo instead sends the user back to the dashboard screen which we are on

12
00:00:47,650 --> 00:00:48,400
right now.

13
00:00:48,670 --> 00:00:53,330
And remember we can access this dashboard screen by going to the slash survey's route.

14
00:00:53,560 --> 00:00:58,930
So essentially depending on whether or not you were logged in I wanted to change where the user goes

15
00:00:58,930 --> 00:01:00,670
when they click on the logo up here.

16
00:01:01,120 --> 00:01:06,680
So let's open up our head or component inside of our source components directory will find the header

17
00:01:07,220 --> 00:01:07,710
file.

18
00:01:07,720 --> 00:01:08,900
Here it is right here.

19
00:01:09,030 --> 00:01:14,530
And if we scroll down a little bit we'll find the existing tag that houses the email the logo that is

20
00:01:14,530 --> 00:01:17,170
appearing on the left hand side of the screen.

21
00:01:17,170 --> 00:01:17,940
Now here's the thing.

22
00:01:17,950 --> 00:01:21,570
At present we are using an anchor tag and anchor tags.

23
00:01:21,580 --> 00:01:28,960
How are how we do classic navigation between HTML documents inside of a traditional web page.

24
00:01:29,020 --> 00:01:31,880
However we don't really have a traditional web page here.

25
00:01:31,900 --> 00:01:35,280
We have a page that is being rendered by re-act router.

26
00:01:35,380 --> 00:01:40,130
And so when we say that we want to have a link that we can click to go to a different page.

27
00:01:40,210 --> 00:01:46,120
What we really mean to say is that we want a link to click that will tell a re-act router to update

28
00:01:46,120 --> 00:01:49,100
some of the components are actually visible on the screen.

29
00:01:49,570 --> 00:01:55,450
So let's take a look at a diagram we're now going to move forward with re-act router and use that for

30
00:01:55,450 --> 00:02:01,070
a lot of the different navigation inside of our application to handle navigation with re-act router.

31
00:02:01,150 --> 00:02:04,140
We had access to something called the link tag.

32
00:02:04,450 --> 00:02:10,450
This is the tag or react component that is provided by the re-act router library and we use it to navigate

33
00:02:10,480 --> 00:02:16,560
around to different routes that are hosted or being routed by re-act router.

34
00:02:16,630 --> 00:02:23,800
This is in direct competition with traditional atax or anchor tags which are used to navigate to completely

35
00:02:23,800 --> 00:02:26,010
different HTL documents.

36
00:02:26,080 --> 00:02:31,720
So some locations inside of our application we really do want an anchor tag because we want to navigate

37
00:02:31,720 --> 00:02:37,090
to a completely different domain or a completely different age HTML document and a great example of

38
00:02:37,090 --> 00:02:42,370
that would be the logon button that weve already put together.

39
00:02:42,370 --> 00:02:47,710
So up here inside of our switch statement inside the header we have the case in which a user is not

40
00:02:47,710 --> 00:02:50,060
logged in to log in with Google.

41
00:02:50,080 --> 00:02:56,140
We want to make sure that the user navigates to a completely different domain a different age HTML document

42
00:02:56,350 --> 00:02:57,970
to go through the water flow.

43
00:02:58,330 --> 00:03:03,130
But in order for a user to just navigate around our application we will instead use this link tag right

44
00:03:03,130 --> 00:03:04,120
here.

45
00:03:04,120 --> 00:03:06,040
So let's figure out how you celing tag.

46
00:03:06,250 --> 00:03:11,430
We're going to first import it into our head or component and then replace the existing anchor tag that

47
00:03:11,440 --> 00:03:15,140
we have to represent the logo with that link tag.

48
00:03:15,650 --> 00:03:19,370
OK so back over here inside the header at the very top.

49
00:03:19,400 --> 00:03:26,380
I'm first going to import the link component from re-act router DOM like so.

50
00:03:26,710 --> 00:03:32,800
And just as a reminder remember that we are making use a library called re-act Rotterdam which is specifically

51
00:03:32,800 --> 00:03:37,510
the flavor of re-act router that works inside of the browser.

52
00:03:37,510 --> 00:03:41,780
Now down inside of our render method we'll find the existing anchor tag.

53
00:03:41,900 --> 00:03:43,470
And we don't want to anchor tag anymore.

54
00:03:43,570 --> 00:03:48,700
Instead we want to use the linked tag because we want to tell us specifically re-act router that we

55
00:03:48,700 --> 00:03:51,400
want to show something else on the screen.

56
00:03:51,400 --> 00:03:56,670
So I'm going to replace the anchor tag with a link tag instead.

57
00:03:59,020 --> 00:04:02,990
Next we're going to tell the link tag where it should redirect the user to.

58
00:04:03,010 --> 00:04:08,230
Whenever someone clicks on it so I'm going to add on an additional property called to

59
00:04:11,030 --> 00:04:16,660
now remember that I just said that we want the page that the user goes to when they click on this link

60
00:04:16,780 --> 00:04:20,610
to change depending upon whether or not they are currently signed in.

61
00:04:20,620 --> 00:04:25,640
So we're going to make sure that we have access to that prop called off.

62
00:04:25,650 --> 00:04:28,300
Remember we've linked this up just very recently.

63
00:04:28,300 --> 00:04:33,670
This dark not start off tells us whether or not the users currently signed into the application.

64
00:04:33,670 --> 00:04:41,080
So if we look at that this drops off property and it is truthy or it contains an object then we want

65
00:04:41,080 --> 00:04:45,250
to make sure that this is a route to the slash surveys route.

66
00:04:45,370 --> 00:04:51,400
Otherwise the user should be redirected to the route route of just forward slash by itself.

67
00:04:51,400 --> 00:04:54,470
So going to give myself a little bit of space to work with here.

68
00:04:54,680 --> 00:05:00,660
I'm going to New Line once and twice and I'm going to take the closing bracket over here.

69
00:05:00,670 --> 00:05:03,000
I'm going to put it on the new line like so.

70
00:05:03,340 --> 00:05:09,630
So now we've got oping link to class name and then the closing bracket.

71
00:05:10,030 --> 00:05:15,760
Then inside of the two statement right here the two prop we're going to look at this prop stock user

72
00:05:16,360 --> 00:05:23,440
if this thing exists I want to go to slash service otherwise I want to go to just slash and so to get

73
00:05:23,440 --> 00:05:30,280
that logic in here we're going to use a turner free expression a turner expression exists by placing

74
00:05:30,280 --> 00:05:32,970
some type of Boolean logic right here.

75
00:05:33,160 --> 00:05:35,660
Something that is either truthy or falsie.

76
00:05:35,800 --> 00:05:40,790
We then put down a question mark we put down the value that we want to return.

77
00:05:40,840 --> 00:05:49,390
If this is truthy which for us is going to be slash surveys and then a colon then the value to return.

78
00:05:49,390 --> 00:05:55,110
If this is falsie which is going to be for us for cash like so.

79
00:05:55,330 --> 00:06:00,480
So essentially does this not start user exist if this is an object.

80
00:06:00,480 --> 00:06:05,080
Remember it's an object if the user is signed in it's going to be the user model then we're going to

81
00:06:05,080 --> 00:06:07,320
return the string slash service.

82
00:06:07,540 --> 00:06:09,250
Otherwise if this is falsie.

83
00:06:09,310 --> 00:06:17,430
So if this user is no or false and McCain the user is not logged in then we are going to return forward

84
00:06:17,440 --> 00:06:18,930
slash like so.

85
00:06:19,420 --> 00:06:19,750
OK.

86
00:06:19,780 --> 00:06:22,150
So let's test this out and see how it works.

87
00:06:22,180 --> 00:06:23,210
I'll save the page.

88
00:06:23,220 --> 00:06:24,270
We'll flip back over.

89
00:06:24,290 --> 00:06:31,090
There's the refresh now when I hover over the logo up here it looks like it is a link.

90
00:06:31,090 --> 00:06:36,520
If I click it however I get sent back to the root of the application.

91
00:06:36,520 --> 00:06:39,120
And you know what I just realized I made a little typo over here.

92
00:06:39,150 --> 00:06:42,070
It's not this Propst user it's prod start off.

93
00:06:42,100 --> 00:06:44,640
I apologize for that typo.

94
00:06:44,960 --> 00:06:46,310
OK let's try that again.

95
00:06:47,620 --> 00:06:53,610
So now when I hover over it I'm currently logged in see how it says log out over here.

96
00:06:53,720 --> 00:06:56,480
So when I click on the link I get sent to the dashboard screen.

97
00:06:56,650 --> 00:07:03,390
But if I log out and then I click the link again it continues to just send me back to the landing screen.

98
00:07:03,700 --> 00:07:09,980
Now I can log in with Google again and go through the Auth. flow.

99
00:07:10,960 --> 00:07:16,940
I'm now signed in and when I click on the link I get sent get sent to slash surveys.

100
00:07:16,960 --> 00:07:19,320
So yep it looks like it's working correctly.

101
00:07:19,330 --> 00:07:20,650
Again I apologize for the typo.

102
00:07:20,650 --> 00:07:24,740
Here it is not this prob stop user stop start off.

103
00:07:25,030 --> 00:07:29,940
I sometimes call this the stop Propst user on personal projects I work on.

104
00:07:30,220 --> 00:07:32,230
About half as many times I call it auth.

105
00:07:32,260 --> 00:07:36,300
So sometimes I just mentally get a little mixed up between the two.

106
00:07:36,330 --> 00:07:38,500
Anyways it looks like this has worked out pretty well.

107
00:07:38,560 --> 00:07:42,690
So I think that the header now really truly and I know I've said this a couple of times.

108
00:07:42,700 --> 00:07:45,130
I think the header is pretty well buttoned up.

109
00:07:45,130 --> 00:07:49,510
So let's continue the next section and talk about the next feature that we're going to work on inside

110
00:07:49,510 --> 00:07:49,840
of our.