1
00:00:01,800 --> 00:00:03,330
We've got our title in our price.

2
00:00:03,360 --> 00:00:05,220
It is time to submit this to our back end.

3
00:00:05,370 --> 00:00:05,730
Tickets.

4
00:00:05,880 --> 00:00:07,680
Service as a quick reminder.

5
00:00:07,740 --> 00:00:09,810
Let's take a look at the ticket service itself.

6
00:00:10,260 --> 00:00:13,970
So here's my tickets folder, SIRC directory routes.

7
00:00:14,280 --> 00:00:16,380
And inside there is the new TSA file.

8
00:00:17,040 --> 00:00:20,280
This is the root handler that we want to make a request to you to create a new ticket.

9
00:00:20,850 --> 00:00:27,690
So we have to make a post request to API tickets and we have to include the title and the price, if

10
00:00:27,690 --> 00:00:32,220
anything is wrong with the title and price that is provided in our API is going to send back an error

11
00:00:32,220 --> 00:00:33,240
to us automatically.

12
00:00:35,010 --> 00:00:38,940
So let's take a look at how we have made requests from inside of a component in the past.

13
00:00:39,360 --> 00:00:44,190
Now, keep in mind that this is a different kind of request that we we're making right now, as opposed

14
00:00:44,190 --> 00:00:49,020
to the get initial prop stuff we were discussing just a moment ago to get initial props function, which

15
00:00:49,020 --> 00:00:54,420
we're working on inside of our landing page, was all about fetching some data that is required to show

16
00:00:54,420 --> 00:00:55,740
this component on the screen.

17
00:00:56,190 --> 00:00:57,930
So just to render it for the very first time.

18
00:00:58,710 --> 00:01:03,210
Right now we are talking about making a request from inside of a company itself.

19
00:01:04,040 --> 00:01:09,570
So we had actually created a little helper hook to help us out with this process inside of our Hooke's

20
00:01:09,570 --> 00:01:10,050
directory.

21
00:01:10,140 --> 00:01:10,940
We've got that U.S.

22
00:01:11,070 --> 00:01:11,970
Request hook.

23
00:01:12,830 --> 00:01:16,650
This is a custom home we put together just to make making request, handling errors.

24
00:01:16,740 --> 00:01:18,900
All that comes up really easy and straightforward.

25
00:01:20,520 --> 00:01:21,030
When we call the.

26
00:01:21,230 --> 00:01:26,960
Request, we are going to provide a U or L, a method, a body and an on success callback.

27
00:01:27,430 --> 00:01:29,310
Those are all inputs to the hook.

28
00:01:31,290 --> 00:01:37,020
Then, as the output from the hook, we get back a function called Do Request and a little bit of G.S.

29
00:01:37,020 --> 00:01:40,650
X called Eyre's the do request right here.

30
00:01:40,680 --> 00:01:44,700
That is a function that we're going to call to actually invoke or run the request.

31
00:01:45,970 --> 00:01:50,590
Aires is a little block of G.S. X that's going to capture all the errors that might be coming back from

32
00:01:50,590 --> 00:01:54,610
our API and then render them out as a nice little block of G.S. X.

33
00:01:57,570 --> 00:02:02,220
The other thing I want to mention is that the on success callback that we're going to also pass in here

34
00:02:02,520 --> 00:02:06,470
is going to be called with the data that we got back from the API request as well.

35
00:02:06,810 --> 00:02:08,580
That's gonna become relevant in just a little bit.

36
00:02:09,900 --> 00:02:10,040
OK.

37
00:02:10,170 --> 00:02:11,600
So this is the user question.

38
00:02:11,700 --> 00:02:14,700
OK, we're going to use this once again inside of our tickets.

39
00:02:14,760 --> 00:02:15,720
New component.

40
00:02:16,200 --> 00:02:18,880
We're going to make sure that we provide the appropriate URL, blah, blah, blah.

41
00:02:18,930 --> 00:02:19,470
All that stuff.

42
00:02:19,500 --> 00:02:24,000
And then eventually, after user estimates our form, we will call the do request function that we are

43
00:02:24,000 --> 00:02:25,200
returning it from the hook.

44
00:02:26,290 --> 00:02:28,450
So back inside of our component at the very top.

45
00:02:30,240 --> 00:02:31,390
Let's import U.S.

46
00:02:32,010 --> 00:02:34,740
Request from up to directories.

47
00:02:35,710 --> 00:02:37,650
Books use request.

48
00:02:39,960 --> 00:02:42,000
Then right after all of our you state stuff.

49
00:02:43,530 --> 00:02:49,260
We're going to take the do request function and any errors that might have occurred from user request.

50
00:02:51,480 --> 00:02:55,600
And we'll put in some options to the hook itself just to customize the requests that we're going to

51
00:02:55,600 --> 00:02:56,320
eventually issue.

52
00:02:56,680 --> 00:03:01,780
The first will put in r your l as we just saw, we want to make a request to API tickets.

53
00:03:03,530 --> 00:03:09,320
Our method is going to be post and notice that it is lowercase post right here, not all uppercase,

54
00:03:10,010 --> 00:03:15,080
because we are really just taking that method right there and looking up the appropriate method on the

55
00:03:15,080 --> 00:03:16,640
Axios library object.

56
00:03:16,920 --> 00:03:18,460
So axios method right there.

57
00:03:22,100 --> 00:03:23,720
Next up, we have to provide the body.

58
00:03:23,780 --> 00:03:28,610
So this is the data we want to send along in this case, it's going to be our title and the price.

59
00:03:30,060 --> 00:03:35,580
And then finally are on success callback right now, I'm going to do a console log of how about the

60
00:03:35,610 --> 00:03:36,780
data that we get back?

61
00:03:37,130 --> 00:03:39,860
I'll receive that data, which will really be the ticket.

62
00:03:39,890 --> 00:03:43,470
So I'll just about call it ticket and a console, log the ticket like so.

63
00:03:46,070 --> 00:03:46,850
So there's our hook.

64
00:03:47,360 --> 00:03:50,510
Now we're going to make sure that simply in time we call that do request function.

65
00:03:50,930 --> 00:03:55,370
We'll also make sure that we display that little block of ears inside of our form as well.

66
00:03:56,120 --> 00:03:59,840
Remember that by default, when our component first is created, theirs is going to be empty.

67
00:04:00,050 --> 00:04:04,130
It is only once we actually make a request that we're going to have that request fail.

68
00:04:04,340 --> 00:04:09,350
That airs is going to contain some G.S. X so we can really show airs inside of all of our JSA X down

69
00:04:09,350 --> 00:04:10,640
here at all times.

70
00:04:11,570 --> 00:04:14,560
And it's only going to become visible when there actually are some errors.

71
00:04:15,320 --> 00:04:18,020
So we'll just throw in airs right above the button like so.

72
00:04:20,610 --> 00:04:22,540
Next up, we're going to find our form element.

73
00:04:23,040 --> 00:04:25,950
Whenever someone submits this thing well, we're going to make our request.

74
00:04:26,830 --> 00:04:27,990
They'll put in an on submit.

75
00:04:29,190 --> 00:04:33,940
Endler, I'm going to make a helper function with a matching name called Simply on Simit.

76
00:04:35,620 --> 00:04:37,870
Then right above are on blurr.

77
00:04:39,620 --> 00:04:40,490
I'll make on Simit.

78
00:04:43,430 --> 00:04:45,750
I receive the event object.

79
00:04:47,940 --> 00:04:48,910
And called prevent.

80
00:04:50,170 --> 00:04:50,910
Default on it.

81
00:04:52,150 --> 00:04:54,910
And after that, I will call to request.

82
00:04:57,250 --> 00:05:01,150
All right, that should be it, this should create an actual ticket on our API.

83
00:05:01,660 --> 00:05:03,110
Let's save this and give it a shot.

84
00:05:05,120 --> 00:05:10,900
I'll flip back over to repress the page just because sometimes personally, for me, it feels like next

85
00:05:10,900 --> 00:05:14,330
doesn't always quite capture the refreshes or whenever I save a file.

86
00:05:14,500 --> 00:05:16,510
So I'm just in the habit of refreshing the page anyhow.

87
00:05:17,310 --> 00:05:19,210
Well, I'll go ahead and enter in a title.

88
00:05:19,300 --> 00:05:24,460
So how about first client ticket and a price of 20?

89
00:05:25,120 --> 00:05:25,720
We'll submit that.

90
00:05:26,500 --> 00:05:27,070
And there we go.

91
00:05:27,100 --> 00:05:30,400
There's the console log from the on success Fall-back.

92
00:05:30,970 --> 00:05:35,140
And if I take a look at my network request tab, I should see a request to our tickets.

93
00:05:35,170 --> 00:05:35,770
End points.

94
00:05:36,490 --> 00:05:37,770
Looks like everything is good to go.

95
00:05:40,190 --> 00:05:43,530
Now we can see all the relevant details about the ticket inside of on success.

96
00:05:43,800 --> 00:05:45,120
We're going to need those in just a moment.

97
00:05:45,660 --> 00:05:48,120
But right now, one other thing I want to test out really quickly.

98
00:05:48,150 --> 00:05:51,090
What happens if we provide some invalid inputs?

99
00:05:51,690 --> 00:05:55,080
A very easy, invalid input we can put in here is a negative price.

100
00:05:55,410 --> 00:05:59,380
Remember, our request handler checks, make sure that the price provided is greater than zero.

101
00:06:00,240 --> 00:06:03,330
So I'll try putting in negative 20, submitting that.

102
00:06:04,200 --> 00:06:05,550
And I'm told that very quickly.

103
00:06:05,640 --> 00:06:05,840
OK.

104
00:06:05,900 --> 00:06:07,110
Price must be greater than zero.

105
00:06:07,950 --> 00:06:09,840
How about if we put in a string of characters?

106
00:06:10,190 --> 00:06:12,750
So like I said inside that's on blurr a callback.

107
00:06:12,780 --> 00:06:17,370
We were not really handling the case in which we got a not a number out of passing this price.

108
00:06:17,760 --> 00:06:21,090
And I had said that we're going to just really delegate all the validation off to our back end.

109
00:06:21,690 --> 00:06:24,300
So if we try to estimate this, well, we get the same thing.

110
00:06:24,390 --> 00:06:28,350
Price must be grid and zero, essentially telling the user, hey, this is supposed to be a number.

111
00:06:29,350 --> 00:06:30,460
We can also take out the title.

112
00:06:31,410 --> 00:06:33,000
Amira told title is required.

113
00:06:34,200 --> 00:06:35,670
I'd say this works pretty well.

114
00:06:36,360 --> 00:06:40,350
Now that we are successfully creating a ticket, we need to decide what we want to do with the user

115
00:06:40,590 --> 00:06:42,060
after the ticket is created.

116
00:06:42,630 --> 00:06:44,130
Let's take a look at that in just a moment.