1
00:00:00,650 --> 00:00:05,270
After a user successfully signed up to our application we want to direct them back over to the landing

2
00:00:05,270 --> 00:00:06,490
page for us.

3
00:00:06,500 --> 00:00:09,750
That's essentially just the route route we need to figure out some way.

4
00:00:09,770 --> 00:00:13,840
No one to actually redirect a user around inside the next application.

5
00:00:13,870 --> 00:00:18,800
Number two we need to make sure that we only do that after a user has successfully signed in.

6
00:00:18,800 --> 00:00:24,390
Let me first show you how we redirect a user or forcibly navigate them around inside of a next app.

7
00:00:24,410 --> 00:00:26,500
Inside my sign up file at the very top.

8
00:00:26,510 --> 00:00:28,940
I'm going to find the important statement that we have for axioms.

9
00:00:29,000 --> 00:00:34,990
We're not making use of that anymore so I'm going to clean up very quickly I'm going to import router

10
00:00:35,350 --> 00:00:42,480
from next flash router so this router object right here is how we're going to programmatically it navigate

11
00:00:42,480 --> 00:00:46,810
a user around right now let's just add in a call directly inside of.

12
00:00:46,810 --> 00:00:51,400
On submit we'll say regardless of whether or not we sign up successfully or not.

13
00:00:51,520 --> 00:00:54,940
Let's just navigate our user back to the root root.

14
00:00:55,000 --> 00:00:59,470
I will do so by calling a router push and then providing the route that I want to navigate the user

15
00:00:59,470 --> 00:01:00,570
to.

16
00:01:00,730 --> 00:01:02,390
And that's pretty much it.

17
00:01:02,410 --> 00:01:07,600
So now we save this and flip back over now whenever I click on sign up.

18
00:01:07,660 --> 00:01:11,920
Even if the request is not successful I should navigate back over to the landing page.

19
00:01:12,040 --> 00:01:14,230
Yep definitely works all right.

20
00:01:14,230 --> 00:01:15,230
Well that's easy enough.

21
00:01:15,260 --> 00:01:19,650
So now we need to figure out how we can navigate a user only if our request is successful.

22
00:01:19,690 --> 00:01:24,320
There's two different ways we can approach this with our use request took.

23
00:01:24,370 --> 00:01:30,490
We can either put on an a wait on request right here because that is an asynchronous function and then

24
00:01:30,490 --> 00:01:34,030
call Bush right after that.

25
00:01:34,030 --> 00:01:38,560
So this is approach number one but it's not going to quite work as we expect right now.

26
00:01:38,560 --> 00:01:46,540
Let me show you why I'm going to save this in a flip back over I'll then click on sign up so really

27
00:01:46,540 --> 00:01:51,460
quickly if I look at my network request log I'll see the request to sign up was not successful but I

28
00:01:51,460 --> 00:01:54,270
still navigated over to that landing page.

29
00:01:54,400 --> 00:01:55,920
So why is that.

30
00:01:55,930 --> 00:01:59,980
Well inside of our user request Hoke we do request function.

31
00:01:59,980 --> 00:02:01,120
Here it is right here.

32
00:02:02,030 --> 00:02:06,860
Is going to attempt to make the request and if the request fails for any reason we enter this catch

33
00:02:06,950 --> 00:02:08,350
statement.

34
00:02:08,450 --> 00:02:13,270
We then set errors and that's going to cause our component design component this case to be updated.

35
00:02:13,370 --> 00:02:16,730
But most importantly we caught the error that occurred right here.

36
00:02:16,820 --> 00:02:22,140
So no error is going to surface back out inside this on submit function which means no matter what.

37
00:02:22,250 --> 00:02:27,290
After calling do request even if there's an error we're still going to proceed on down to retort push

38
00:02:27,290 --> 00:02:28,610
right here.

39
00:02:28,610 --> 00:02:30,200
So that's not super ideal.

40
00:02:31,290 --> 00:02:33,930
There's a couple of different ways that we can deal with this.

41
00:02:33,980 --> 00:02:39,760
We could decide back over inside of do request that after catching this error right here we could re

42
00:02:39,770 --> 00:02:42,630
throw it after updating this Ayres piece of state.

43
00:02:42,920 --> 00:02:49,500
So for example right after calling set errors I could put in throw Error don't read throwing the error

44
00:02:49,560 --> 00:02:54,450
which means it's going to be exposed or essentially throw this line right here which means I will never

45
00:02:54,450 --> 00:03:02,080
proceed onto the router not push so let's save that and try this out back inside of our browser I'll

46
00:03:02,080 --> 00:03:03,100
do a sign up.

47
00:03:03,100 --> 00:03:07,420
And now I see the air right here and I did not get redirected.

48
00:03:07,420 --> 00:03:12,430
We can now put together some additional try catch inside of on summit to make sure that we don't see

49
00:03:12,430 --> 00:03:14,470
the air down here inside of our console.

50
00:03:14,470 --> 00:03:17,310
It doesn't really matter that we see an error down here it's not that big a deal.

51
00:03:17,350 --> 00:03:21,880
But if you really care about it we could wrap this thing with an additional try catch.

52
00:03:21,880 --> 00:03:26,410
That's one way to deal with this but another way that might be just a little bit easier to implement

53
00:03:26,980 --> 00:03:32,410
would be to add in an additional argument or additional parameter to our user request took we could

54
00:03:32,410 --> 00:03:35,030
call it something like on success.

55
00:03:35,140 --> 00:03:40,670
And as you guessed this would be a callback that will be invoked anytime that we make a request successfully.

56
00:03:41,220 --> 00:03:47,730
Well let's try that approach I'm going to take that retro up push line and move it up into this on success

57
00:03:47,730 --> 00:03:48,290
thing.

58
00:03:48,330 --> 00:03:50,510
I'll make sure to clean up that semicolon at the very end

59
00:03:53,320 --> 00:03:58,020
so now we can look back over to use request and say after we make the request successfully let's call

60
00:03:58,020 --> 00:04:08,610
this on success callback so back inside a used request I will D structure off on success and then downside

61
00:04:08,620 --> 00:04:09,310
of do request.

62
00:04:09,310 --> 00:04:14,830
After making the request and getting back in response successfully I will check and see if the on success

63
00:04:15,430 --> 00:04:21,990
callback was provided and if it was then let's go ahead and call it and just for kind of convenience

64
00:04:21,990 --> 00:04:26,160
sake let's provide the response data that we got inside of here as well so I'm going to call that thing

65
00:04:26,160 --> 00:04:30,330
with response dot data not strictly required right now because we're not actually making use of the

66
00:04:30,330 --> 00:04:33,540
data that comes back in response but maybe we will at some point in time.

67
00:04:33,650 --> 00:04:39,050
So I'm just kind of thinking ahead here if we take this approach we no longer need to re throw that

68
00:04:39,080 --> 00:04:44,030
air down here at the bottom inside that catch statement okay.

69
00:04:44,090 --> 00:04:44,860
That looks pretty good.

70
00:04:44,870 --> 00:04:51,060
I'm going to say both these files I'm going to flip back over I'll refresh the page.

71
00:04:51,190 --> 00:04:52,340
Click on sign up.

72
00:04:52,410 --> 00:04:59,800
OK that looks good and if I put in some valid information and sign up again I get redirected over to

73
00:04:59,810 --> 00:05:03,330
landing page when the request was made successfully.

74
00:05:03,330 --> 00:05:04,300
Well I think that looks pretty good.

75
00:05:05,600 --> 00:05:10,280
Well that's pretty much it for real on our sign up component now that we have signed up.

76
00:05:10,400 --> 00:05:13,850
We need to make sure on our landing page let's go and look at our mockup.

77
00:05:13,850 --> 00:05:18,380
We need to show the text on the landing page something like you are signed in that's not going to be

78
00:05:18,380 --> 00:05:20,720
as easy as just always showing you are signed in.

79
00:05:20,720 --> 00:05:24,000
Because remember there's really two forms to this landing page.

80
00:05:24,050 --> 00:05:28,160
We need to somehow detect whether or not these are signed in and if they are not we're gonna put in

81
00:05:28,250 --> 00:05:29,620
you are not signed in.

82
00:05:29,720 --> 00:05:35,660
Otherwise if they are signed in will show you are signed in get so quick Basra here and we'll start

83
00:05:35,660 --> 00:05:37,540
working on this landing page in just a moment.