1
00:00:00,320 --> 00:00:07,190
Okay, so now we want to add a private root component for routes or pages that we don't want regular

2
00:00:07,190 --> 00:00:09,680
users that aren't registered to go to.

3
00:00:09,680 --> 00:00:11,300
For instance, the shipping page.

4
00:00:11,300 --> 00:00:16,610
I'm not logged in right now, but if I go to shipping, I'm able to see it and I don't want that.

5
00:00:16,610 --> 00:00:22,520
So what we're going to do is go to components and create a new component called private root.

6
00:00:23,300 --> 00:00:24,320
Dot JS.

7
00:00:25,950 --> 00:00:28,470
And then let's create a component.

8
00:00:29,240 --> 00:00:32,630
And there's not a whole lot that's going to go into this.

9
00:00:33,020 --> 00:00:35,960
I just want to bring in a couple things from React Router Dom.

10
00:00:35,960 --> 00:00:41,620
I want to bring in outlet and I want to bring in the navigate component.

11
00:00:41,630 --> 00:00:47,390
So outlet is basically what we want to return if we're logged in, if there's a user because it just

12
00:00:47,390 --> 00:00:51,040
will, it will put out whatever page or screen we're trying to load.

13
00:00:51,050 --> 00:00:56,540
If we're not logged in, then we're going to use the navigate component to basically just redirect us.

14
00:00:56,750 --> 00:01:03,110
Now the other thing I want to bring in is use selector, because that's how we can get the state to

15
00:01:03,110 --> 00:01:07,450
find out if there's user, if there's a user info piece of the state.

16
00:01:07,460 --> 00:01:10,910
So let's say use selector from React Redux.

17
00:01:10,910 --> 00:01:16,250
And then right inside the component above the return, we're going to say const and we're going to get

18
00:01:16,250 --> 00:01:17,840
the user info.

19
00:01:18,170 --> 00:01:20,330
Remember that's part of the auth state.

20
00:01:20,330 --> 00:01:28,040
So we'll say use selector and we're going to pass in a function with state and then specify that we

21
00:01:28,040 --> 00:01:29,970
want to use the auth state.

22
00:01:29,970 --> 00:01:32,370
That's where this user info is.

23
00:01:32,370 --> 00:01:39,390
And then in the return here, we can get rid of this and we're going to say if user info, then output

24
00:01:39,390 --> 00:01:40,080
the outlet.

25
00:01:40,110 --> 00:01:42,450
If not, then navigate to login.

26
00:01:42,450 --> 00:01:47,640
And then we're just going to also add in replace here just to replace any past history.

27
00:01:48,210 --> 00:01:48,540
All right.

28
00:01:48,540 --> 00:01:49,320
And that's it.

29
00:01:49,320 --> 00:01:51,240
So pretty simple component.

30
00:01:51,270 --> 00:01:55,330
Now to use this, we're going to go into our index.js.

31
00:01:55,330 --> 00:01:58,950
So we have all of our routes we're going to bring in.

32
00:01:59,910 --> 00:02:02,190
The private root component.

33
00:02:02,810 --> 00:02:05,600
And then what we do is we go inside of this.

34
00:02:05,600 --> 00:02:08,030
This is always going to be the the parent, right?

35
00:02:08,030 --> 00:02:09,949
Because this is the app element.

36
00:02:09,949 --> 00:02:14,510
And anything you want public will go right in here as a direct child.

37
00:02:14,510 --> 00:02:21,710
But if you want private routes, then you're going to set up another route and we can just set the path.

38
00:02:22,530 --> 00:02:27,000
The path can be just to nothing and set the element to private route.

39
00:02:27,000 --> 00:02:29,560
And I know the syntax is a little weird.

40
00:02:29,580 --> 00:02:36,240
It's a little different than past React Routers versions, but now anything we want to be private will

41
00:02:36,240 --> 00:02:41,400
go in here and I want the shipping to be private, so I'll just move that down into there.

42
00:02:42,650 --> 00:02:47,930
And now you can see that I think I was just on the shipping page and I got redirected because I'm not

43
00:02:47,930 --> 00:02:48,680
logged in.

44
00:02:48,680 --> 00:02:51,650
So if I go to slash shipping, I can't access it.

45
00:02:51,650 --> 00:02:53,480
It just brings me right to login.

46
00:02:54,260 --> 00:02:55,970
Which is exactly what I want.

47
00:02:55,970 --> 00:02:58,220
And then if I were to log in.

48
00:02:58,220 --> 00:03:02,510
So let's say John at Email.com.

49
00:03:04,020 --> 00:03:05,700
And let's log in.

50
00:03:05,730 --> 00:03:09,420
Let's go to slash shipping.

51
00:03:09,480 --> 00:03:10,380
And there it is.

52
00:03:10,380 --> 00:03:12,780
So now I'm able to access this page.

53
00:03:13,110 --> 00:03:13,470
All right.

54
00:03:13,470 --> 00:03:17,730
So any profile, anything like that is going to go in here.

55
00:03:17,730 --> 00:03:23,550
And later on when we get to admin functionality, we'll have an admin root component as well that will

56
00:03:23,550 --> 00:03:26,070
only let users in if they're admins.

57
00:03:26,700 --> 00:03:31,110
So in the next video, let's see, what are we going to do next?

58
00:03:31,140 --> 00:03:36,240
I want to start to implement the checkout steps because we're going through these different steps like

59
00:03:36,240 --> 00:03:38,640
the cart, the shipping, the payment method.

60
00:03:38,640 --> 00:03:43,200
I want to have a little component up here that lets us know where in the process we're at.

61
00:03:43,200 --> 00:03:45,000
So we're going to create that next.