1
00:00:01,320 --> 00:00:02,990
We just put together our user quest hook.

2
00:00:03,000 --> 00:00:05,050
Now we're going to use it inside of our sign up component.

3
00:00:05,190 --> 00:00:08,130
Before we do in the last video I realized I made a little mistake.

4
00:00:08,190 --> 00:00:13,620
So back over inside of our used request took file I have once again made use of the await keyword without

5
00:00:13,620 --> 00:00:15,670
marketing enclosing function as a sink.

6
00:00:15,700 --> 00:00:19,590
So I'm gonna throw in that keyword very quickly right away.

7
00:00:20,100 --> 00:00:23,850
Let's go back over to sign up tobacco over here.

8
00:00:23,880 --> 00:00:30,060
I'm gonna delete where we get this errors piece of state and I'm going to replace it with a call to

9
00:00:30,060 --> 00:00:31,880
this user request took.

10
00:00:32,000 --> 00:00:37,350
So when we call user requests we're gonna get back an object that remember has the do request function

11
00:00:38,630 --> 00:00:41,090
and the heirs property.

12
00:00:41,210 --> 00:00:47,580
This will come from user request and inside this object we're gonna pass off to use request.

13
00:00:47,580 --> 00:00:55,520
We are going to provide a U or L a method and the body so our your l is going to be API users sign up

14
00:00:56,720 --> 00:01:05,770
the method will be post and the body in this case is gonna be our email and our password.

15
00:01:05,820 --> 00:01:11,250
So now we've got a function that we can call to actually execute the request and we have possibly some

16
00:01:11,430 --> 00:01:12,750
errors right here.

17
00:01:13,320 --> 00:01:18,270
So now down inside of on submit we don't have to write out all this logic right here we already essentially

18
00:01:18,270 --> 00:01:20,340
put all this stuff together inside that hook.

19
00:01:20,400 --> 00:01:24,080
All we have to do is call do request that's it.

20
00:01:26,760 --> 00:01:31,250
And then to show any errors that might have occurred during the request we want to show this errors

21
00:01:31,260 --> 00:01:38,300
thing down inside where we had previously had all this complicated logic stuck directly inside of here.

22
00:01:38,380 --> 00:01:40,540
We can replace it with just simply errors.

23
00:01:40,660 --> 00:01:44,590
We do not have to check and see if errors is defined or anything like that because by default it will

24
00:01:44,590 --> 00:01:47,790
be equal to no.

25
00:01:47,870 --> 00:01:51,950
So let's don't say this I'm gonna flip back over and do a quick test

26
00:01:55,200 --> 00:02:02,790
so I'm going to first put in some invalid input here though invalid email invalid password and attempt

27
00:02:02,790 --> 00:02:06,320
to sign up look at that it still works.

28
00:02:06,360 --> 00:02:12,980
Now if I put in a valid email and a valid password let's say test.

29
00:02:13,000 --> 00:02:19,680
Or how about just some gibberish I'll sign up and you'll notice that the request was made successfully

30
00:02:19,690 --> 00:02:24,220
if you have opened your network request log there is a little bug right now if we submit requests and

31
00:02:24,220 --> 00:02:29,320
it is valid or Sammy is invalid and then we make another request that is valid we don't clear out the

32
00:02:29,320 --> 00:02:33,430
air that we had previously set there so we could take care of that very easily by going back over the

33
00:02:33,430 --> 00:02:39,840
hook back inside of user request we'll say that the instant that someone is trying to make a follow

34
00:02:39,840 --> 00:02:45,610
up request let's just go ahead and reset our heirs piece of state so right before making the request

35
00:02:46,590 --> 00:02:51,870
I'll do a set ears with no.

36
00:02:51,880 --> 00:02:59,230
So now if I attempt to submit right away I get an error but if I put in a valid email address and develop

37
00:02:59,230 --> 00:03:03,920
password it goes away and I signed up successfully.

38
00:03:04,270 --> 00:03:09,610
Perfect so again this little hope that we put together of your request is just a little time saving

39
00:03:09,610 --> 00:03:10,280
thing.

40
00:03:10,280 --> 00:03:13,960
It's good to make it a little bit easier on some other components are going to eventually put together

41
00:03:14,260 --> 00:03:18,310
to very easily make a request consume some data out of it and so on.

42
00:03:18,310 --> 00:03:22,970
Well that is pretty much it for our sign up component.

43
00:03:23,170 --> 00:03:25,900
We just all have to do one or two quick things.

44
00:03:25,900 --> 00:03:31,180
For example we need to make sure that after signing up successfully we redirect the user over to that

45
00:03:31,210 --> 00:03:34,240
index page and say something like you are signed in.

46
00:03:34,240 --> 00:03:38,160
So it's still a little bit left but for the most part this component is now complete.

47
00:03:38,260 --> 00:03:40,630
So quick pause right here and we'll continue in just a moment.