So with the modal converted, we're only using functional components here.
To conclude this module, I now want to build a custom hook because in this module here, we only saw
useState and useEffect and for a good reason, because these are the most important hooks and I hope it was
helpful seeing them in action and seeing which roles we previously filled with class-based components
and lifecycle hooks, they can play or how they can replace that old code. But we can also create a custom
hook in this project actually
and that is related to our withErrorHandler higher order component.
Now obviously we can leave that component as it is but this entire logic I have in here, all this logic,
we can outsource this into a custom hook actually and then we could use this hook in any component where
we want to find out whether we had an HTTP request error or not
and then we could decide in that component where we use that hook
what we want to do. We don't have to show our modal, we could do anything we want.
So I'll create a new folder which I'll name hooks and in there, I'll add my http-error-handler.js
file. Now in there I'll import from React, not React itself because I am not rendering any JSX
in here but I will import useState and useEffect because these are the hooks I'm using in withErrorHandler
as well.
Now I'll cut all that logic here in withErrorHandler and go back to the http-error-handler and
export a default function here which will receive axios or the HTTP client, whatever you want to
name it, you can name this argument however you want, object and in the function body, I'll paste in that
logic we extracted from withErrorHandler. Axioss now should be replaced and all these places here with
HTTP client and now this assumes that we could pass in any client, as long as it uses this API, so
as long as it has an interceptors field where we can use request use and so on which will probably only
be true for axios but nonetheless. Then I'm managing my state up here, we're setting up the interceptors,
we're cleaning up these interceptors when they change and in the end here, I want to return an array
where I return my error object and the errorConfirmedHandler. So I return the error we might have gone
and a function that allows us to clear the error. And now we can import our custom hook here into
withErrorHandler and therefore get rid of the hook
imports there,
so let's
import use because your custom hooks should always start with a lowercase
use, useHttpErrorHandler from and now go to the hooks folder and then import from that
http-error-handler JavaScript file without the file extension here of course.
And now here, we can call useHttpErrorHandler
and this function is created such that it returns this array with the error and that function to clear
the error. So therefore I can also use, for this specific custom hook, array destructuring and get my
error object and maybe a clearError method
and then here I will call or assign clearError down there and well, I will leave this as error because
I am naming this error up here too. Now
important, I am not using array
destructuring here because we would have to with hooks, the fact that this looks similar to how we use
useState is simply a coincidence.
You can return whatever you want in your custom hooks,
you don't even have to return something,
you can also have a hook that just does something and doesn't return anything but you could also return
a number, text, an object, an array with five elements,
here it just happens to be an array with two elements which looks similar to useState but has nothing
in common otherwise.
So now we have useHttpErrorHandler here and of course technically that will still achieve the same
as we did before.
By the way, we have to pass in axios, that's important because our custom hook here expects to get the
HTTP client, so axios in our case as an argument
but now we could use this hook here anywhere in our application and then it will always give us back
an error object and a clearError method.
And of course we can also keep it in our higher order component which we wrap around other components
but if we ever have other components where we want to use that same error handling logic but we
don't want to show a modal but let's say simply output something on the page, then we can use our hook,
get that error object and do whatever we want to do with that error object
in the JSX code of the component
we're using this hook in.
So now if we save that, let's see if it works by locking down the ingredients again in Firebase and if
I now reload this page, I still get that error modal. So that still seems to work just fine as it did
before,
now with our custom hook doing its work.