We're nearing the end,
let's move on to the auth container here and in here, class-based component,
so let's convert it to a functional one, like this.
Now we again have a state in here where we manage the form validity or the form values and validity and
whether we're signing up or not, we also have componentDidMount.
So again let's add useState and useEffect and you can already tell by now that these two are probably
the most important and most commonly used React hooks.
Again I want to split my state here to have one state with all my form controls and one with the
isSignUp value. So I'll use that here and call useState and pass in that large object and extract the
values out of it
and here I have my authForm and set authForm
and if we scroll down here, let's close here and then remove that and call useState and pass in true
because we had true before as well
and there this should be isSignUp and set isSignUp and of course you can name these constants here
however you want.
Now instead of componentDidMount, I'll use useEffect and pass in a function that should trigger
whenever this component rebuilds,
so let's move the content we had in componentDidMount, the code into useEffect and pass that second
argument with an empty array to ensure that this function here only executes when this component mounts
and of course in the entire component, instead of this props, so I'll select it everywhere again, you should
just use props.
Now the inputChangedHandler should be converted into a constant to hold that function
and when we use this state controls here, we don't want to use this state controls, instead in all the
places in this component
and again I selected them all simultaneously,
you want to use authForm instead of this state controls because the authForm is what gives me access
to this object here. So let's scroll down again, authForm is what I accessed here. When we call this set
state to update our controls, then I of course want to call set authForm and pass in the updated controls
and here by the way is an example where splitting up the state into our controls, our authForm state
and isSignUp makes a lot of sense because otherwise here if I had one state object only that also
contains the isSignUp field, I would have to merge it manually because what previously worked with set
state, that we passed in a part of the state and React merges it for us,
that is not supported anymore and therefore this code here would not work with React hooks.
So if we passed in just this object here to our big state, instead we would have to manually control
isSignUp here as well.
Now of course we don't have to do that when we're using two different state fields or useState calls.
The submit handler is converted to a constant and here where I access this state isSignUp
and in all places in this component where I do that, I want to use just isSignUp and isSignUp simply
refers to this isSignUp constant I'm getting back from useState, the switchAuthModeHandler should
be converted to a constant too and when I call this set state and toggle my sign up state, I call set
isSignUp and simply set this to what
isSignUp is currently not, simple as that. Remove the render method call here and remove one closing curly
brace like this and let's now make sure that all the places where you use this keywords, you remove this
because we can call our functions that we declared with the const keyword up there,
these functions here just like that.
Now at the very bottom, you also want to change that name you're exporting,
so the name of the constant that holds the functional component
and now let's search for this.
Yes,
this needs to be changed to just inputChangedHandler and that is all.
So now, the auth component should also work again,
let's log out and see ourselves,
if I switch to sign in,
yes,
seems to work.
Now let me try logging in here,
that also works. So auth container is converted,
let's continue with logout because that also is a class-based component.
So here I'll also convert this to a functional component. I'm using componentDidMount in here,
so it's time for the useEffect and therefore here, I call
useEffect like this,
passing a function and move that code into useEffect,
remove the this keyword and just access props and pass that second argument which is an empty array
to ensure that useEffect only runs when this component gets mounted
and then here, remove the render method, just return JSX instead.
And that is almost all,
just make sure you also adjust your name you export down there
and since I name this logout with a lowercase L up here, this constant, you have to rename it down there
as well.
So now let's see if logging out works, we're logging in, if I press logout, seems to work. Let's also
see if redirecting really works.
If I assign in again and I'm on orders and I log out,
yes it redirects me.