1
00:00:00,180 --> 00:00:06,780
All right, and once we have the basic nested pages structure in place before we start working on our

2
00:00:06,780 --> 00:00:12,030
nested pages, so they look more like this line, whatever we have right now.

3
00:00:12,570 --> 00:00:18,990
I also want to set up the dashboard, so my home proved to be a protected rod.

4
00:00:19,320 --> 00:00:20,370
Now what does that mean?

5
00:00:20,400 --> 00:00:24,150
Well, that means that eventually life and logging functionality.

6
00:00:24,510 --> 00:00:30,180
So once the user logs out, we actually kick it back to the main page.

7
00:00:30,630 --> 00:00:37,690
And also, if the user tries to access the dashboard without signing, it will do the same thing.

8
00:00:37,710 --> 00:00:39,570
We'll get back to the landing page.

9
00:00:39,900 --> 00:00:46,920
Similarly, how we have and registered page once the user logs in or registers, we programmatically

10
00:00:46,980 --> 00:00:48,570
navigate it to the dashboard.

11
00:00:49,050 --> 00:00:50,640
We'll kick it back to the landing.

12
00:00:50,910 --> 00:00:53,640
If there is no user in our state.

13
00:00:54,580 --> 00:01:01,330
And if you're familiar with the previous set ups in reactor water in Reactor six, it's pretty similar

14
00:01:01,780 --> 00:01:06,580
where effectively we want to set up protected root just in the pages.

15
00:01:07,030 --> 00:01:09,250
Of course, we need to set up all the imports and exports.

16
00:01:09,670 --> 00:01:14,080
Now, technically, you can make an argument that you can make it in the dashboard one.

17
00:01:14,620 --> 00:01:20,530
But there also might be some pages that is using particular drought as a general prejudice.

18
00:01:20,530 --> 00:01:24,280
So at least in my case, I'm going to set it up here in the pages.

19
00:01:24,640 --> 00:01:28,360
But yes, I mean, we will use this for the shared layout.

20
00:01:28,370 --> 00:01:34,030
So again, technically, you can make an argument that it belongs only in the dashboard, but that is

21
00:01:34,030 --> 00:01:41,110
really an integrity that is really your preference when we want to import that in the abstract.

22
00:01:41,440 --> 00:01:44,890
And then we want to wrap the shared layout where we have the element.

23
00:01:45,430 --> 00:01:50,200
So instead of just rendering shared layout, I want to wrap my shared layout.

24
00:01:50,530 --> 00:01:56,560
In particular, Rob and I was assigned a same case is going to be for any other page which you want

25
00:01:56,560 --> 00:01:57,100
to restrict.

26
00:01:57,310 --> 00:02:00,190
Essentially, you just want to wrap it in that protected draft.

27
00:02:01,200 --> 00:02:06,750
And in there, we'll get to things we'll get navigate as well as our use and context.

28
00:02:06,760 --> 00:02:07,170
Why?

29
00:02:07,710 --> 00:02:10,169
Because I want to have access to the user.

30
00:02:10,680 --> 00:02:17,430
And if the user does not exist, I can use the navigate component from React router down.

31
00:02:17,850 --> 00:02:19,920
So we return this one instead.

32
00:02:20,290 --> 00:02:22,320
And here we just need to provide a new problem.

33
00:02:22,770 --> 00:02:29,070
So where we want to send the user and in this case, we're trying to send it well back to the landing,

34
00:02:29,220 --> 00:02:29,580
correct?

35
00:02:29,940 --> 00:02:37,320
Now, if the user exists, then of course we bypass this condition and want to redo where it turned

36
00:02:37,320 --> 00:02:37,710
children.

37
00:02:38,010 --> 00:02:39,660
And what is the children in this case?

38
00:02:40,700 --> 00:02:43,010
It is our shared land.

39
00:02:43,310 --> 00:02:44,600
Hopefully this makes sense.

40
00:02:45,020 --> 00:02:47,000
So let's start cracking.

41
00:02:47,300 --> 00:02:53,600
I think I want to go first to the pages and go with my protector route for the time being, let's just

42
00:02:53,600 --> 00:02:54,710
set up a component.

43
00:02:54,710 --> 00:02:56,210
Let's not worry about those imports.

44
00:02:56,900 --> 00:03:01,490
So I'll just go over here and let's say that this is going to be a component.

45
00:03:01,940 --> 00:03:06,080
And for the time being, I just want to render the children.

46
00:03:06,710 --> 00:03:08,690
So let's set it up here, children.

47
00:03:09,810 --> 00:03:11,880
And not as far as the return, it's not going to be there.

48
00:03:12,390 --> 00:03:18,510
I was going to say children, and once I have this in place, then I want to navigate to the next one.

49
00:03:18,930 --> 00:03:21,060
I want to look for my protected one.

50
00:03:21,070 --> 00:03:22,470
So protect the drought.

51
00:03:22,850 --> 00:03:26,190
And let me add it to my exports as well.

52
00:03:26,490 --> 00:03:28,800
So I'm going to add here a comma.

53
00:03:29,280 --> 00:03:35,480
I'm going to move this sucker down, and I'm in good shape when we want to navigate to chess.

54
00:03:36,000 --> 00:03:39,780
We're looking for protected around over here from the pages again.

55
00:03:40,050 --> 00:03:44,760
I already explained my reasoning behind that and where I have the shared layout.

56
00:03:44,970 --> 00:03:45,870
What do I want to do?

57
00:03:46,290 --> 00:03:47,310
Well, I want to wrap it.

58
00:03:47,610 --> 00:03:54,240
I want to say that instead of just rendering shared layout, I'm going to go here with protected and

59
00:03:54,250 --> 00:03:54,550
wrote.

60
00:03:54,830 --> 00:03:58,350
And then let's place the shared layout inside of it.

61
00:03:58,620 --> 00:04:02,880
And if everything is correct, our setup is going to look exactly the same.

62
00:04:03,210 --> 00:04:08,430
So let me go here with me refresh just to double check and notice how everything works.

63
00:04:08,850 --> 00:04:15,330
Now, if I'm going to go back here and instead of children, I'm going to return something else.

64
00:04:15,660 --> 00:04:23,760
For example, I'm just going to say return and there and I say there is no use or again, whatever gibberish

65
00:04:23,760 --> 00:04:24,720
text you want or hear.

66
00:04:24,720 --> 00:04:27,240
So there is no user.

67
00:04:27,600 --> 00:04:29,490
And then let's remove this sucker over here.

68
00:04:29,760 --> 00:04:32,880
You'll notice that now I have this, there is no user.

69
00:04:33,270 --> 00:04:35,670
So essentially, this is going to be our approach.

70
00:04:36,910 --> 00:04:43,070
If there is a user we return wanting, if there is no user, then we return something else.

71
00:04:43,540 --> 00:04:46,090
So if there's user, we return children.

72
00:04:46,510 --> 00:04:55,000
If there is no user, then we actually return a navigate component which will programmatically navigate

73
00:04:55,000 --> 00:04:55,930
that user away.

74
00:04:56,080 --> 00:05:00,820
And again, you can wrap any more out you want in this component.

75
00:05:01,270 --> 00:05:03,070
The idea is going to be exactly the same.

76
00:05:03,430 --> 00:05:04,960
And what are we looking for here?

77
00:05:05,020 --> 00:05:08,890
Well, like I said, navigate as well as the user.

78
00:05:09,220 --> 00:05:15,010
So in this case, we may set up the user first, I guess, and go with use and then have context.

79
00:05:15,160 --> 00:05:16,450
So that gets me right.

80
00:05:16,810 --> 00:05:20,740
Then I want to look for my user from there, of course, and I'll invoke it.

81
00:05:21,040 --> 00:05:23,470
And I also want to get that navigate component.

82
00:05:23,860 --> 00:05:31,060
So import and then navigate from and again gives me a React router should be React router down.

83
00:05:31,510 --> 00:05:37,150
So once I have my user now, I just want to check if the user exists.

84
00:05:37,330 --> 00:05:37,960
Beautiful.

85
00:05:38,530 --> 00:05:40,540
That will render the children.

86
00:05:41,020 --> 00:05:44,500
If the user doesn't exist, then will navigate away.

87
00:05:44,590 --> 00:05:50,770
So there's no user, then let's go with our turn and this is extremely important that you place this

88
00:05:50,770 --> 00:05:51,160
return.

89
00:05:51,580 --> 00:05:56,170
Otherwise, JavaScript is just going to keep on reading the code, so make sure you have this return

90
00:05:56,530 --> 00:06:00,790
then where you want to go with and navigate and it is a component.

91
00:06:01,420 --> 00:06:05,710
And here we have a little prop and basically where we want to navigate.

92
00:06:05,830 --> 00:06:08,650
So I'm going to go here with a landing one.

93
00:06:08,890 --> 00:06:14,440
So let's service and let's try it out right now and notice how there is no user.

94
00:06:14,590 --> 00:06:16,390
We right away navigate landing.

95
00:06:16,570 --> 00:06:21,850
So now I can try all day long accessing the dashboard, but I won't be successful.

96
00:06:22,060 --> 00:06:22,450
Why?

97
00:06:22,810 --> 00:06:25,420
Well, because there is no user in my state.

98
00:06:25,690 --> 00:06:26,070
Correct.

99
00:06:26,350 --> 00:06:32,920
So only once we go here and then once we log in, I believe we still have the John, so I should be

100
00:06:32,920 --> 00:06:33,580
successful.

101
00:06:33,850 --> 00:06:40,390
Only then we can get to the dashboard, so we navigate here and look it up.

102
00:06:40,480 --> 00:06:41,620
We have the dashboard.

103
00:06:41,890 --> 00:06:48,490
However, if I am going to go to my local storage again, remove it and then refresh.

104
00:06:48,820 --> 00:06:50,890
Why do you know I'm back in the landing?

105
00:06:51,340 --> 00:06:55,870
And essentially, that's going to be the same functionality that will have poured a logger.

106
00:06:56,200 --> 00:07:00,090
There's going to be some functionality where we remove the user from the local storage.

107
00:07:00,100 --> 00:07:01,330
We already have that function.

108
00:07:01,600 --> 00:07:06,970
There's going to be functionality to remove the user from the state basically set it back to now.

109
00:07:07,270 --> 00:07:10,270
And once that happens, we could get back to the landing one.

110
00:07:10,450 --> 00:07:14,440
Hopefully this is clear and now we can start working on our nested pages.