1
00:00:02,450 --> 00:00:03,400
We're nearing the end,

2
00:00:03,620 --> 00:00:09,110
let's move on to the auth container here and in here, class-based component,

3
00:00:09,320 --> 00:00:13,370
so let's convert it to a functional one, like this.

4
00:00:13,370 --> 00:00:20,480
Now we again have a state in here where we manage the form validity or the form values and validity and

5
00:00:20,510 --> 00:00:24,950
whether we're signing up or not, we also have componentDidMount.

6
00:00:24,980 --> 00:00:32,270
So again let's add useState and useEffect and you can already tell by now that these two are probably

7
00:00:32,270 --> 00:00:36,860
the most important and most commonly used React hooks.

8
00:00:36,860 --> 00:00:44,120
Again I want to split my state here to have one state with all my form controls and one with the 

9
00:00:44,180 --> 00:00:54,350
isSignUp value. So I'll use that here and call useState and pass in that large object and extract the

10
00:00:54,350 --> 00:00:55,340
values out of it

11
00:00:55,340 --> 00:00:59,440
and here I have my authForm and set authForm

12
00:00:59,720 --> 00:01:10,460
and if we scroll down here, let's close here and then remove that and call useState and pass in true

13
00:01:10,520 --> 00:01:13,130
because we had true before as well

14
00:01:13,400 --> 00:01:19,930
and there this should be isSignUp and set isSignUp and of course you can name these constants here

15
00:01:19,940 --> 00:01:21,590
however you want.

16
00:01:21,800 --> 00:01:29,080
Now instead of componentDidMount, I'll use useEffect and pass in a function that should trigger

17
00:01:29,860 --> 00:01:32,440
whenever this component rebuilds,

18
00:01:32,440 --> 00:01:38,590
so let's move the content we had in componentDidMount, the code into useEffect and pass that second

19
00:01:38,620 --> 00:01:43,840
argument with an empty array to ensure that this function here only executes when this component mounts

20
00:01:43,900 --> 00:01:50,170
and of course in the entire component, instead of this props, so I'll select it everywhere again, you should

21
00:01:50,170 --> 00:01:52,000
just use props.

22
00:01:52,000 --> 00:01:58,190
Now the inputChangedHandler should be converted into a constant to hold that function

23
00:01:58,330 --> 00:02:04,390
and when we use this state controls here, we don't want to use this state controls, instead in all the

24
00:02:04,390 --> 00:02:05,760
places in this component

25
00:02:05,800 --> 00:02:08,440
and again I selected them all simultaneously,

26
00:02:08,590 --> 00:02:17,020
you want to use authForm instead of this state controls because the authForm is what gives me access

27
00:02:17,200 --> 00:02:24,820
to this object here. So let's scroll down again, authForm is what I accessed here. When we call this set

28
00:02:24,890 --> 00:02:32,600
state to update our controls, then I of course want to call set authForm and pass in the updated controls

29
00:02:32,960 --> 00:02:39,470
and here by the way is an example where splitting up the state into our controls, our authForm state

30
00:02:39,500 --> 00:02:46,370
and isSignUp makes a lot of sense because otherwise here if I had one state object only that also

31
00:02:46,370 --> 00:02:52,550
contains the isSignUp field, I would have to merge it manually because what previously worked with set

32
00:02:52,550 --> 00:02:57,530
state, that we passed in a part of the state and React merges it for us,

33
00:02:57,530 --> 00:03:03,010
that is not supported anymore and therefore this code here would not work with React hooks.

34
00:03:03,020 --> 00:03:09,620
So if we passed in just this object here to our big state, instead we would have to manually control

35
00:03:09,620 --> 00:03:11,570
isSignUp here as well.

36
00:03:11,570 --> 00:03:17,300
Now of course we don't have to do that when we're using two different state fields or useState calls.

37
00:03:18,820 --> 00:03:25,960
The submit handler is converted to a constant and here where I access this state isSignUp

38
00:03:25,960 --> 00:03:33,070
and in all places in this component where I do that, I want to use just isSignUp and isSignUp simply

39
00:03:33,070 --> 00:03:41,020
refers to this isSignUp constant I'm getting back from useState, the switchAuthModeHandler should

40
00:03:41,020 --> 00:03:49,870
be converted to a constant too and when I call this set state and toggle my sign up state, I call set

41
00:03:49,960 --> 00:03:53,130
isSignUp and simply set this to what 

42
00:03:53,140 --> 00:04:01,100
isSignUp is currently not, simple as that. Remove the render method call here and remove one closing curly

43
00:04:01,100 --> 00:04:09,780
brace like this and let's now make sure that all the places where you use this keywords, you remove this

44
00:04:09,930 --> 00:04:15,360
because we can call our functions that we declared with the const keyword up there,

45
00:04:15,360 --> 00:04:17,760
these functions here just like that.

46
00:04:18,450 --> 00:04:22,640
Now at the very bottom, you also want to change that name you're exporting,

47
00:04:22,710 --> 00:04:26,110
so the name of the constant that holds the functional component

48
00:04:26,260 --> 00:04:27,690
and now let's search for this.

49
00:04:27,750 --> 00:04:28,180
Yes,

50
00:04:28,200 --> 00:04:33,450
this needs to be changed to just inputChangedHandler and that is all.

51
00:04:33,480 --> 00:04:36,800
So now, the auth component should also work again,

52
00:04:36,810 --> 00:04:39,110
let's log out and see ourselves,

53
00:04:39,120 --> 00:04:41,200
if I switch to sign in,

54
00:04:41,250 --> 00:04:41,920
yes,

55
00:04:42,000 --> 00:04:43,500
seems to work.

56
00:04:43,500 --> 00:04:46,910
Now let me try logging in here,

57
00:04:49,210 --> 00:04:53,180
that also works. So auth container is converted,

58
00:04:53,200 --> 00:04:57,200
let's continue with logout because that also is a class-based component.

59
00:04:57,310 --> 00:05:02,800
So here I'll also convert this to a functional component. I'm using componentDidMount in here,

60
00:05:02,800 --> 00:05:07,070
so it's time for the useEffect and therefore here, I call

61
00:05:07,060 --> 00:05:09,070
useEffect like this,

62
00:05:12,280 --> 00:05:16,120
passing a function and move that code into useEffect,

63
00:05:16,160 --> 00:05:22,240
remove the this keyword and just access props and pass that second argument which is an empty array

64
00:05:22,250 --> 00:05:25,570
to ensure that useEffect only runs when this component gets mounted

65
00:05:26,050 --> 00:05:31,230
and then here, remove the render method, just return JSX instead.

66
00:05:31,460 --> 00:05:33,310
And that is almost all,

67
00:05:33,370 --> 00:05:38,200
just make sure you also adjust your name you export down there

68
00:05:38,200 --> 00:05:43,540
and since I name this logout with a lowercase L up here, this constant, you have to rename it down there

69
00:05:43,630 --> 00:05:44,900
as well.

70
00:05:44,920 --> 00:05:51,990
So now let's see if logging out works, we're logging in, if I press logout, seems to work. Let's also

71
00:05:52,000 --> 00:05:54,340
see if redirecting really works.

72
00:05:54,370 --> 00:05:57,600
If I assign in again and I'm on orders and I log out,

73
00:05:57,610 --> 00:05:58,720
yes it redirects me.