The layout component has been adjusted,
what about withErrorHandler? Now withErrorHandler is a higher order component that returns a
class-based component
and I want to convert this class-based component.
So here, I'll just return an anonymous functional component, so a function that receives props and will
in the end return JSX,
so get rid of that render method here and have one closing curly brace down there
and now in here, we're also using componentWillMount and willUnmount
and we're also using state. This will all not work in our functional component.
So for the state, we'll need to use the useState hook and for componentWillMount and
componentWillUnmount,
we'll have to use the useEffect hook.
Now let's start with the state.
This manages our error and it starts with null here, so let's actually useState here and pass in
null
and let's extract error and setError here. Now for componentWillUnmount, we can't use
useEffect because that will always run after the render cycle and we want to execute this code before
we render our content.
Well, what could be the solution here?
It's actually straightforward.
Since you want to execute that code before your JSX code gets rendered,
you just can remove componentWillUnmount and you're done because our JSX code gets rendered
down there,
this code runs up here,
it does run before the JSX code is reached. Now the only thing I want to change is the request interceptor
here, I'll store this in a constant and not in some property of our class which we don't have here and
the rest can almost stay the same
but of course here where I want to set error to null, I will call setError and set this to null
and here where I want to set it to the error object I'm getting, I'll call setError and pass in that
error object.
Now to avoid naming clashes here and confusion, I'll rename this argument I get here to just err and
I will set err
here in setError.
Now for componentWillUnmount, we can use useEffect.
We can use useEffect because in the function we pass into this, if we return a function there, that will
be our clean up function. So we can pass our cleanup work into this return function there and remove
one curly brace. Now there is one important thing though,
if you want to run this on unmounting, you have to pass a second argument to useEffect which is this
empty array of elements because again React will check all the elements you pass here and only when
they change, when their values change, it will rerun your useEffect function and also your useEffect
clean up function here.
Now if you pass an empty array, these will never change and therefore React will run your main function
content when the component mounts and your cleanup function when it unmounts.
But actually here, this would work but we could also say that we want to rerun this effect and therefore
clean up our interceptors
whenever our request or response interceptor here changes and there by the way, you should remove the
this keyword because I want to refer to my constants here, not to some class property we don't have anymore.
Now since we want to clean up when any of these two changes, we can also passt request interceptor
and response interceptor as arguments or as elements here in this array to useEffect and this is
then a set up we can definitely use because this ensures that we clean this up whenever our interceptors
change.
Now for the errorConfirmedHandler, I'll add const to make this a function inside of the functional component
and when I call set state to set the error to null,
I will call setError and pass null. Now last but not least down here in the JSX code,
when I use this state error, I'll just use error in all these places because we do extract error up here
from useState,
so I'm using that down here now and this will hold the error we set with setError in our place here.
Now regarding the function I pass to modal closed, that is passed without this because it's now just
a function in this function body and for the props I pass to the wrapped component,
these are passed without this because I'm not referring to a property of my class here but to
the props we're getting as an argument there.
With that, we should have an error handler that works again,
so let's actually try this. Now to try that, I'm in Firebase here and there for the rules where I fetched
my ingredient data, I'll set read access to false and this will therefore prevent us from reading our
ingredients
and now when I load, we indeed see that error modal which I can dismiss.
So this works as before,
now with our functional component in the hooks and of course now we can also set this back to true
so that we can load the ingredients again.
Here we go.