1
00:00:01,040 --> 00:00:05,360
Our sign up component is looking pretty good but as I mentioned at the end of the last video we've got

2
00:00:05,360 --> 00:00:09,850
some logic inside of here that we're prolly gonna end up duplicating across many other components.

3
00:00:09,860 --> 00:00:13,550
So for example we've got some logic inside of here to make request.

4
00:00:13,550 --> 00:00:18,080
We then handle that request in some way if something goes wrong with the request.

5
00:00:18,080 --> 00:00:24,020
We set some errors and if we get any errors we then render them out in this kind of nicely formatted

6
00:00:24,050 --> 00:00:29,810
list right here so all the stuff is probably gonna be duplicated across many different components and

7
00:00:29,810 --> 00:00:34,730
naturally rather than duplicating this everywhere I think could be kind of handy if we try to make it

8
00:00:34,730 --> 00:00:36,590
a little bit more useful in nature.

9
00:00:36,590 --> 00:00:38,510
So here's what I would like to do.

10
00:00:38,750 --> 00:00:45,060
I want to try to create a new custom hook that we'll call use request the inputs to this use request

11
00:00:45,060 --> 00:00:47,520
took are going to be it where we want to make a request to.

12
00:00:47,530 --> 00:00:49,990
So the URL the method of the request.

13
00:00:49,990 --> 00:00:56,470
So is it a GET request put post patch whatever else and then the body of the request or the information

14
00:00:56,470 --> 00:00:57,090
is sent along.

15
00:00:57,130 --> 00:00:59,170
If the request supports that.

16
00:00:59,170 --> 00:01:06,310
So for example a put patch or a post would all include a body but a GET request would not include a

17
00:01:06,310 --> 00:01:11,800
body so we're going to provide those as inputs to this use request took there we're going to put together

18
00:01:12,970 --> 00:01:16,720
then the output from this user request took we'll be at two things.

19
00:01:16,780 --> 00:01:22,880
First off it'll be some function to actually execute the request and we'll also have some errors thing

20
00:01:22,890 --> 00:01:23,880
coming out as well.

21
00:01:23,880 --> 00:01:29,130
And this error is variable is going to be at some pre rendered block of J.S. X that contains all the

22
00:01:29,130 --> 00:01:34,440
errors that might have occurred while we actually executed that request.

23
00:01:34,440 --> 00:01:37,890
Now it's something that's going to be kind of challenging about this user request hook we're going to

24
00:01:37,890 --> 00:01:43,300
be getting a function to run the request and some errors variable out at the exact same time.

25
00:01:43,620 --> 00:01:45,140
Errors by default is going to be.

26
00:01:45,200 --> 00:01:45,620
No.

27
00:01:45,630 --> 00:01:51,240
Or have a value of null until we actually execute the request and something goes wrong with it.

28
00:01:51,270 --> 00:01:53,250
Now that might not make any sense right now.

29
00:01:53,250 --> 00:01:56,940
So let's just start to write this thing out and I think you'll get a good sense of what's going on rather

30
00:01:56,940 --> 00:01:58,930
quickly okay.

31
00:01:59,000 --> 00:02:02,750
So I end up with back over inside my client directory.

32
00:02:02,750 --> 00:02:09,820
I'm gonna make a new folder called books and then inside there I'll make a new file of use request dot

33
00:02:09,850 --> 00:02:14,170
J.S. than inside of here at the very top.

34
00:02:14,240 --> 00:02:24,910
I'm going to import axioms from axioms and I'm going to import the at used state book from react then

35
00:02:24,910 --> 00:02:26,470
after that I'm going to create the hook

36
00:02:29,510 --> 00:02:33,820
so I want the inputs this thing like I just said to be at the you l that we want to make the request

37
00:02:33,820 --> 00:02:45,970
to the method and the body I'm going to put in a well a method and the body then inside of here we're

38
00:02:45,970 --> 00:02:52,270
going to create some errors piece of state so this will be as some piece of state that's going to store

39
00:02:52,270 --> 00:02:53,430
some J.S. X inside of it.

40
00:02:53,430 --> 00:02:57,430
By default it will have a value of null until something goes wrong with the request.

41
00:02:57,430 --> 00:03:00,340
Then eventually we're going to make sure that we return that errors thing.

42
00:03:00,340 --> 00:03:04,420
We're also going to create a function called do request that's going to actually execute the request

43
00:03:04,420 --> 00:03:04,870
itself.

44
00:03:06,540 --> 00:03:17,140
So I want to create some piece of state that I will call errors.

45
00:03:17,160 --> 00:03:22,910
I'm also going to create that function of do request

46
00:03:26,900 --> 00:03:30,500
and then finally down here without worrying about putting any implementation in for do request just

47
00:03:30,500 --> 00:03:30,940
yet.

48
00:03:31,010 --> 00:03:35,870
I want to make sure that I return return both do request and errors.

49
00:03:35,990 --> 00:03:43,130
I can follow the usual convention of React hoax by returning an array with do request and errors inside

50
00:03:43,130 --> 00:03:43,630
of it.

51
00:03:43,820 --> 00:03:48,560
But I think in this case it might make a little bit more sense to just use an object rather than kind

52
00:03:48,560 --> 00:03:51,590
of rely upon these values being ordered in some particular way.

53
00:03:53,420 --> 00:03:58,520
So now we're going to put together some implementation side of do requests to actually run the request

54
00:03:58,520 --> 00:03:59,420
itself.

55
00:03:59,420 --> 00:04:03,530
In other words we're going to write out pretty much exactly what you see right here in this try catch

56
00:04:03,530 --> 00:04:08,060
block so inside we're going to put together a try catch

57
00:04:11,620 --> 00:04:18,080
I'm going to write out the actual request making logic I'm going to take the response from a weight

58
00:04:18,700 --> 00:04:19,700
CEOs.

59
00:04:19,730 --> 00:04:24,080
And remember we don't necessarily know ahead of time exactly what method or whether we want to make

60
00:04:24,110 --> 00:04:29,270
a get a poster or a patch or whatever else so we can't really write dot get here or dot post or whatever

61
00:04:29,270 --> 00:04:29,910
else.

62
00:04:29,960 --> 00:04:34,730
Instead we're going to do a look up on this axis object using a method right here.

63
00:04:34,730 --> 00:04:39,200
The method has to be equal to just a quick comment here of sorts.

64
00:04:39,200 --> 00:04:43,740
Method must be equal to a string of say posts or get or patch.

65
00:04:43,790 --> 00:04:44,600
And so on.

66
00:04:44,600 --> 00:04:52,350
That's what we're going to assume so look up the appropriate method and I will send off the request

67
00:04:52,870 --> 00:05:01,300
that we'll put in the URL and the body.

68
00:05:01,320 --> 00:05:07,710
So now if the request occurs successfully let's take the data out of this response and return it.

69
00:05:07,710 --> 00:05:11,140
So I will return response dot data.

70
00:05:11,310 --> 00:05:13,580
Otherwise if something goes wrong with the request.

71
00:05:13,590 --> 00:05:17,610
So if we end up in this catch block right here let's take the error that occurred.

72
00:05:17,610 --> 00:05:22,680
We're going to turn it into some J.S. X block that essentially looks very similar to what we did back

73
00:05:22,680 --> 00:05:28,090
down here and we're going to set our ears piece of state with that.

74
00:05:28,090 --> 00:05:33,600
So I'm going to call inside of your set ears and then inside there we're going to write out the same

75
00:05:33,630 --> 00:05:38,780
exact style of J sex that we just put together back inside of our sign up component.

76
00:05:38,810 --> 00:05:40,230
It's a matter of fact it's gonna be so similar.

77
00:05:40,260 --> 00:05:47,840
I'm just going to copy that div right there or cut it go back over to use request and paste it inside

78
00:05:47,840 --> 00:05:53,720
of set errors all that make sure that I update this errors variable right here.

79
00:05:53,950 --> 00:05:55,600
So we don't have any errors variable anymore.

80
00:05:55,600 --> 00:05:58,090
Instead we call the error in this case simply IRR.

81
00:05:58,420 --> 00:06:06,490
And if you recall that your are if we go back up a little bit there's IRR response dot data dot errors.

82
00:06:06,490 --> 00:06:15,740
So that's what we want to map over there we'll do a map right here over your r dot response dot data

83
00:06:15,770 --> 00:06:17,940
dot errors like so

84
00:06:21,730 --> 00:06:22,060
OK.

85
00:06:22,100 --> 00:06:27,680
So I think this is enough to start to test out now if the code we have inside of here right now is confusing.

86
00:06:27,680 --> 00:06:28,340
Don't sweat it.

87
00:06:28,370 --> 00:06:32,760
As soon as we start to make use of it I think you'll get a good idea of how this thing is working.

88
00:06:32,810 --> 00:06:33,980
To save this file.

89
00:06:33,980 --> 00:06:41,750
I'm gonna go back over to sign up j ust I'm going to import that use request

90
00:06:44,720 --> 00:06:51,910
from up one directory actually up to directories books use request.

91
00:06:51,950 --> 00:06:52,500
All right.

92
00:06:52,500 --> 00:06:54,170
Now this video is running just a little bit long.

93
00:06:54,170 --> 00:06:56,480
So how about we just take a quick pause right here.

94
00:06:56,480 --> 00:06:59,270
Come back the next video and see how we actually make use of this hook.