1
00:00:00,140 --> 00:00:06,680
In the latest React router version, we can also get the navigation state.

2
00:00:06,800 --> 00:00:14,030
So essentially we can check whether we're submitting the form, whether we are loading data, something

3
00:00:14,030 --> 00:00:17,720
we're going to do a little bit later and some other cool things.

4
00:00:18,010 --> 00:00:22,550
And in order to set it up, we want to grab the use navigation hook.

5
00:00:23,150 --> 00:00:28,400
We'll get back the instance and in there there's going to be a state property.

6
00:00:28,430 --> 00:00:29,860
Now, why do we want to use it?

7
00:00:29,870 --> 00:00:30,080
Well.

8
00:00:30,110 --> 00:00:37,280
Because I want to showcase that the request is taking place, and I'm going to do that by disabling

9
00:00:37,280 --> 00:00:43,630
the submit button and also just showcase the different text if we are submitting.

10
00:00:43,640 --> 00:00:45,620
So let's navigate to a register.

11
00:00:45,620 --> 00:00:48,620
Like I said, we're looking for use navigation hook.

12
00:00:48,650 --> 00:00:52,940
That's the one we want to import and we want to set it equal to an instance.

13
00:00:52,940 --> 00:00:55,100
So we need to come up with a name.

14
00:00:55,160 --> 00:00:57,950
In my case, I'm going to go with navigation.

15
00:00:58,820 --> 00:01:03,440
Well, then let's invoke the hook, use navigation and I'll log it.

16
00:01:03,440 --> 00:01:08,150
But I can right away tell you that we're going to be looking for navigation state and more specifically,

17
00:01:08,150 --> 00:01:10,350
whether it's equal to submitting.

18
00:01:10,370 --> 00:01:12,080
So let's go here with log.

19
00:01:13,390 --> 00:01:14,800
Then navigation.

20
00:01:15,160 --> 00:01:20,590
And then I want to create a variable I'm going to say is submitting.

21
00:01:21,450 --> 00:01:25,080
So is submitting is going to be equal to navigation.

22
00:01:25,080 --> 00:01:31,620
Then state something I'm going to showcase in a second and more specifically if it's equal to submitting.

23
00:01:31,620 --> 00:01:32,940
So if.

24
00:01:33,460 --> 00:01:36,350
The condition is true, then of course, this is going to be true.

25
00:01:36,370 --> 00:01:38,140
If not, it's going to be false.

26
00:01:38,170 --> 00:01:44,290
Then we'll navigate to our submit button and we want to disable it when?

27
00:01:44,290 --> 00:01:46,990
Well, when the is submitting is true.

28
00:01:47,020 --> 00:01:47,320
Correct.

29
00:01:47,320 --> 00:01:51,430
Because we know that in that case, the request is taking place.

30
00:01:51,610 --> 00:01:55,690
And then also we want to set up the ternary operator where we have the text.

31
00:01:55,900 --> 00:02:00,730
And if it's the case, then we'll go with submitting dot, dot, dot.

32
00:02:00,730 --> 00:02:05,920
And if not, well, then let's just go with good old submit.

33
00:02:05,950 --> 00:02:08,710
Let's navigate back to the browser.

34
00:02:08,740 --> 00:02:13,060
I will slow down the network just so it's easier to see.

35
00:02:14,330 --> 00:02:16,960
Let me also guess.

36
00:02:16,970 --> 00:02:19,180
Change it to headers or you know what?

37
00:02:19,190 --> 00:02:20,540
I can just close it here.

38
00:02:21,250 --> 00:02:24,250
And also, of course, we'll need to provide the values.

39
00:02:24,970 --> 00:02:28,490
So in this case, it's going to be Susan, I guess.

40
00:02:29,370 --> 00:02:32,610
Because remember, again, we need to make sure that all our.

41
00:02:34,200 --> 00:02:37,950
Emails are unique and check it out once I click.

42
00:02:38,040 --> 00:02:41,340
First of all, we'll see the entire thing in the console.

43
00:02:41,340 --> 00:02:48,780
But also notice we have this disabled set and we were also showing that submitting.

44
00:02:48,780 --> 00:02:55,830
And then if I take a look at the console notice, so this is what I'm getting back from use navigation.

45
00:02:55,860 --> 00:02:57,780
This is the object.

46
00:02:57,900 --> 00:03:00,390
And here the state is submitting.

47
00:03:00,850 --> 00:03:04,330
Now before we submit a notice how the state was idle.

48
00:03:04,510 --> 00:03:09,180
So we only do something if the state is equal to submitting.

49
00:03:09,190 --> 00:03:15,570
And like I said, later on, we'll also check for loading to set up global loading and all that cool

50
00:03:15,580 --> 00:03:16,020
stuff.

51
00:03:16,030 --> 00:03:17,080
So for now, you know what?

52
00:03:17,080 --> 00:03:20,620
Let me just go back to the normal setup because.

53
00:03:21,190 --> 00:03:26,560
Usually I forget to do that and then the network is really, really slow.

54
00:03:26,560 --> 00:03:30,010
And with this in place now, we can set up React Toast file library.