1
00:00:00,360 --> 00:00:00,840
Wonderful.

2
00:00:01,380 --> 00:00:08,580
And wants to form Rome as well as alert are set up as separate components so we can use them all throughout

3
00:00:08,580 --> 00:00:09,390
our application.

4
00:00:09,900 --> 00:00:14,250
Now it's handled the toggle member functionality.

5
00:00:14,640 --> 00:00:15,480
Now why do we have it?

6
00:00:15,510 --> 00:00:20,640
Well, first of all, because when we'll register, we want to pass in three values name, email and

7
00:00:20,640 --> 00:00:21,060
password.

8
00:00:21,420 --> 00:00:27,240
But then once we want to log in, then we are only looking for a password and email.

9
00:00:27,600 --> 00:00:29,940
And like I said, we're controlling multiple things.

10
00:00:30,480 --> 00:00:33,670
First of all, we're controlling the input, whether we display it or not.

11
00:00:34,050 --> 00:00:34,930
One second.

12
00:00:34,950 --> 00:00:38,490
Nowadays, steering through our control it every time a click.

13
00:00:38,880 --> 00:00:44,970
And then lastly, once we submit the form, there's going to be a difference which function we invoke,

14
00:00:45,570 --> 00:00:51,840
whether we set up a register request or it's going to be a logging request, which again, we don't

15
00:00:51,840 --> 00:00:55,920
have a server yet, so we're not going to worry about that right now.

16
00:00:56,520 --> 00:01:00,450
So first, let's navigate back and let's see what we need to do.

17
00:01:00,630 --> 00:01:07,140
Well, there has to be a function correct that controls that and not since I have the object.

18
00:01:07,650 --> 00:01:12,690
Like I said, we'll have to do a little bit of trickery where I don't want to replace everything with

19
00:01:12,690 --> 00:01:16,550
just is member and set it equal to the opposite value.

20
00:01:16,890 --> 00:01:20,070
I actually want to get the current values, one that I have in a state.

21
00:01:20,340 --> 00:01:25,290
So those ones all stay the same and only is member is going to be affected.

22
00:01:25,830 --> 00:01:28,140
And then I'll sort of equal to another value.

23
00:01:28,260 --> 00:01:34,380
So if it's true, I'll set it back to false and hopefully you get the gist one in return.

24
00:01:34,710 --> 00:01:39,990
There's three places where we all heard about first, when it comes to our heading three.

25
00:01:40,530 --> 00:01:41,640
We'll set up a condition.

26
00:01:41,910 --> 00:01:47,730
I say, Well, if the value says member is true, then we display login.

27
00:01:48,270 --> 00:01:50,640
Since the user is already a member.

28
00:01:50,640 --> 00:01:53,250
If it's false, then we'll display a register.

29
00:01:53,760 --> 00:01:55,500
And the same goes with input where?

30
00:01:56,620 --> 00:02:05,800
If the values of member is false, meaning if the user is not a member, then we do want to display

31
00:02:05,800 --> 00:02:08,919
the name because we will send it with our request.

32
00:02:09,280 --> 00:02:15,310
And thirdly, there's actually going to be a paragraph which is going to be right after the submit button.

33
00:02:15,730 --> 00:02:19,240
So right after the submit button, we want to create a paragraph.

34
00:02:19,720 --> 00:02:26,050
And then instead of that paragraph, first of all, we will have here a button that runs the function.

35
00:02:26,350 --> 00:02:31,390
So on click toggle member, the function over here and there's going to be type.

36
00:02:31,540 --> 00:02:33,220
Yeah, that stays the same.

37
00:02:33,550 --> 00:02:35,800
It's also going to be a member button.

38
00:02:36,130 --> 00:02:37,900
That's the class that starts everything.

39
00:02:38,260 --> 00:02:39,660
Yep, we don't care about that.

40
00:02:40,030 --> 00:02:44,850
But then the text inside of it, we want to control again, even the IS member, Astrue said at the

41
00:02:44,860 --> 00:02:45,340
register.

42
00:02:45,670 --> 00:02:47,110
If not, then it's logging.

43
00:02:47,140 --> 00:02:50,320
And the same thing we can do over here with a paragraph.

44
00:02:50,740 --> 00:02:55,810
If it's a member and there's going to be one text, if not, then there's going to be something else.

45
00:02:56,230 --> 00:02:58,210
So let's navigate back to the register.

46
00:02:58,210 --> 00:03:03,580
And first, let's set up the function, and in my case, I'm going to do it above the handle change.

47
00:03:03,850 --> 00:03:09,820
So what we're looking for is constant and the toggle member, and then it's going to be a function.

48
00:03:10,060 --> 00:03:11,860
I'll set it up right away as an arrow function.

49
00:03:11,860 --> 00:03:18,880
Like I said, since we have here a state as an object, we want to go dot dot dot, so spread out all

50
00:03:18,880 --> 00:03:19,840
the current values.

51
00:03:20,020 --> 00:03:24,010
And since my state is called values, that's why we have ours here.

52
00:03:24,340 --> 00:03:26,330
And then let's also go, what is member?

53
00:03:26,380 --> 00:03:29,860
So that's the one we're controlling, and we want to set it equal to your opposite.

54
00:03:29,950 --> 00:03:33,280
We're going to go with values and that is member.

55
00:03:33,550 --> 00:03:37,900
Let's say this one here, and then let's keep on scrolling.

56
00:03:37,900 --> 00:03:41,260
And like I said, right after the button, we're going to set up our paragraph.

57
00:03:41,260 --> 00:03:43,960
And for the time being, let's just go with button side of it.

58
00:03:44,680 --> 00:03:50,740
And then let's add here, a type button now will be, of course, equal to a button.

59
00:03:51,160 --> 00:03:53,590
Then we also want to set up that on Click.

60
00:03:53,830 --> 00:03:58,210
So every time we click on a button, we actually want to toggle the number.

61
00:03:58,570 --> 00:04:04,840
So let's say here toggle number, and that's also the styling, right or so class name, and that will

62
00:04:04,840 --> 00:04:07,720
be equal to a member hyphen between.

63
00:04:08,050 --> 00:04:11,200
And then lastly, inside of it, let's just say for now registered.

64
00:04:11,200 --> 00:04:14,080
But like I said, there's going to be a little bit of logic there.

65
00:04:14,200 --> 00:04:19,120
So let's say that I want and I do have the register now, let me navigate to the big screen just so

66
00:04:19,120 --> 00:04:20,500
I can see the toggle.

67
00:04:20,890 --> 00:04:22,930
So I have here is member.

68
00:04:24,180 --> 00:04:27,360
And once I refresh, I should see my target button.

69
00:04:27,720 --> 00:04:28,860
I'm not in the state.

70
00:04:29,130 --> 00:04:30,540
Check it out now.

71
00:04:30,570 --> 00:04:34,620
Every time we click the button, we are actually toggling the member.

72
00:04:34,680 --> 00:04:35,700
So as I'm clicking.

73
00:04:35,970 --> 00:04:37,590
Notice how the value is changing.

74
00:04:37,900 --> 00:04:41,520
Four is member and now we're going to start using that in our return.

75
00:04:41,670 --> 00:04:45,120
Where I'm going to scroll up, I'm looking for two heading three.

76
00:04:45,690 --> 00:04:51,090
And let's set up our condition where we're looking for values dot and is a member.

77
00:04:51,570 --> 00:04:54,930
If it's the case, notice here how we're using ternary operator.

78
00:04:55,140 --> 00:05:00,300
So if it is a case that the value true, then we'll display logging.

79
00:05:00,510 --> 00:05:02,610
If not, then we'll display register.

80
00:05:03,180 --> 00:05:05,640
Let's save it and now notice once a click.

81
00:05:06,000 --> 00:05:13,200
I'm talking the value when we want to do the same thing with our name input, where I'll say if it is

82
00:05:13,200 --> 00:05:13,590
false.

83
00:05:13,710 --> 00:05:19,860
So if values is members false, then I want to display that.

84
00:05:19,920 --> 00:05:21,420
So only if it is false.

85
00:05:21,900 --> 00:05:25,790
So if it is a member, then we're only looking for his email and password.

86
00:05:25,870 --> 00:05:27,550
So let's get it out there.

87
00:05:27,570 --> 00:05:30,300
And let's add here and let's copy and paste.

88
00:05:30,750 --> 00:05:34,440
So now, since this is false by default, that's why we can see.

89
00:05:34,560 --> 00:05:39,810
But if I'll click it again, notice how actually we're not showing the input.

90
00:05:40,150 --> 00:05:44,250
And lastly, back where we have the paragraph first, I want to add text.

91
00:05:44,850 --> 00:05:48,330
So it's going to look something like this or we have not a member.

92
00:05:48,330 --> 00:05:54,090
And then depending on that, we'll also display already member and the same is going to be in the buttons.

93
00:05:54,090 --> 00:05:59,040
So let's start here with our paragraph text, then values is member.

94
00:05:59,550 --> 00:06:01,730
And here again, I'm going to use the ternary operator.

95
00:06:01,740 --> 00:06:05,190
However, we need to keep in mind that the values will be opposite.

96
00:06:05,550 --> 00:06:11,100
And if this doesn't make any sense right now, I'll showcase that once we have everything working.

97
00:06:11,580 --> 00:06:16,080
So if his member is true, actually one in the split, not a member.

98
00:06:16,990 --> 00:06:17,470
Yet.

99
00:06:17,860 --> 00:06:26,620
And if the user is not a member, then we'll say already a member and a question mark, and then the

100
00:06:26,620 --> 00:06:33,700
same thing goes over here with a member button where again, I want to set up my touring operator.

101
00:06:34,150 --> 00:06:37,420
And if the user is a member, then register.

102
00:06:37,630 --> 00:06:38,710
If not, then log logging.

103
00:06:38,710 --> 00:06:39,520
So values.

104
00:06:39,970 --> 00:06:41,140
That is member.

105
00:06:41,890 --> 00:06:43,360
And then let's go without territory.

106
00:06:43,540 --> 00:06:44,930
And then let's say I register.

107
00:06:45,610 --> 00:06:48,520
And also, we have a long term option.

108
00:06:48,880 --> 00:06:55,270
And once we served notice, the reason why we weren't here with opposite values is because I'm signaling

109
00:06:55,450 --> 00:06:58,270
that I'm going to be switching to register, correct?

110
00:06:58,660 --> 00:07:02,080
And if that is the case, then I want to display not a member.

111
00:07:02,230 --> 00:07:08,590
However, if the user is looking at the register option and he or she is already a member, it kind

112
00:07:08,590 --> 00:07:10,570
of makes sense to display that.

113
00:07:10,570 --> 00:07:11,360
That's correct.

114
00:07:11,530 --> 00:07:18,070
And here I'm signaling that I will switch to a longing, and this one is pretty straightforward, and

115
00:07:18,070 --> 00:07:20,850
it looks like I forgot to add here a question mark.

116
00:07:20,860 --> 00:07:21,910
So with me on that one.

117
00:07:22,300 --> 00:07:28,390
And with this in place now I can toggle is member property in the state and in the process.

118
00:07:28,750 --> 00:07:30,730
We're changing the values and heading three.

119
00:07:31,120 --> 00:07:37,600
We are toggling the name input as well as the text inside of the paragraph and member button.