1
00:00:00,660 --> 00:00:06,220
We just finished wiring up everything on the redux side of our application or at least the initial boilerplate.

2
00:00:06,240 --> 00:00:12,300
Anyways at this point we have a single reducer called the author douceur and we have said that the author

3
00:00:12,300 --> 00:00:17,840
douceur is really just responsible for deciding whether or not a user is currently logged in.

4
00:00:18,270 --> 00:00:20,010
So why do we really care about that though.

5
00:00:20,100 --> 00:00:24,390
Well look obviously there is an obvious answer here we only want the user to be able to use our application

6
00:00:24,420 --> 00:00:25,540
if they're logged in.

7
00:00:25,650 --> 00:00:32,360
But really specifically thinking about our application what aspects of it are going to change when the

8
00:00:32,370 --> 00:00:34,870
user is or is not logged in.

9
00:00:35,190 --> 00:00:39,960
Once we understand this a little bit better once we understand what the impact of having user logged

10
00:00:39,960 --> 00:00:45,990
in or logged out is I think we'll have a better time or an easier time at least deciding what next area

11
00:00:45,990 --> 00:00:48,610
we need to work on inside of our application.

12
00:00:48,660 --> 00:00:53,930
So let's go back to our mock up and look at some of the different aspects of this thing.

13
00:00:54,300 --> 00:01:00,570
So again the very easiest The first thing that I really see to my eye that really cares about whether

14
00:01:00,570 --> 00:01:04,840
or not a user is logged in is the content inside of our Hetter.

15
00:01:05,050 --> 00:01:07,820
And so really you know says log in sign up right here.

16
00:01:07,830 --> 00:01:14,070
Really we essentially want to show something that says like log in with Google or something like that

17
00:01:14,100 --> 00:01:16,800
or sign in with Google on the head or up here.

18
00:01:16,800 --> 00:01:19,090
If a user is not logged in.

19
00:01:19,440 --> 00:01:25,080
Once a user does sign in with Google how ever once we know they are in fact logged in then that header

20
00:01:25,110 --> 00:01:27,640
is supposed to just kind of magically change.

21
00:01:27,780 --> 00:01:32,250
I no longer want to show that signing with Google button on the top right.

22
00:01:32,280 --> 00:01:37,830
Instead I want to show like a log out button and a button to add money to their account which we will

23
00:01:37,830 --> 00:01:39,940
talk about in great detail later on.

24
00:01:40,140 --> 00:01:44,160
And these credits thing which again we'll talk about in great detail later on.

25
00:01:44,160 --> 00:01:50,250
So at first glance I think its very easy very clear to say that our Hetter component is going to change

26
00:01:50,250 --> 00:01:54,820
in some fashion when ever the user is logged in or lot of doubt.

27
00:01:54,840 --> 00:01:59,940
There's one other area that we need to be thinking about when the user is or is not signed in.

28
00:02:00,330 --> 00:02:04,900
And that is some of the different routes that the user has access to.

29
00:02:05,340 --> 00:02:09,690
So here's a diagram of some of the different routes we have inside of our application.

30
00:02:09,720 --> 00:02:16,860
So at the very top the index G-S file that shows the component and the app component is going to show

31
00:02:16,860 --> 00:02:21,330
the header the landing the dashboard and the survey new components.

32
00:02:21,360 --> 00:02:27,270
Now the heavier it is always going to be visible no matter what yes the content inside the header is

33
00:02:27,270 --> 00:02:30,330
going to change slightly depending on whether or not the user is logged in.

34
00:02:30,420 --> 00:02:35,580
But we can confidently say that no matter what the user should always be able to see the head or some

35
00:02:35,580 --> 00:02:40,800
of the other components however are going to just change their behavior slightly depending on whether

36
00:02:40,800 --> 00:02:42,520
or not the users authenticated.

37
00:02:42,840 --> 00:02:47,490
So the landing screen Well you know its ok if someone wants to see our landing screen if you want to

38
00:02:47,490 --> 00:02:51,810
see the landing screen inside of our application if you want to see the markings screen that's totally

39
00:02:51,810 --> 00:02:52,220
fine.

40
00:02:52,230 --> 00:02:53,960
We will let you see that.

41
00:02:53,990 --> 00:02:59,670
However other things like say the dashboard where users sees a list of all the surveys they've created

42
00:02:59,670 --> 00:03:03,680
over time or the form to create a new survey.

43
00:03:03,690 --> 00:03:09,120
Those are both things that we don't really want the user to have access to unless they absolutely positively

44
00:03:09,180 --> 00:03:11,120
are logged into our application.

45
00:03:11,130 --> 00:03:19,140
So I think that it is safe to say that if a user is or is not logged in we want to have some logic tied

46
00:03:19,140 --> 00:03:21,820
to our dashboard and survey components.

47
00:03:22,220 --> 00:03:27,780
And if a user is or is not logged in we want to have some content or excuse me some logic inside of

48
00:03:27,780 --> 00:03:30,880
our head or to decide what content to show inside of there.

49
00:03:31,270 --> 00:03:31,920
OK.

50
00:03:32,460 --> 00:03:36,390
So with this in mind I think thats absolutely the next step.

51
00:03:36,390 --> 00:03:41,070
Without a doubt that were going to want to accomplish is to make sure that we can start to get some

52
00:03:41,070 --> 00:03:43,680
of these different components which we have not yet created.

53
00:03:43,680 --> 00:03:48,180
We still need to do to be visible on the screen once we can actually show them.

54
00:03:48,240 --> 00:03:53,460
Then we can start thinking about adding in some logic to say hey you should or you shouldn't be able

55
00:03:53,460 --> 00:03:58,370
to see this thing or this individual component based on whether or not you are logged in.

56
00:03:58,380 --> 00:04:04,590
So long story short we want to have the ability to show different routes or different sets of components

57
00:04:04,590 --> 00:04:09,660
on the screen and then add some logic to toggle whether or not a user can see them.

58
00:04:09,660 --> 00:04:14,170
So just thinking about navigation in general my mind immediately goes to react router.

59
00:04:14,310 --> 00:04:20,410
So I think that in the next section we should start to wire of re-act router inside of our application.

60
00:04:20,610 --> 00:04:25,350
Once we set up all these different components we'll then be able to add in some further logic to decide

61
00:04:25,350 --> 00:04:28,540
whether or not a user can see each individual one.

62
00:04:28,680 --> 00:04:29,450
OK.

63
00:04:29,820 --> 00:04:31,050
So that's the game plan.

64
00:04:31,050 --> 00:04:32,470
We're going to wiretap re-act router.

65
00:04:32,490 --> 00:04:35,210
We're going to get some of these different components visible on the screen.

66
00:04:35,220 --> 00:04:41,340
We'll then tackle the header and some of the individual components that depend on the user's authentication

67
00:04:41,340 --> 00:04:42,090
state.

68
00:04:42,090 --> 00:04:44,360
So let's take care of all this in the next section.