1
00:00:00,200 --> 00:00:06,870
Awesome work on setting up all our static components, meaning the components that just take the data,

2
00:00:06,870 --> 00:00:11,550
whether it is user data, whether that is the repos or followers the split.

3
00:00:12,160 --> 00:00:19,650
Now, of course, this would be an awesome time to make our app dynamic where we'll also include a search

4
00:00:19,650 --> 00:00:19,950
form.

5
00:00:20,450 --> 00:00:24,960
So then the user can type the user he or she wants to search for.

6
00:00:25,430 --> 00:00:31,320
For example, we could search for Brad Traverse, say, online, of course, the moment we submit the

7
00:00:31,320 --> 00:00:31,770
form.

8
00:00:32,220 --> 00:00:33,990
Now we hit Egert API.

9
00:00:34,470 --> 00:00:37,980
We get all the awesome data that is going to come back.

10
00:00:38,400 --> 00:00:44,130
And once it does, then we display information about our user, the one that we search for.

11
00:00:44,460 --> 00:00:49,140
And also, of course, we display how many requests we can still make.

12
00:00:49,590 --> 00:00:50,260
So let's do that.

13
00:00:50,490 --> 00:00:53,160
Let's start working on this search form.

14
00:00:53,730 --> 00:01:01,170
And of course, we would first need to find our component and also in the dashboard, remember, we

15
00:01:01,170 --> 00:01:02,460
come and Daudi search.

16
00:01:02,750 --> 00:01:06,320
So now this would be a awesome time to comment search.

17
00:01:06,730 --> 00:01:12,740
Now, we should have that heading to the one from the very beginning of our project.

18
00:01:13,110 --> 00:01:14,350
And now Insurge J.

19
00:01:14,540 --> 00:01:17,700
S Let's start working on this component.

20
00:01:18,270 --> 00:01:21,630
And in this component, there's going to be a local state.

21
00:01:22,110 --> 00:01:27,160
So as we're typing in the form, there's going to be a state that collects that.

22
00:01:27,670 --> 00:01:32,850
And then from the global one, we'll get a function that hits the API.

23
00:01:33,330 --> 00:01:39,100
So I decided to split this up because I think it makes a little bit more sense instead of jamming everything

24
00:01:39,120 --> 00:01:39,630
globally.

25
00:01:40,120 --> 00:01:46,110
That's why I will start with this component, by setting up a user and we'll use use state.

26
00:01:46,470 --> 00:01:51,450
So we're gonna go the user then some user function and that is going to be equal.

27
00:01:51,640 --> 00:01:53,850
Let me correctly add that that user.

28
00:01:54,160 --> 00:01:56,400
And that is equal to react.

29
00:01:56,850 --> 00:01:57,360
React.

30
00:01:57,720 --> 00:02:02,100
Use state your state and we'll start with an empty value.

31
00:02:02,520 --> 00:02:04,980
So essentially just a empty string.

32
00:02:05,370 --> 00:02:07,890
Then we're gonna get some things from global.

33
00:02:08,220 --> 00:02:08,850
Not for now.

34
00:02:09,600 --> 00:02:15,180
So get things from global context.

35
00:02:15,660 --> 00:02:17,070
That is gonna happen eventually.

36
00:02:17,610 --> 00:02:22,440
And also, once I submit the form, since I know that I'm going to have the form, I'm going to have

37
00:02:22,500 --> 00:02:25,450
a function that handles that for the time being.

38
00:02:25,470 --> 00:02:27,540
I'm just gonna go with council handle.

39
00:02:28,450 --> 00:02:30,890
I've met online.

40
00:02:31,020 --> 00:02:33,930
Of course, I would want to have a event object.

41
00:02:34,270 --> 00:02:37,650
So I'm just gonna say here e online for the time being.

42
00:02:37,710 --> 00:02:39,120
We're just going to console log stuff.

43
00:02:39,630 --> 00:02:41,640
So we're going to say log.

44
00:02:42,800 --> 00:02:44,350
Log on.

45
00:02:44,600 --> 00:02:45,110
Let's see.

46
00:02:45,530 --> 00:02:46,940
We're going to take a look at the user.

47
00:02:48,260 --> 00:02:48,590
All right.

48
00:02:48,710 --> 00:02:50,750
So that is our handle submit.

49
00:02:51,020 --> 00:02:53,690
Of course, there's going to be a little bit more functionality in the handle submit.

50
00:02:53,750 --> 00:02:55,130
But for time being.

51
00:02:55,370 --> 00:02:56,330
That should do it.

52
00:02:56,750 --> 00:03:01,400
So now let's set up our return instead of heading to.

53
00:03:02,740 --> 00:03:03,460
I'm going to go.

54
00:03:03,530 --> 00:03:04,570
We have a section.

55
00:03:05,050 --> 00:03:06,610
We'll add a class name here.

56
00:03:07,090 --> 00:03:12,580
So class name is equal to a section then in the section.

57
00:03:12,940 --> 00:03:17,440
We're going to go with a rapper like show, the one that we currently have here.

58
00:03:18,070 --> 00:03:19,300
Rapper and man.

59
00:03:19,300 --> 00:03:21,130
Let's add a class name here as well.

60
00:03:21,640 --> 00:03:25,170
Class name section Santore.

61
00:03:26,200 --> 00:03:27,940
And then within this whole hour, rapper.

62
00:03:28,210 --> 00:03:29,900
Let's start by setting up the forum.

63
00:03:30,480 --> 00:03:36,340
So we're going to go with form and then instead of action, I would want to handle it on our end, of

64
00:03:36,340 --> 00:03:36,760
course.

65
00:03:37,180 --> 00:03:37,900
So that's why.

66
00:03:37,960 --> 00:03:38,380
All right.

67
00:03:38,380 --> 00:03:42,910
Away say that once we submit the form, we will invoke the handle submit.

68
00:03:43,360 --> 00:03:45,380
So I'm going to go with on.

69
00:03:45,730 --> 00:03:49,210
Have met and that is going to be equal to my handle.

70
00:03:49,440 --> 00:03:49,890
Submit.

71
00:03:50,410 --> 00:03:50,740
All right.

72
00:03:50,830 --> 00:03:53,580
Awesome line inside the form.

73
00:03:54,070 --> 00:03:55,210
What I would want to set it up.

74
00:03:55,750 --> 00:04:01,740
Well, I would want to probably have a form control of form control.

75
00:04:01,780 --> 00:04:06,270
And then inside of that form control, I imported a icon.

76
00:04:06,940 --> 00:04:09,670
And also, I'm going to place the input on a button.

77
00:04:10,180 --> 00:04:10,930
So let's do that.

78
00:04:10,960 --> 00:04:12,070
I'm going to go with my icon.

79
00:04:12,130 --> 00:04:13,110
And the icon name is.

80
00:04:13,470 --> 00:04:14,470
And the search.

81
00:04:15,730 --> 00:04:17,650
Let's close the icon event input.

82
00:04:18,190 --> 00:04:20,530
That is just gonna be sample text.

83
00:04:20,800 --> 00:04:22,650
But let's add a placeholder there as well.

84
00:04:22,660 --> 00:04:23,980
So place holder.

85
00:04:24,340 --> 00:04:28,690
And that is going to be equal to enter GitHub user.

86
00:04:29,170 --> 00:04:29,500
All right.

87
00:04:29,530 --> 00:04:30,070
Beautiful.

88
00:04:30,750 --> 00:04:33,550
And let's say that just so we can see what we have.

89
00:04:33,600 --> 00:04:33,800
Right.

90
00:04:33,850 --> 00:04:34,930
So we have our form.

91
00:04:35,380 --> 00:04:42,040
And also, it would be awesome if we would have a button that allows us to submit the form.

92
00:04:42,370 --> 00:04:43,690
So let's go with Button.

93
00:04:44,020 --> 00:04:46,720
It's going to have a type of submit online.

94
00:04:46,840 --> 00:04:48,280
We're just gonna type here.

95
00:04:48,440 --> 00:04:49,030
Search.

96
00:04:49,690 --> 00:04:50,530
Well, let's do that.

97
00:04:51,040 --> 00:04:57,250
And also, I would want to set up my requests because notice on the right hand side here, I have my

98
00:04:57,250 --> 00:04:57,820
requests.

99
00:04:58,270 --> 00:05:04,960
So each and every time I'll set up a request and the moment we load the application, we'll check how

100
00:05:04,960 --> 00:05:10,990
many requests the person who is visiting the site still has.

101
00:05:11,630 --> 00:05:14,130
So we'll do that right outside of form.

102
00:05:14,290 --> 00:05:19,900
But still inside the wrapper, we're gonna go with heading three and overstay requests.

103
00:05:20,290 --> 00:05:24,850
And eventually it's going to be coming from our global state, but not for now.

104
00:05:25,240 --> 00:05:27,080
So let's just hardcourt some kind of value.

105
00:05:27,460 --> 00:05:30,490
60 out of 16.

106
00:05:31,450 --> 00:05:32,050
Let's save it.

107
00:05:32,530 --> 00:05:32,800
All right.

108
00:05:32,830 --> 00:05:36,210
So we have our requests acknowledged just two things.

109
00:05:36,310 --> 00:05:43,900
First, I would want to update the value in the state, the user value as I'm typing.

110
00:05:44,280 --> 00:05:47,530
So the moment I start typing, I would want to update this value.

111
00:05:48,040 --> 00:05:53,080
And the second thing is, I would want to prevent the default once I submit the form, because at the

112
00:05:53,080 --> 00:05:54,100
moment I'm not doing that.

113
00:05:54,100 --> 00:05:59,980
So notice how we are reloading the application each and every time we submit the form.

114
00:06:00,630 --> 00:06:07,140
And I guess I'm going to start by updating the user so I have my user and set user.

115
00:06:07,420 --> 00:06:14,020
So first for the input, I could add a value here and I can say that value is going to be equal to a

116
00:06:14,020 --> 00:06:14,470
user.

117
00:06:14,530 --> 00:06:15,400
So whatever.

118
00:06:15,460 --> 00:06:16,930
I already have typed it out.

119
00:06:17,350 --> 00:06:21,040
And the second thing, of course, we need to have our own change.

120
00:06:21,550 --> 00:06:28,420
So as we're typing out, we're listening for this event and then we decide, well, what are we doing?

121
00:06:28,870 --> 00:06:31,360
And then in this case, I'm going to have my arrow function.

122
00:06:31,690 --> 00:06:33,400
I'm going to pass my event.

123
00:06:33,790 --> 00:06:34,630
And I'm going to say.

124
00:06:34,810 --> 00:06:35,410
Set.

125
00:06:35,950 --> 00:06:36,350
Set.

126
00:06:36,460 --> 00:06:37,210
User.

127
00:06:37,510 --> 00:06:42,040
So I'm invoking my set user function and I'll just pass here.

128
00:06:42,340 --> 00:06:47,680
Event target and then value since I have access to the event.

129
00:06:47,680 --> 00:06:51,310
Object on the event object have property by the name of Target.

130
00:06:51,700 --> 00:06:53,170
And then I can just look for the value.

131
00:06:53,500 --> 00:06:55,000
So whatever I'm going to be typing.

132
00:06:55,370 --> 00:07:00,470
And then of course in order to prevent the default as far as the forms we just go with EA.

133
00:07:01,030 --> 00:07:03,500
And then prevent default.

134
00:07:04,590 --> 00:07:11,700
And then once we invoke this method, of course, in a console, we should see whatever value we have

135
00:07:11,700 --> 00:07:12,100
for years.

136
00:07:12,780 --> 00:07:13,090
Again.

137
00:07:13,140 --> 00:07:13,770
Don't worry.

138
00:07:14,160 --> 00:07:15,630
There's gonna be more logic here.

139
00:07:15,720 --> 00:07:18,160
So type more logic.

140
00:07:18,240 --> 00:07:20,670
Coming up soon.

141
00:07:21,180 --> 00:07:21,930
Let's do this one.

142
00:07:22,320 --> 00:07:22,920
Let's save it.

143
00:07:23,940 --> 00:07:28,110
I think I'm going to navigate to a bigger screen just so I can see it better.

144
00:07:28,590 --> 00:07:29,880
What do you expect?

145
00:07:30,210 --> 00:07:31,290
We have our console.

146
00:07:31,290 --> 00:07:31,770
Awesome.

147
00:07:32,130 --> 00:07:33,120
We have the warnings.

148
00:07:33,180 --> 00:07:34,230
We don't care about those.

149
00:07:34,740 --> 00:07:35,910
Just type something out there.

150
00:07:36,330 --> 00:07:40,620
And once I submit the form, I just need to scroll down and there it is.

151
00:07:40,650 --> 00:07:41,310
Whatever.

152
00:07:41,400 --> 00:07:42,270
I typed it out.

153
00:07:42,930 --> 00:07:50,340
And I guess we'll start by setting up our logic where I would want to check whether I have entered something.

154
00:07:50,820 --> 00:07:52,590
So what I'm going to do right now.

155
00:07:52,860 --> 00:07:56,880
So I'm just gonna say if user is true.

156
00:07:57,480 --> 00:08:03,360
Now, that means that if the user is gonna be empty string, then I'm just not going to do anything.

157
00:08:03,600 --> 00:08:07,980
That's all I'm not going to display among and say you can't submit the form with empty user.

158
00:08:08,370 --> 00:08:13,890
I mean, of course, if you want, you can do that because later I will show you how we can have some

159
00:08:13,890 --> 00:08:14,480
kind of errors.

160
00:08:14,580 --> 00:08:18,330
For example, if we're searching for user, that doesn't exist.

161
00:08:18,420 --> 00:08:23,130
If I tried to do this in the application, you'll notice that there is going to be an error.

162
00:08:23,400 --> 00:08:25,160
There is no user with that username.

163
00:08:25,620 --> 00:08:27,390
So definitely if you want.

164
00:08:27,420 --> 00:08:33,450
You can also set up a flag where, for example, if you're trying to submit the empty form.

165
00:08:33,610 --> 00:08:33,790
Ha.

166
00:08:33,850 --> 00:08:41,730
In my case, I just decided that if that is the case, if the person who is visiting your app and searching

167
00:08:41,730 --> 00:08:46,650
for user by trying to submit the form with an empty value, I'm just not going to do anything.

168
00:08:46,980 --> 00:08:50,760
I'm going to say, yeah, if the user is true, then I would want to do that.

169
00:08:50,760 --> 00:08:51,300
More logic.

170
00:08:51,330 --> 00:08:53,490
If not, while nothing is going to happen.

171
00:08:53,700 --> 00:08:54,990
So you can click all day long.

172
00:08:55,020 --> 00:08:58,860
But if there's no value in there, well, nothing is going to happen.

173
00:08:59,250 --> 00:09:01,950
And the second thing, again, there's going to be more logic.

174
00:09:02,250 --> 00:09:04,350
But the second thing is optional.

175
00:09:04,800 --> 00:09:05,580
So I'm going to type here.

176
00:09:05,610 --> 00:09:06,150
Optional.

177
00:09:06,480 --> 00:09:09,970
Because you also can do set user.

178
00:09:10,350 --> 00:09:12,450
And get it back to an empty string.

179
00:09:12,690 --> 00:09:16,130
So if we test it out and then navigate back to a star.

180
00:09:16,170 --> 00:09:18,840
And if you type the moment, you'll submit the form.

181
00:09:18,910 --> 00:09:21,150
And of course, there's going to be some kind of value.

182
00:09:21,240 --> 00:09:24,570
You could go back to a empty form.

183
00:09:24,680 --> 00:09:27,360
However, in my case, again, in the complete app.

184
00:09:27,780 --> 00:09:29,340
That's not what I went with.

185
00:09:29,700 --> 00:09:34,390
So, for example, if you're searching for some kind of user order here.

186
00:09:35,190 --> 00:09:40,780
And then if you give that user, I'm still leaving that name because I think it just makes more sense.

187
00:09:40,800 --> 00:09:42,690
Because, for example, what if you mess that up?

188
00:09:43,090 --> 00:09:46,500
And now you need to retype the whole name just because you messed up with one letter?

189
00:09:47,040 --> 00:09:48,180
That is my preference.

190
00:09:48,570 --> 00:09:50,310
That's why I'm saying that this is optional.

191
00:09:50,370 --> 00:09:51,930
This is up to you if you want.

192
00:09:51,990 --> 00:09:56,310
Of course, each and every time you submit the form, you can set it back to an empty.

193
00:09:56,700 --> 00:09:58,440
But in my case, I won't do that.

194
00:09:58,890 --> 00:10:02,720
So that should be our basic setup for the search form.

195
00:10:03,720 --> 00:10:11,220
Of course, now we can just head back to our context and then setup the logic where we can make this

196
00:10:11,220 --> 00:10:11,730
dynamic.

197
00:10:12,150 --> 00:10:15,420
So we'll start communicating with the GitHub API.