1
00:00:00,270 --> 00:00:08,010
Beautiful, and I'll start implementing the register user functionality on our frontend, and I'll start

2
00:00:08,010 --> 00:00:16,050
with the entire setup where where we have initial state in the app context, I want to set up user token

3
00:00:16,050 --> 00:00:19,590
and user location for the first two hours.

4
00:00:19,590 --> 00:00:26,070
There will be no online user location will be equal to an empty string run in the actions jazz.

5
00:00:27,190 --> 00:00:34,480
I want to create following actions, register user begin success and error, meaning it's going to be

6
00:00:34,930 --> 00:00:40,240
registered users begin register users success and hopefully you see where I'm going with it.

7
00:00:40,480 --> 00:00:45,430
As far as the values, it's going to be equal to an exact same string value.

8
00:00:45,940 --> 00:00:52,720
So this is going to be my variable name and learn value will be exactly the same just set up as a string.

9
00:00:53,130 --> 00:00:58,690
And this is going to be the case for rest of the actions that I want to set up the imports introducer

10
00:00:59,020 --> 00:01:03,220
as well as our context, both of them and not in the app context.

11
00:01:03,650 --> 00:01:06,100
Let's set up a structure for our function.

12
00:01:06,550 --> 00:01:10,390
The name will be registered user who's going to be looking for one thing.

13
00:01:10,570 --> 00:01:17,470
It's going to be working for the object where it will have all the data about the user, meaning the

14
00:01:17,470 --> 00:01:24,460
one that is being provided in the register function name, email as well as the password.

15
00:01:24,700 --> 00:01:25,300
Three things.

16
00:01:25,660 --> 00:01:27,360
And for now, I just want to log it.

17
00:01:27,370 --> 00:01:27,790
That's it.

18
00:01:28,770 --> 00:01:29,670
Pretty straightforward.

19
00:01:29,940 --> 00:01:35,820
I'm not in the registered address where I have the submit handler right after the commission, where

20
00:01:35,820 --> 00:01:37,230
I check for empty values.

21
00:01:37,650 --> 00:01:43,920
I want to set up a new object, current user, like I said, it's going to be an object with these values.

22
00:01:44,280 --> 00:01:48,210
So essentially, this is what we'll be passing in in the register function.

23
00:01:48,720 --> 00:01:55,500
And then I want to set up another condition where I'm checking for years member, because if you recall,

24
00:01:55,740 --> 00:01:57,040
we have two options.

25
00:01:57,810 --> 00:02:01,920
The user is a member or he or she wants to register.

26
00:02:02,250 --> 00:02:08,259
And like I said, eventually we'll set up that commission where I'll check the local registered just

27
00:02:08,280 --> 00:02:08,550
states.

28
00:02:08,550 --> 00:02:15,900
Value is member, and if it isn't a member, eventually we will call log in user, which we're going

29
00:02:15,900 --> 00:02:19,200
to set up in the second, meaning once we're done with the register.

30
00:02:19,620 --> 00:02:25,140
But if the user is not a member, if this is false, then we invoke registry user.

31
00:02:25,380 --> 00:02:26,250
And what are we doing here?

32
00:02:26,490 --> 00:02:28,260
Well, we passed in the current user.

33
00:02:28,620 --> 00:02:33,090
And lastly, in the registered address, what I want to do is use is loading.

34
00:02:33,570 --> 00:02:40,050
So essentially, once the loading is true, which is going to be the case when we are in the middle

35
00:02:40,050 --> 00:02:44,550
of our fetch request with the submit button is going to be disabled.

36
00:02:44,820 --> 00:02:45,210
That's it.

37
00:02:45,420 --> 00:02:47,130
That's all we have to do.

38
00:02:47,370 --> 00:02:52,100
And in react, we can do that by using the disabled attribute.

39
00:02:52,500 --> 00:02:59,340
And if it's loading as true, which is again coming from our state run button will be disabled.

40
00:02:59,730 --> 00:03:05,010
And if it's not true, meaning if we're not loading, then it's not going to be disabled.

41
00:03:05,310 --> 00:03:10,350
And once we're know what we're going to be doing, why don't we start in a dashboard where I want to

42
00:03:10,350 --> 00:03:15,240
remove this dummy code, but it's really no use cash for it right now.

43
00:03:15,630 --> 00:03:20,310
So let me just go here with everything green and I don't know.

44
00:03:20,340 --> 00:03:22,350
We might re-use the use of fact.

45
00:03:22,620 --> 00:03:23,150
I'm not sure.

46
00:03:23,670 --> 00:03:27,510
And then let me navigate back to my app context.

47
00:03:28,020 --> 00:03:33,720
So that's the first thing that I want to do is to add those values to my initial state.

48
00:03:34,200 --> 00:03:35,550
Now what values am I talking about?

49
00:03:35,560 --> 00:03:37,120
I'm going to go with user.

50
00:03:37,350 --> 00:03:37,820
No.

51
00:03:38,550 --> 00:03:40,590
Then I also want to add tokenized, though.

52
00:03:41,190 --> 00:03:50,640
And lastly, I want to go with user user location, location, and I want to set that one up as a empty

53
00:03:50,640 --> 00:03:50,940
string.

54
00:03:51,090 --> 00:03:52,830
So those are my default values.

55
00:03:53,760 --> 00:04:01,440
Then we want to navigate through the actions over here, and then let's set up those three actions.

56
00:04:01,830 --> 00:04:10,170
So we're going to go with export consent and then let's go with register on the score user and begin.

57
00:04:10,320 --> 00:04:16,470
Like I said, the value will be exactly the same as is my variable name, the only difference it's going

58
00:04:16,470 --> 00:04:17,970
to be set up as a string.

59
00:04:18,630 --> 00:04:25,320
And then I'm going to go with my two cursors copy and paste, and now we're just going to remove and

60
00:04:25,320 --> 00:04:26,400
we'll go with success.

61
00:04:26,760 --> 00:04:30,750
So this is going to be dispatched if we're successful.

62
00:04:31,080 --> 00:04:34,590
And then the last one will be if we have the error.

63
00:04:34,920 --> 00:04:43,350
Now let me save this one properly here and now what I want to do is go to my reducer and not import

64
00:04:43,350 --> 00:04:43,740
that one.

65
00:04:44,130 --> 00:04:48,540
So right after this one, we're going to go with registry user began.

66
00:04:48,810 --> 00:04:53,100
Where is their user success and then register user error?

67
00:04:53,640 --> 00:04:54,960
And I don't know.

68
00:04:55,500 --> 00:04:58,650
I think I'm just going to copy and paste and then set it up in context.

69
00:04:58,680 --> 00:04:59,880
I really don't see the difference.

70
00:05:00,390 --> 00:05:01,980
So let me navigate here again.

71
00:05:01,980 --> 00:05:03,270
We're looking for reactions.

72
00:05:03,780 --> 00:05:04,770
Copy and paste.

73
00:05:05,190 --> 00:05:07,890
And now it's set up that structure for the function.

74
00:05:08,840 --> 00:05:13,640
Essentially, I want to set up that registered user that is going to be looking for my user object.

75
00:05:14,090 --> 00:05:21,500
I'm going to go below my clear alert and what I want to set up is const register user.

76
00:05:21,560 --> 00:05:22,520
That's the function name.

77
00:05:22,820 --> 00:05:28,000
It's going to be interesting because we'll make a fetch call and then let's go with current user.

78
00:05:28,010 --> 00:05:33,560
So that's the object that we're going to be passing on for time being, since we're just setting everything

79
00:05:33,560 --> 00:05:33,770
up.

80
00:05:33,980 --> 00:05:36,590
We're going to go with current and user.

81
00:05:36,950 --> 00:05:41,090
So now I'll take a look what I see in the console correct now.

82
00:05:41,120 --> 00:05:43,280
It goes without saying that I do want to explore that.

83
00:05:43,280 --> 00:05:50,240
So like I said, I'm not going to be including that step in the actual arena me because I find that

84
00:05:50,450 --> 00:05:51,470
self-explanatory.

85
00:05:51,920 --> 00:05:58,520
And then where I have the register and the sound of this will be a little bit of an issue where, I

86
00:05:58,520 --> 00:06:03,770
mean, I cannot stand the fact that I have so many times open as well as so many files over here.

87
00:06:03,770 --> 00:06:13,160
So you'll see me probably a lot during this where I clean out my tabs as well as the files that are

88
00:06:13,160 --> 00:06:15,950
open because again, I'm just OCD that way.

89
00:06:15,980 --> 00:06:22,850
So let me go back to my client here and source on looking for pages, looking for a register.

90
00:06:23,410 --> 00:06:23,540
Mm-Hmm.

91
00:06:23,930 --> 00:06:27,770
Yes, I do want to read me, though, because that's going to be important.

92
00:06:28,370 --> 00:06:31,640
I might want to showcase some stuff here and there.

93
00:06:31,940 --> 00:06:33,900
So back in the register, what are we doing?

94
00:06:33,920 --> 00:06:36,590
Well, we have pretty much all the imports.

95
00:06:36,590 --> 00:06:38,930
What we don't have is a registered user.

96
00:06:39,080 --> 00:06:39,410
Correct.

97
00:06:39,650 --> 00:06:45,950
So a registered user and as a sign out, you know, it can navigate here to register just so I can see

98
00:06:45,950 --> 00:06:46,370
everything.

99
00:06:46,880 --> 00:06:51,290
And then, uh, I mean, we have a bunch of warnings in a console.

100
00:06:51,290 --> 00:06:52,280
Don't worry about that one.

101
00:06:52,670 --> 00:06:53,920
Let's keep on scrolling.

102
00:06:53,930 --> 00:07:00,110
And like I said, once we're done checking whether one of the values is empty.

103
00:07:01,030 --> 00:07:03,850
And if that's the case, we invoke this play a lot.

104
00:07:04,180 --> 00:07:11,080
Now set up that user where I want to go with concert and non current user front user and not one is

105
00:07:11,080 --> 00:07:11,740
equal to what?

106
00:07:12,070 --> 00:07:15,010
Well, you have here name, email and password.

107
00:07:15,670 --> 00:07:17,680
So we're pretty much don't need to do anything.

108
00:07:17,680 --> 00:07:21,970
We just say that there's going to be an object and then these are going to be our properties.

109
00:07:22,570 --> 00:07:24,670
Name, email and password.

110
00:07:24,910 --> 00:07:26,380
And then let's set up that condition.

111
00:07:26,830 --> 00:07:30,970
So if it is a member, then we'll invoke logging.

112
00:07:31,330 --> 00:07:31,690
Correct.

113
00:07:31,840 --> 00:07:33,190
And as I say, you know what?

114
00:07:33,670 --> 00:07:38,860
I don't want to see those warnings, so I'm just going to uncheck it where I have the custom levels

115
00:07:38,890 --> 00:07:40,840
and we can clearly see what we're looking for.

116
00:07:41,080 --> 00:07:43,120
Now back to our main topic.

117
00:07:43,390 --> 00:07:44,350
What do we want to do here?

118
00:07:44,710 --> 00:07:51,190
We want to check if the user is a member, then eventually we'll go with logging user, something we

119
00:07:51,190 --> 00:07:53,290
haven't set up even on a server yet.

120
00:07:53,650 --> 00:07:54,870
So that is still coming up.

121
00:07:54,880 --> 00:08:01,660
So let's say here is member and for time being another silly console.log where I'm going to say already.

122
00:08:02,600 --> 00:08:04,350
Already a member.

123
00:08:04,580 --> 00:08:04,810
OK.

124
00:08:05,270 --> 00:08:05,720
Beautiful.

125
00:08:06,050 --> 00:08:09,770
And if it's not a case, then we'll go else.

126
00:08:10,160 --> 00:08:14,450
And now I want to go with a registered user and let's pass in that current user.

127
00:08:14,660 --> 00:08:21,740
So if everything is correct, once I click on a register, provide all the values and then click on

128
00:08:21,740 --> 00:08:25,310
Submit, we should see that user object in a console.

129
00:08:25,730 --> 00:08:33,080
And before we do that, let me just scroll down, look for my submit one and then remember of the attribute

130
00:08:33,080 --> 00:08:38,059
name was disabled and that is equal to my is loading.

131
00:08:38,390 --> 00:08:41,630
So if it's going to be loading, it's going to be true.

132
00:08:42,260 --> 00:08:48,280
So we won't be able to click on a button annual clearly say that once we make the fetch request, just

133
00:08:48,290 --> 00:08:52,790
at the moment, we haven't set up any functionality in reducer where we actually toggle the loading.

134
00:08:53,120 --> 00:08:54,530
So that is still coming up.

135
00:08:54,810 --> 00:08:57,530
And if we're not loading, well, then we can use the button.

136
00:08:57,800 --> 00:08:59,330
And what is the default value for?

137
00:08:59,330 --> 00:08:59,900
Is loading?

138
00:09:00,260 --> 00:09:03,140
Well, that one is false, correct?

139
00:09:03,500 --> 00:09:05,930
So let me go to a register.

140
00:09:06,440 --> 00:09:14,750
Then with me out here, John and John gmail.com online, let me provide some kind of password.

141
00:09:14,960 --> 00:09:18,680
And if everything is correct once we click on Submit.

142
00:09:19,130 --> 00:09:20,990
Check it out now in a console.

143
00:09:21,320 --> 00:09:23,180
I see all of the values.

144
00:09:23,300 --> 00:09:26,510
Now, if you want to quickly test that out, is loading.

145
00:09:26,510 --> 00:09:28,520
Well, just navigate to the big screen.

146
00:09:28,730 --> 00:09:29,780
So I'm going to go here.

147
00:09:29,780 --> 00:09:31,700
I'm going to go look for local host.

148
00:09:31,700 --> 00:09:32,630
Three thousand.

149
00:09:33,860 --> 00:09:40,760
Then we're going to go for register, and once you're in the register page, simply go to the components.

150
00:09:41,390 --> 00:09:45,800
And what we can do in the app provider we can toggle.

151
00:09:45,830 --> 00:09:46,250
Correct.

152
00:09:46,580 --> 00:09:47,870
We can go with is loading.

153
00:09:48,140 --> 00:09:50,030
And then let's set it up as true.

154
00:09:50,240 --> 00:09:54,130
So what you'll notice right now is the fact that we cannot click on a button.

155
00:09:54,140 --> 00:10:02,180
So that's why there is no alert over here because we even have the cursor displayed that we cannot click

156
00:10:02,180 --> 00:10:02,720
on a button.

157
00:10:03,080 --> 00:10:09,380
And the goal for this is following where as we're fetching, I don't want the user to keep submitting

158
00:10:09,770 --> 00:10:13,790
the values and in return, keep making those requests.

159
00:10:14,180 --> 00:10:21,770
So while we're still in flight of our register or logging request, the user won't be able to click

160
00:10:21,770 --> 00:10:22,160
the button.

161
00:10:22,400 --> 00:10:24,140
We're done with register users set up.

162
00:10:24,350 --> 00:10:29,720
So now let's talk about the library we're going to use in order to make our fetch requests.