We've got our title in our price.
It is time to submit this to our back end.
Tickets.
Service as a quick reminder.
Let's take a look at the ticket service itself.
So here's my tickets folder, SIRC directory routes.
And inside there is the new TSA file.
This is the root handler that we want to make a request to you to create a new ticket.
So we have to make a post request to API tickets and we have to include the title and the price, if
anything is wrong with the title and price that is provided in our API is going to send back an error
to us automatically.
So let's take a look at how we have made requests from inside of a component in the past.
Now, keep in mind that this is a different kind of request that we we're making right now, as opposed
to the get initial prop stuff we were discussing just a moment ago to get initial props function, which
we're working on inside of our landing page, was all about fetching some data that is required to show
this component on the screen.
So just to render it for the very first time.
Right now we are talking about making a request from inside of a company itself.
So we had actually created a little helper hook to help us out with this process inside of our Hooke's
directory.
We've got that U.S.
Request hook.
This is a custom home we put together just to make making request, handling errors.
All that comes up really easy and straightforward.
When we call the.
Request, we are going to provide a U or L, a method, a body and an on success callback.
Those are all inputs to the hook.
Then, as the output from the hook, we get back a function called Do Request and a little bit of G.S.
X called Eyre's the do request right here.
That is a function that we're going to call to actually invoke or run the request.
Aires is a little block of G.S. X that's going to capture all the errors that might be coming back from
our API and then render them out as a nice little block of G.S. X.
The other thing I want to mention is that the on success callback that we're going to also pass in here
is going to be called with the data that we got back from the API request as well.
That's gonna become relevant in just a little bit.
OK.
So this is the user question.
OK, we're going to use this once again inside of our tickets.
New component.
We're going to make sure that we provide the appropriate URL, blah, blah, blah.
All that stuff.
And then eventually, after user estimates our form, we will call the do request function that we are
returning it from the hook.
So back inside of our component at the very top.
Let's import U.S.
Request from up to directories.
Books use request.
Then right after all of our you state stuff.
We're going to take the do request function and any errors that might have occurred from user request.
And we'll put in some options to the hook itself just to customize the requests that we're going to
eventually issue.
The first will put in r your l as we just saw, we want to make a request to API tickets.
Our method is going to be post and notice that it is lowercase post right here, not all uppercase,
because we are really just taking that method right there and looking up the appropriate method on the
Axios library object.
So axios method right there.
Next up, we have to provide the body.
So this is the data we want to send along in this case, it's going to be our title and the price.
And then finally are on success callback right now, I'm going to do a console log of how about the
data that we get back?
I'll receive that data, which will really be the ticket.
So I'll just about call it ticket and a console, log the ticket like so.
So there's our hook.
Now we're going to make sure that simply in time we call that do request function.
We'll also make sure that we display that little block of ears inside of our form as well.
Remember that by default, when our component first is created, theirs is going to be empty.
It is only once we actually make a request that we're going to have that request fail.
That airs is going to contain some G.S. X so we can really show airs inside of all of our JSA X down
here at all times.
And it's only going to become visible when there actually are some errors.
So we'll just throw in airs right above the button like so.
Next up, we're going to find our form element.
Whenever someone submits this thing well, we're going to make our request.
They'll put in an on submit.
Endler, I'm going to make a helper function with a matching name called Simply on Simit.
Then right above are on blurr.
I'll make on Simit.
I receive the event object.
And called prevent.
Default on it.
And after that, I will call to request.
All right, that should be it, this should create an actual ticket on our API.
Let's save this and give it a shot.
I'll flip back over to repress the page just because sometimes personally, for me, it feels like next
doesn't always quite capture the refreshes or whenever I save a file.
So I'm just in the habit of refreshing the page anyhow.
Well, I'll go ahead and enter in a title.
So how about first client ticket and a price of 20?
We'll submit that.
And there we go.
There's the console log from the on success Fall-back.
And if I take a look at my network request tab, I should see a request to our tickets.
End points.
Looks like everything is good to go.
Now we can see all the relevant details about the ticket inside of on success.
We're going to need those in just a moment.
But right now, one other thing I want to test out really quickly.
What happens if we provide some invalid inputs?
A very easy, invalid input we can put in here is a negative price.
Remember, our request handler checks, make sure that the price provided is greater than zero.
So I'll try putting in negative 20, submitting that.
And I'm told that very quickly.
OK.
Price must be greater than zero.
How about if we put in a string of characters?
So like I said inside that's on blurr a callback.
We were not really handling the case in which we got a not a number out of passing this price.
And I had said that we're going to just really delegate all the validation off to our back end.
So if we try to estimate this, well, we get the same thing.
Price must be grid and zero, essentially telling the user, hey, this is supposed to be a number.
We can also take out the title.
Amira told title is required.
I'd say this works pretty well.
Now that we are successfully creating a ticket, we need to decide what we want to do with the user
after the ticket is created.
Let's take a look at that in just a moment.