Our sign up component is looking pretty good but as I mentioned at the end of the last video we've got
some logic inside of here that we're prolly gonna end up duplicating across many other components.
So for example we've got some logic inside of here to make request.
We then handle that request in some way if something goes wrong with the request.
We set some errors and if we get any errors we then render them out in this kind of nicely formatted
list right here so all the stuff is probably gonna be duplicated across many different components and
naturally rather than duplicating this everywhere I think could be kind of handy if we try to make it
a little bit more useful in nature.
So here's what I would like to do.
I want to try to create a new custom hook that we'll call use request the inputs to this use request
took are going to be it where we want to make a request to.
So the URL the method of the request.
So is it a GET request put post patch whatever else and then the body of the request or the information
is sent along.
If the request supports that.
So for example a put patch or a post would all include a body but a GET request would not include a
body so we're going to provide those as inputs to this use request took there we're going to put together
then the output from this user request took we'll be at two things.
First off it'll be some function to actually execute the request and we'll also have some errors thing
coming out as well.
And this error is variable is going to be at some pre rendered block of J.S. X that contains all the
errors that might have occurred while we actually executed that request.
Now it's something that's going to be kind of challenging about this user request hook we're going to
be getting a function to run the request and some errors variable out at the exact same time.
Errors by default is going to be.
No.
Or have a value of null until we actually execute the request and something goes wrong with it.
Now that might not make any sense right now.
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
quickly okay.
So I end up with back over inside my client directory.
I'm gonna make a new folder called books and then inside there I'll make a new file of use request dot
J.S. than inside of here at the very top.
I'm going to import axioms from axioms and I'm going to import the at used state book from react then
after that I'm going to create the hook
so I want the inputs this thing like I just said to be at the you l that we want to make the request
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
going to create some errors piece of state so this will be as some piece of state that's going to store
some J.S. X inside of it.
By default it will have a value of null until something goes wrong with the request.
Then eventually we're going to make sure that we return that errors thing.
We're also going to create a function called do request that's going to actually execute the request
itself.
So I want to create some piece of state that I will call errors.
I'm also going to create that function of do request
and then finally down here without worrying about putting any implementation in for do request just
yet.
I want to make sure that I return return both do request and errors.
I can follow the usual convention of React hoax by returning an array with do request and errors inside
of it.
But I think in this case it might make a little bit more sense to just use an object rather than kind
of rely upon these values being ordered in some particular way.
So now we're going to put together some implementation side of do requests to actually run the request
itself.
In other words we're going to write out pretty much exactly what you see right here in this try catch
block so inside we're going to put together a try catch
I'm going to write out the actual request making logic I'm going to take the response from a weight
CEOs.
And remember we don't necessarily know ahead of time exactly what method or whether we want to make
a get a poster or a patch or whatever else so we can't really write dot get here or dot post or whatever
else.
Instead we're going to do a look up on this axis object using a method right here.
The method has to be equal to just a quick comment here of sorts.
Method must be equal to a string of say posts or get or patch.
And so on.
That's what we're going to assume so look up the appropriate method and I will send off the request
that we'll put in the URL and the body.
So now if the request occurs successfully let's take the data out of this response and return it.
So I will return response dot data.
Otherwise if something goes wrong with the request.
So if we end up in this catch block right here let's take the error that occurred.
We're going to turn it into some J.S. X block that essentially looks very similar to what we did back
down here and we're going to set our ears piece of state with that.
So I'm going to call inside of your set ears and then inside there we're going to write out the same
exact style of J sex that we just put together back inside of our sign up component.
It's a matter of fact it's gonna be so similar.
I'm just going to copy that div right there or cut it go back over to use request and paste it inside
of set errors all that make sure that I update this errors variable right here.
So we don't have any errors variable anymore.
Instead we call the error in this case simply IRR.
And if you recall that your are if we go back up a little bit there's IRR response dot data dot errors.
So that's what we want to map over there we'll do a map right here over your r dot response dot data
dot errors like so
OK.
So I think this is enough to start to test out now if the code we have inside of here right now is confusing.
Don't sweat it.
As soon as we start to make use of it I think you'll get a good idea of how this thing is working.
To save this file.
I'm gonna go back over to sign up j ust I'm going to import that use request
from up one directory actually up to directories books use request.
All right.
Now this video is running just a little bit long.
So how about we just take a quick pause right here.
Come back the next video and see how we actually make use of this hook.