1
00:00:00,270 --> 00:00:06,689
All right, and once we can successfully register our user now, let's take a look at how we can programmatically

2
00:00:07,020 --> 00:00:14,280
navigate the user from the register to a dashboard and we'll do what we'll need to look for.

3
00:00:14,310 --> 00:00:17,340
You use fact, which, by the way, should be already in Rochester.

4
00:00:17,730 --> 00:00:21,470
I'm just making sure that you definitely have it that is coming from React.

5
00:00:21,480 --> 00:00:29,430
And then we have this use navigate hook from react rather than run inside of the register component.

6
00:00:29,700 --> 00:00:37,530
I want to get the user from my state and also I want to invoke the use navigate hook, which is going

7
00:00:37,530 --> 00:00:40,680
to return me a navigate van.

8
00:00:40,980 --> 00:00:44,070
In the user fact, I want to check what a user.

9
00:00:44,470 --> 00:00:51,630
And if the user is present, basically, if it's not, no, then I'm going to navigate to my home page,

10
00:00:51,630 --> 00:00:54,030
which is what which is my dashboard.

11
00:00:54,480 --> 00:00:57,660
Now you're probably wondering, Well, why do we have this attachment?

12
00:00:58,110 --> 00:01:00,480
Well, because I do set up the alert.

13
00:01:01,420 --> 00:01:02,950
And I showcase that to work here.

14
00:01:03,220 --> 00:01:07,840
Remember, the redirecting one is just my preference to showcase that.

15
00:01:08,230 --> 00:01:09,160
Do you have to do that?

16
00:01:09,190 --> 00:01:10,180
Absolutely not.

17
00:01:10,540 --> 00:01:13,660
Like I previously mentioned with had a lot that is optional.

18
00:01:13,720 --> 00:01:14,650
The same as this one.

19
00:01:15,070 --> 00:01:16,780
If you want to right away, navigate away.

20
00:01:17,080 --> 00:01:18,280
That's totally up to you.

21
00:01:18,670 --> 00:01:24,170
And then in the use effect in the dependency, I want to pass in the user.

22
00:01:24,550 --> 00:01:31,780
So every time we'll invoke this, whether or not it is going to be initial render or when the user changes,

23
00:01:31,960 --> 00:01:37,690
which is going to be case when we register or log in the user and then it's going to complain that it's

24
00:01:37,690 --> 00:01:41,680
also looking for navigation and therefore we'll add that one as well.

25
00:01:42,010 --> 00:01:43,840
So let's go to a register.

26
00:01:44,170 --> 00:01:46,210
Like I said, I already have the use of fact.

27
00:01:46,510 --> 00:01:47,950
So that should do it.

28
00:01:48,250 --> 00:01:52,390
And then I want to look for import use and navigate.

29
00:01:52,480 --> 00:01:56,620
That's the hook coming from the React router down.

30
00:01:56,800 --> 00:02:02,170
And then once I have this in place, I want to scroll down and where I'm looking for is loading and

31
00:02:02,170 --> 00:02:08,050
Charlotte, I also want to check for my years here in the state because remember, we have our actions

32
00:02:08,320 --> 00:02:09,229
in reducer.

33
00:02:09,580 --> 00:02:13,080
This is what we're changing and I have this comment right now.

34
00:02:13,300 --> 00:02:16,420
I'm going to remove and let you set up navigate.

35
00:02:16,930 --> 00:02:20,980
Navigate is equal to use and navigate, and let's invoke it.

36
00:02:21,370 --> 00:02:23,290
And I'm just going to set it up on top.

37
00:02:23,500 --> 00:02:26,020
So I clearly see that these are my local values.

38
00:02:26,200 --> 00:02:29,050
These are my global values coming from the app context.

39
00:02:29,260 --> 00:02:31,040
And this is my Navigant van.

40
00:02:31,060 --> 00:02:32,290
Let's keep on scrolling.

41
00:02:32,650 --> 00:02:37,390
And then right after the on segment, let's go with our user fact.

42
00:02:37,760 --> 00:02:43,990
I'll say use effect and that in here, let's pass in that callback function, which is going to be invoked.

43
00:02:44,290 --> 00:02:47,010
And now it's set up right away our dependency.

44
00:02:47,470 --> 00:02:51,660
And here I want to pass in the user as well as navigate.

45
00:02:52,060 --> 00:03:00,010
Just to reiterate, this means that we will invoke this one on initial render and every time the user

46
00:03:00,460 --> 00:03:02,470
or navigate changes.

47
00:03:02,830 --> 00:03:06,220
And then let's set up the condition where I'm going to say if user's true.

48
00:03:06,610 --> 00:03:14,560
So if user exists, now let's navigate to a dashboard and again, you can simply go and navigate and

49
00:03:14,560 --> 00:03:16,150
then you'll need to pass into your arrow.

50
00:03:16,420 --> 00:03:18,090
Now where is the dashboard?

51
00:03:18,100 --> 00:03:19,810
Well, that is their homepage, correct?

52
00:03:19,960 --> 00:03:25,510
That's how we set up everything, but it is my preference to showcase for a little bit of that alert.

53
00:03:25,630 --> 00:03:26,080
That's it.

54
00:03:26,200 --> 00:03:29,530
Therefore, I'm going to go with set and then timeout.

55
00:03:30,660 --> 00:03:34,260
And then in there, we want to pass in the callback function, which is going to be invoked.

56
00:03:34,500 --> 00:03:35,460
And then in how long?

57
00:03:35,550 --> 00:03:40,440
And therefore, since I know that my alert is for 30 seconds, I also do it over here.

58
00:03:40,770 --> 00:03:42,660
Do you have to do that now for the last time?

59
00:03:42,900 --> 00:03:43,630
You don't have to.

60
00:03:43,650 --> 00:03:45,120
This is really optional.

61
00:03:45,480 --> 00:03:50,140
So let's pass in the navigate in the function body, let's say.

62
00:03:50,580 --> 00:03:55,680
And this is going to be the case where I'm going to stop removing the John from the database and I'll

63
00:03:55,680 --> 00:03:56,730
simply go with beer.

64
00:03:56,970 --> 00:03:58,470
Pretty much a different member.

65
00:03:58,470 --> 00:04:02,880
And then in the process, I'll also show you how we're displaying alert.

66
00:04:03,210 --> 00:04:06,190
So let's go here with name then Peter.

67
00:04:07,050 --> 00:04:11,090
Peter, Malcolm, or you're not just with Jim.

68
00:04:11,550 --> 00:04:12,690
Just so we're consistent.

69
00:04:12,690 --> 00:04:15,780
And then let's also set up our dummy password.

70
00:04:16,140 --> 00:04:18,720
And voila, we have user created.

71
00:04:18,959 --> 00:04:20,519
I have all this data and console.

72
00:04:20,790 --> 00:04:24,100
And then eventually we navigate to the dashboard page.

73
00:04:24,450 --> 00:04:30,720
Now, in my case, since I don't want to overpopulate the console, I will swing back to the app context

74
00:04:31,050 --> 00:04:34,290
and I'll come on this one out just so it stays here for our friends.

75
00:04:34,590 --> 00:04:36,840
And the same is going to be over here.

76
00:04:37,230 --> 00:04:38,700
So let's say both of them.

77
00:04:39,000 --> 00:04:46,890
And now we successfully have added the functionality in place where once we register to user or log

78
00:04:46,890 --> 00:04:54,930
in, the user eventually then will navigate away from the register page to a dashboard page, which

79
00:04:54,930 --> 00:04:56,520
is our homepage.

80
00:04:56,820 --> 00:05:02,430
And the way we do that, we use, use, navigate hook coming from reactor number down.

81
00:05:02,700 --> 00:05:09,360
We get back, navigate and then we just invoke it and pass in the URL where basically we want to navigate.

82
00:05:09,760 --> 00:05:10,800
And so it's in-market.

83
00:05:10,800 --> 00:05:12,730
Market Sport is our home page.

84
00:05:12,750 --> 00:05:15,040
That's why we just passed in the forward.