1
00:00:00,450 --> 00:00:04,740
With our Jay sacks complete we can set up some basic functionality.

2
00:00:04,890 --> 00:00:10,170
Now what do I mean by basic Well we're gonna set up our toggle function as well as we're gonna set up

3
00:00:10,170 --> 00:00:12,670
some initial values in panel submit.

4
00:00:12,750 --> 00:00:17,460
So again we're just gonna do a bunch of placeholders where we're gonna show what kind of function we're

5
00:00:17,460 --> 00:00:22,950
going to run and what is gonna happen if the value is true and then what is gonna happen if the value

6
00:00:22,950 --> 00:00:23,550
is false.

7
00:00:23,550 --> 00:00:29,640
Again we haven't set up our log in as well as the register functions as far as strappy is concerned.

8
00:00:29,720 --> 00:00:31,890
That's the reason why we're gonna have some place orders.

9
00:00:32,310 --> 00:00:32,790
And you're not.

10
00:00:32,790 --> 00:00:38,920
I was thinking since I already have the files even though there's no data in there I do have my files.

11
00:00:38,940 --> 00:00:41,760
I have the log and user as well as the register.

12
00:00:41,760 --> 00:00:46,460
So we might as well can import it because again we're just gonna set some comments when we're going

13
00:00:46,460 --> 00:00:48,030
to run these functions.

14
00:00:48,090 --> 00:00:52,950
So let's start I guess by importing a log in user log and user.

15
00:00:52,980 --> 00:00:55,270
Again it doesn't exist there.

16
00:00:55,270 --> 00:00:58,580
There is nothing there is just a comment where we can still get it.

17
00:00:58,580 --> 00:01:03,730
So we're gonna go with strappy Zen we're going to look for log in user copy and paste.

18
00:01:03,870 --> 00:01:06,140
And now we're going to look for registered user.

19
00:01:06,210 --> 00:01:08,140
So we just need to change the name.

20
00:01:08,190 --> 00:01:11,790
We're gonna have them as default exports anyway so it doesn't really matter.

21
00:01:11,850 --> 00:01:14,120
You can as always name it how are you like.

22
00:01:14,310 --> 00:01:19,390
But I'm gonna go with a register user let's save it.

23
00:01:19,440 --> 00:01:25,770
Let's keep on scrolling down because now would want to set up our is empty currently of course we are

24
00:01:25,770 --> 00:01:31,230
hard coding but what I would like to do is I would like to setup is empty.

25
00:01:31,380 --> 00:01:33,750
So it depends on my state values.

26
00:01:34,380 --> 00:01:42,810
So if the value is false meaning if it is empty then I also want my is empty be true if the is empty

27
00:01:42,810 --> 00:01:43,320
is true.

28
00:01:43,640 --> 00:01:48,750
Well then I'm showing the paragraph that tells the user that hey listen you need to fill out the values

29
00:01:49,170 --> 00:01:50,610
how we can set this up.

30
00:01:50,610 --> 00:01:57,780
Well if my is empty is set up this way where I'm already asking if the value is empty and if it is true

31
00:01:58,110 --> 00:02:04,890
then I would like to show the paragraph then the way I set it up is that I'm gonna check if the email

32
00:02:05,310 --> 00:02:07,560
is in fact the opposite value.

33
00:02:07,560 --> 00:02:09,160
Now what is currently email.

34
00:02:09,390 --> 00:02:11,370
Email is an empty string.

35
00:02:11,520 --> 00:02:12,820
So what is an empty string.

36
00:02:12,870 --> 00:02:13,710
What is false.

37
00:02:13,820 --> 00:02:14,170
All right.

38
00:02:14,520 --> 00:02:17,190
Now when I said the opposite value is it true.

39
00:02:17,190 --> 00:02:22,710
So essentially if my email is gonna be an empty value this is going to return true.

40
00:02:22,830 --> 00:02:26,510
That in turn is going to set is empty equal to true.

41
00:02:26,610 --> 00:02:28,290
And then I'm going to show my paragraph.

42
00:02:28,290 --> 00:02:33,810
That's all we can easily test this out once we say with notice I have please fill out all the form fields

43
00:02:34,170 --> 00:02:35,880
if I'm gonna type something in email.

44
00:02:36,090 --> 00:02:41,400
Then of course right now I'm showing the bottom and I'm gonna do the same thing for all the values I'm

45
00:02:41,400 --> 00:02:43,100
going to write the password here.

46
00:02:43,230 --> 00:02:47,910
So again opposite of password because currently it is a empty value.

47
00:02:47,910 --> 00:02:51,690
And then lastly I'm gonna do the same thing with a user name.

48
00:02:51,870 --> 00:02:56,450
And this is the part where now we're gonna talk about the user name because you can clearly see that.

49
00:02:56,480 --> 00:02:57,170
Okay.

50
00:02:57,240 --> 00:03:01,760
So I have default and Y rest of them were an empty string.

51
00:03:01,770 --> 00:03:04,950
Well let's think about it if I'm gonna change this to an empty string.

52
00:03:04,950 --> 00:03:06,480
What do you think is gonna happen.

53
00:03:06,540 --> 00:03:07,890
Well I can save it.

54
00:03:07,980 --> 00:03:13,410
I can type in something in email I can type something in a password but I still cannot see the button.

55
00:03:13,590 --> 00:03:14,870
Why I cannot see the button.

56
00:03:15,090 --> 00:03:17,580
Well because it depends on all the values.

57
00:03:17,670 --> 00:03:20,160
Which is fine if we're toggling the form correct.

58
00:03:20,550 --> 00:03:25,530
If we're showing all the values if let's say user needs to register yes then I would like to check all

59
00:03:25,530 --> 00:03:27,630
the values however for the time being.

60
00:03:27,630 --> 00:03:31,590
If we're just signing in we might as well set this up as a default.

61
00:03:31,680 --> 00:03:36,660
And don't worry we're gonna set our functionality within toggle member so depending on a member we're

62
00:03:36,660 --> 00:03:39,060
also going to control this particular value.

63
00:03:39,130 --> 00:03:42,090
That's the reason why initially we have this for default.

64
00:03:42,120 --> 00:03:47,760
Otherwise there's no way for you user Simon because your value is just gonna be an empty string and

65
00:03:48,270 --> 00:03:54,870
he or she cannot fill out the value but you're still not showing the sign in button or I guess submit

66
00:03:54,870 --> 00:03:55,710
button.

67
00:03:55,710 --> 00:03:56,130
All right.

68
00:03:56,130 --> 00:04:01,080
Now we have these values and by the way eventually it's also going to depend on the alert.

69
00:04:01,320 --> 00:04:03,150
But we're a long ways from that.

70
00:04:03,160 --> 00:04:06,850
So just telling you that eventually there's gonna be one more value here.

71
00:04:07,090 --> 00:04:12,870
And I guess now I can just work on our toggle member and toggle number is gonna be interesting because

72
00:04:13,290 --> 00:04:19,410
we're gonna use the fact that the U.S. state the function that we get back whether that's set at passwords

73
00:04:19,410 --> 00:04:25,640
and user names that he's a member whatever the function is in fact accepting a function as well.

74
00:04:25,780 --> 00:04:27,680
And we're going to see that in a second.

75
00:04:27,750 --> 00:04:28,650
So how is gonna work.

76
00:04:28,650 --> 00:04:30,470
Well I would like to toggle the member.

77
00:04:30,510 --> 00:04:31,060
All right.

78
00:04:31,140 --> 00:04:35,460
So the function is set is member.

79
00:04:35,460 --> 00:04:36,140
All right.

80
00:04:36,240 --> 00:04:39,520
But initially everything that we've been doing is all right.

81
00:04:39,540 --> 00:04:43,760
So we have our function and then we're just passing the new value.

82
00:04:43,770 --> 00:04:49,280
However in this case I would want to check what is the previous value.

83
00:04:49,290 --> 00:04:53,340
He is the member true or is it false because I'm going to be toggling.

84
00:04:53,340 --> 00:04:59,520
So what we can do is we can pass a function here within a set number so set is member is already in

85
00:04:59,520 --> 00:05:00,150
function.

86
00:05:00,210 --> 00:05:04,770
And please keep in mind just because I'm talking about that number doesn't mean that the same works

87
00:05:04,770 --> 00:05:10,260
for that email password as well as the user name so we can pass here a function instead of a new value

88
00:05:10,560 --> 00:05:14,400
instead of me saying that this is gonna be let's say false.

89
00:05:14,400 --> 00:05:16,640
I could pass in a function.

90
00:05:16,730 --> 00:05:23,640
Now what's cool about this function that as a parameter it gets the old value and since it is parameter

91
00:05:23,910 --> 00:05:25,610
I can call this whatever I would like.

92
00:05:25,650 --> 00:05:33,290
So I'm going to call this brief member like so and by the way as always when in doubt just consult log

93
00:05:33,300 --> 00:05:34,530
it to see what you're going to.

94
00:05:35,010 --> 00:05:38,010
So brief member see whether that functionality works.

95
00:05:38,110 --> 00:05:43,920
And once we can see that we can access the previous value that we have in the state which in our case

96
00:05:43,920 --> 00:05:44,830
was true.

97
00:05:44,870 --> 00:05:48,360
Now let's set up the functionality where we're gonna change it.

98
00:05:48,370 --> 00:05:48,890
OK.

99
00:05:49,050 --> 00:05:55,360
So first I'm going to sign it some kind of variable I'm gonna say let is member number and I'm gonna

100
00:05:55,380 --> 00:05:58,410
say it's gonna be the opposite of whatever I have.

101
00:05:58,410 --> 00:06:02,390
So since we're toggling I would want to set it to a opposite value.

102
00:06:02,440 --> 00:06:08,580
And the fastest way of doing that is just by adding a exclamation mark and then say whatever the value

103
00:06:08,580 --> 00:06:10,010
was for previous number.

104
00:06:10,110 --> 00:06:12,330
Well give me the opposite one.

105
00:06:12,340 --> 00:06:18,000
OK then we're gonna set up some kind of ternary operator so there is gonna be is member.

106
00:06:18,150 --> 00:06:21,060
So now I'm going to check what is the actual value.

107
00:06:21,270 --> 00:06:24,660
And if the value is true then I'm gonna run.

108
00:06:24,760 --> 00:06:27,690
Set the user name I'm gonna set this to a default.

109
00:06:28,080 --> 00:06:36,390
So if the member has already registered then I just want to show this as a default because again I don't

110
00:06:36,390 --> 00:06:40,920
want this one the set user name to prevent me from submitting the form.

111
00:06:41,310 --> 00:06:48,420
So again if this is true if the member has already register we're going to set the user name as a default

112
00:06:49,520 --> 00:06:55,400
like so if the user hasn't register well then we're going to set some user name.

113
00:06:55,520 --> 00:06:57,140
And this is gonna be an empty string.

114
00:06:57,310 --> 00:07:04,990
And what we need to do from this function is always always return the value because that's gonna be

115
00:07:05,020 --> 00:07:07,660
our new set is member value.

116
00:07:07,660 --> 00:07:11,740
Whether that's true or false in this case or in general we always need to return it.

117
00:07:12,040 --> 00:07:12,770
So I'm going to go with.

118
00:07:12,760 --> 00:07:15,060
Return is member.

119
00:07:15,100 --> 00:07:17,640
So I did my functionality and now I'm just returning it.

120
00:07:18,030 --> 00:07:23,160
And that's the cool thing about the function that we're getting to set the state value.

121
00:07:23,440 --> 00:07:27,610
So again instead of just passing some kind of value like we have been doing before.

122
00:07:27,700 --> 00:07:33,280
True or false whatever array or whatnot that in this case we're passing in the function.

123
00:07:33,280 --> 00:07:33,850
OK.

124
00:07:34,030 --> 00:07:39,630
And then within that function the first thing as a parameter we get the old state value or you can say

125
00:07:39,640 --> 00:07:44,710
current state value and then we can do whatever functionality we'd want but we'd need to make sure that

126
00:07:44,800 --> 00:07:47,190
we return some kind of value.

127
00:07:47,200 --> 00:07:49,670
So essentially we're setting that state value.

128
00:07:50,100 --> 00:07:56,770
And now let's head over to handle submit and again we're just gonna set up some basic initial functionality

129
00:07:57,220 --> 00:08:01,000
where there's going to be a value of response.

130
00:08:01,000 --> 00:08:03,340
So I'm gonna set up a variable of response.

131
00:08:03,620 --> 00:08:09,220
And this case I'm gonna be checking if the response is going to be true then I'm gonna do something.

132
00:08:09,240 --> 00:08:12,330
And then if it's gonna be false then we're gonna do something else.

133
00:08:12,340 --> 00:08:18,340
So if we're successful of logging in then of course we're gonna navigate a way from the page and all

134
00:08:18,340 --> 00:08:18,550
that.

135
00:08:18,610 --> 00:08:21,800
If not then we're just going to display some alert.

136
00:08:22,180 --> 00:08:27,190
And also since we're getting the event object we know that one of the first things we would want is

137
00:08:27,430 --> 00:08:31,510
prevent defaults or event prevent a default.

138
00:08:31,510 --> 00:08:36,390
Otherwise again we're gonna refresh the page and that's not what we're looking for.

139
00:08:36,400 --> 00:08:37,660
There's also gonna be an alert.

140
00:08:37,660 --> 00:08:40,340
So let me add a comment off alert.

141
00:08:40,540 --> 00:08:47,530
And the way it's going to work is once we submit the form it's going to depend whether the user is a

142
00:08:47,530 --> 00:08:50,380
member or not because we have two functions.

143
00:08:50,380 --> 00:08:53,350
We have log in user as well as the register user.

144
00:08:53,410 --> 00:08:56,070
So that's the reason why we're gonna set up a if statement.

145
00:08:56,070 --> 00:09:02,620
I'm not going to say if the user is a member then and I'm going to in this case I'm gonna run comments

146
00:09:03,070 --> 00:09:09,260
where I'm gonna sign my response response equal to a log in years.

147
00:09:09,610 --> 00:09:16,330
So log in user why we're setting this up because if the user has already registered we're gonna run

148
00:09:16,390 --> 00:09:18,540
our log and user functionality.

149
00:09:18,550 --> 00:09:24,760
Now this is gonna be a synchronous function so we're just gonna add a a wait because we have async await

150
00:09:25,120 --> 00:09:26,740
and this is just gonna turn a promise.

151
00:09:26,740 --> 00:09:32,730
So we're just gonna wait until the promise has settled again we're gonna have the proper functionality.

152
00:09:32,800 --> 00:09:39,220
Now we're just adding these comments now if the user is not a member and then of course we would want

153
00:09:39,220 --> 00:09:40,040
to register.

154
00:09:40,050 --> 00:09:47,350
So in this case again we're gonna have comments for now but it's gonna be a response is a wait and we're

155
00:09:47,350 --> 00:09:53,450
gonna be looking for a registered user registered user that is gonna be the function again it's gonna

156
00:09:53,470 --> 00:09:58,030
be a synchronous function since we're gonna be performing actually typing requests.

157
00:09:58,060 --> 00:10:04,660
So that's the reason why we're gonna wait again until our promise is settled and then once we get back

158
00:10:04,690 --> 00:10:10,360
our response because regardless whether we run log and user or their user we're gonna have some kind

159
00:10:10,360 --> 00:10:13,690
of value for response so we're gonna type out another if statement.

160
00:10:13,690 --> 00:10:22,630
So if response is true then we're gonna do some logic where essentially again we're going to show alert

161
00:10:22,660 --> 00:10:29,440
we're going to navigate from the page or if we're not successful of register or logging in the user

162
00:10:29,830 --> 00:10:33,730
then we're gonna show the alert and that's it.

163
00:10:33,730 --> 00:10:35,020
So let's save it.

164
00:10:35,050 --> 00:10:38,490
That's how our initial annals of is going to look like.

165
00:10:38,650 --> 00:10:42,970
And now we're going to switch gears and start working with our actual functions.