1
00:00:01,590 --> 00:00:02,400
Welcome, everyone.

2
00:00:02,430 --> 00:00:06,610
Today, we are going to learn about how we could finish the search controller.

3
00:00:06,660 --> 00:00:10,580
Yeah, today we got to work on the search controller so we will have applications state.

4
00:00:11,310 --> 00:00:14,310
We will learn about applications and learn about these new concept.

5
00:00:14,640 --> 00:00:18,460
Now, views in controllers and models.

6
00:00:18,480 --> 00:00:26,040
Sorry, I'm going to show you views and models will have a separate files, separate JavaScript files,

7
00:00:26,040 --> 00:00:29,190
but the controller will be one main file.

8
00:00:29,200 --> 00:00:30,780
Will we put everything inside?

9
00:00:30,930 --> 00:00:33,780
It will be easier for us to control.

10
00:00:34,500 --> 00:00:34,840
Nice.

11
00:00:34,920 --> 00:00:36,000
That's why its controller.

12
00:00:36,240 --> 00:00:42,270
But I'm not going to have separate files for the controllers, but I'm going to have a separate files

13
00:00:42,270 --> 00:00:43,710
for the models and some use.

14
00:00:43,920 --> 00:00:48,510
So that is pretty much what I'm trying to say now in the controller.

15
00:00:48,520 --> 00:00:51,090
We need to find a way how we can control the current state.

16
00:00:51,330 --> 00:00:58,410
And that's why we see applications that now when I see a state, means that what movies we have at the

17
00:00:58,410 --> 00:01:01,640
moment, how many likes we have, what's inside the car.

18
00:01:01,800 --> 00:01:05,110
So all of these represent the current state in any given time.

19
00:01:05,430 --> 00:01:08,930
This is why we need to create this state to store the data.

20
00:01:09,030 --> 00:01:10,890
And that's pretty much easy here.

21
00:01:11,070 --> 00:01:11,460
Right?

22
00:01:11,610 --> 00:01:12,840
So this is called application state.

23
00:01:12,900 --> 00:01:16,980
And we could save all of the data inside one object.

24
00:01:16,980 --> 00:01:21,540
So I'm going to remove this because we don't need it actually right here.

25
00:01:21,810 --> 00:01:22,280
No.

26
00:01:22,590 --> 00:01:23,370
So don't worry.

27
00:01:23,490 --> 00:01:26,610
We are just adding and removing things because we haven't actually started.

28
00:01:26,610 --> 00:01:32,820
But today we we actually going to implement the controller for this and we're still going to be things

29
00:01:32,820 --> 00:01:37,770
that we are missing out here because the the view search view is not there yet.

30
00:01:37,950 --> 00:01:40,340
But next lecture, we will have a search for you.

31
00:01:40,420 --> 00:01:46,070
So so every lecture you will have, like a model controller, you it will be separated.

32
00:01:46,080 --> 00:01:47,790
So I'm not going to do the two in one go.

33
00:01:48,060 --> 00:01:48,390
Right.

34
00:01:49,530 --> 00:01:57,210
So now let's create this data so we can store the entire current state of our application in any given

35
00:01:57,210 --> 00:01:57,530
time.

36
00:01:57,750 --> 00:02:07,570
So the best thing is that we can do I'm just going to say here, global state of the app and I'm just

37
00:02:07,570 --> 00:02:09,330
going to close it like this in here.

38
00:02:09,330 --> 00:02:12,170
I do have the misspelling global nice.

39
00:02:12,690 --> 00:02:18,630
Now here, I'm just going to name this global state of the app called Data.

40
00:02:18,840 --> 00:02:25,730
And inside I'm going to store the search object because at the moment we're dealing with the search.

41
00:02:25,740 --> 00:02:26,120
Right.

42
00:02:26,490 --> 00:02:28,800
And after that, we're going to do with the music movies.

43
00:02:28,800 --> 00:02:31,190
And I'm going to say that movies object.

44
00:02:31,410 --> 00:02:36,540
But at the moment I'm going to store the search object and I'm not going to go through the the rest

45
00:02:36,540 --> 00:02:36,760
of them.

46
00:02:36,960 --> 00:02:37,890
So how are we going to do this?

47
00:02:37,890 --> 00:02:43,500
We can achieve this by creating a constant here, which is small, of course, constant data.

48
00:02:44,340 --> 00:02:46,710
And that will be an object at the moment.

49
00:02:46,720 --> 00:02:48,430
It will be an empty object.

50
00:02:49,410 --> 00:02:56,100
So this is how we create this data and we can access this one if we pass it directly to the window object.

51
00:02:56,100 --> 00:03:00,660
Because remember, every time we do have the access to the story, you shouldn't see this.

52
00:03:03,750 --> 00:03:08,130
Now, every time we do something, we need to know where was I?

53
00:03:08,160 --> 00:03:12,930
So we need to store the data and we can pass this data through the window, object right in the window,

54
00:03:12,940 --> 00:03:13,170
object.

55
00:03:13,170 --> 00:03:13,440
We do.

56
00:03:13,530 --> 00:03:14,680
We did had access.

57
00:03:15,060 --> 00:03:21,780
Remember, if I do inspect here, if I do Conjola, if I just remove this all this nonsense and we will

58
00:03:21,780 --> 00:03:25,650
say we know we do have this window object.

59
00:03:25,650 --> 00:03:25,920
Right.

60
00:03:26,070 --> 00:03:29,220
So there are a lot of things we can get through the window.

61
00:03:29,530 --> 00:03:35,610
But one thing that I'm interested in, I can pass this data and I can say we know that data equals data

62
00:03:35,610 --> 00:03:36,770
that I have from here.

63
00:03:37,650 --> 00:03:46,200
Now I will have window that data and if I hit enter, it will give me an empty object because it is

64
00:03:46,200 --> 00:03:46,650
an empty.

65
00:03:46,660 --> 00:03:48,260
This data is actually empty.

66
00:03:48,570 --> 00:03:53,420
So we are assigning this window data to this data here, right.

67
00:03:53,460 --> 00:03:59,160
This data, the moment is empty, but I'm going to use this to show you a little bit later on how we

68
00:03:59,160 --> 00:03:59,970
could use it now.

69
00:04:01,260 --> 00:04:08,970
So later on, we will use the local storage at some point to persist data and this will not be affected

70
00:04:08,970 --> 00:04:10,730
by the browser reload.

71
00:04:10,770 --> 00:04:18,720
So when we do this, the data, it will be stored into this by using the local storage.

72
00:04:18,810 --> 00:04:24,600
We have done a little bit of local storage in the first couple of lectures, not in the first couple

73
00:04:24,600 --> 00:04:26,810
of lectures, but in our to do list.

74
00:04:26,820 --> 00:04:27,200
Right.

75
00:04:27,690 --> 00:04:29,960
And we use that there.

76
00:04:30,000 --> 00:04:36,430
OK, now let's do the search controller and we will need to chat event listener for the form.

77
00:04:36,720 --> 00:04:37,880
So where is the format?

78
00:04:37,890 --> 00:04:43,030
The form is actually located pretty much here when you say search begin.

79
00:04:43,260 --> 00:04:45,330
That's the form and here is the form.

80
00:04:45,330 --> 00:04:49,650
And we do have this input type inside and we do have the search button.

81
00:04:49,800 --> 00:04:52,200
Actually, the button is the icon here that you see.

82
00:04:52,380 --> 00:04:52,770
Right.

83
00:04:53,100 --> 00:04:56,820
So that's the icon that I'm using right now.

84
00:04:57,840 --> 00:04:58,540
That's cool.

85
00:04:58,680 --> 00:05:01,170
So what we can do, we need to target this one.

86
00:05:01,380 --> 00:05:08,310
So I'm not going to create an event listener here in the index, just kind of remove everything for

87
00:05:08,310 --> 00:05:08,630
now.

88
00:05:09,300 --> 00:05:13,550
So we are going to have an event listener.

89
00:05:13,980 --> 00:05:17,740
So how we do this document dot query selector.

90
00:05:17,880 --> 00:05:20,280
So I want to select the movie Search.

91
00:05:20,580 --> 00:05:21,740
That's why I copy this one.

92
00:05:22,020 --> 00:05:28,550
So I want to select the form class that I have, movie search and what else we do have.

93
00:05:28,860 --> 00:05:32,250
I'm going to say add event listener and it will be on submit.

94
00:05:32,730 --> 00:05:33,150
Right.

95
00:05:34,320 --> 00:05:41,160
And I will have I will pass, I will pass the actual event here right now.

96
00:05:41,190 --> 00:05:42,540
Look at what's happening here.

97
00:05:42,930 --> 00:05:48,270
When I, when I click here on this button, I do have the page reload.

98
00:05:48,290 --> 00:05:53,400
So this actually submitting the form is actually submitted and that was the default.

99
00:05:53,790 --> 00:05:55,330
So I don't need this anymore.

100
00:05:55,800 --> 00:05:59,790
So that was the default way of the of the of the forum.

101
00:05:59,800 --> 00:06:03,710
So when you click the submit somewhere to some to some files.

102
00:06:03,720 --> 00:06:03,960
Right.

103
00:06:03,990 --> 00:06:08,810
So what we can do here, remember that last time we did not prevent default.

104
00:06:08,820 --> 00:06:14,760
I don't want this to be the default action because the submit submitting of the form is actually the

105
00:06:14,760 --> 00:06:15,140
default.

106
00:06:15,330 --> 00:06:18,870
So when I click now, you can see that it's not refreshing.

107
00:06:19,680 --> 00:06:22,080
OK, now one more thing.

108
00:06:22,680 --> 00:06:26,520
Every event listener, same as the Berney file will go.

109
00:06:26,880 --> 00:06:28,630
Bernie will go hearing the controller.

110
00:06:28,830 --> 00:06:32,760
So from there we will have we will delegate what we need to do.

111
00:06:32,760 --> 00:06:38,820
So the listeners are going here right now what else we need here to do.

112
00:06:40,890 --> 00:06:46,800
And instead of writing now, so the idea, instead of writing here, what it needs to do after the clicking

113
00:06:46,800 --> 00:06:52,710
or submitting, I'm going to create a separate function for the controller and I'm going to call it

114
00:06:52,710 --> 00:06:53,190
from here.

115
00:06:53,190 --> 00:06:57,770
And I'm going to say call search controller.

116
00:06:59,100 --> 00:06:59,550
So.

117
00:07:01,340 --> 00:07:07,520
The comptroller, the name of that comptroller, will be search comptroller, right?

118
00:07:07,790 --> 00:07:16,910
So this function, I will create it outside here and I will say I can say search controller

119
00:07:19,400 --> 00:07:23,370
and I can do the I can do that that function outside.

120
00:07:23,540 --> 00:07:26,480
So this is going to be a little bit more clean to see.

121
00:07:26,840 --> 00:07:29,090
And we can define the function.

122
00:07:29,090 --> 00:07:32,370
See, using the const search controller.

123
00:07:32,390 --> 00:07:37,490
Remember, we already defined the name, so we need to use the same name and that will be equal.

124
00:07:37,520 --> 00:07:43,220
We're not going to take any parameters here, and that's pretty much it.

125
00:07:43,490 --> 00:07:48,070
Now, every time we do something, we actually submit something.

126
00:07:48,320 --> 00:07:51,320
We've got to prevent the default and it will go to the search controller.

127
00:07:51,320 --> 00:07:53,700
And actually the function is defined in here.

128
00:07:53,960 --> 00:08:00,080
Now, I'm going to do pretty much similar for every other for every other functions that we're going

129
00:08:00,080 --> 00:08:00,380
to create.

130
00:08:00,650 --> 00:08:04,090
Now, the first things first, I want to get that query.

131
00:08:04,100 --> 00:08:05,350
Remember the last time we did it?

132
00:08:05,540 --> 00:08:13,450
So I'm going to say get up, get a search query.

133
00:08:13,460 --> 00:08:18,590
Now, we are not really here to get it from the form, from the form.

134
00:08:18,770 --> 00:08:21,200
And this will come from The View next time.

135
00:08:21,410 --> 00:08:23,430
But I'm just going to manually do it like this.

136
00:08:23,450 --> 00:08:32,300
I'm going to create a const query and I'm going to say I'm going to define it to Tarzan, because when

137
00:08:32,300 --> 00:08:34,940
we're doing with the constants, we need to define it as well.

138
00:08:35,060 --> 00:08:41,750
Right now, the next thing we need to do is to check if the query exists, if this query is not empty,

139
00:08:41,900 --> 00:08:45,960
because remember, now it's like this, but later on we can grab it from here.

140
00:08:46,400 --> 00:08:54,200
So if this is a fool, if this this input contains some information, then we will say if query and

141
00:08:54,200 --> 00:09:02,000
we can do something inside right now, what we will need to do is to create an object from the search

142
00:09:02,000 --> 00:09:02,380
glass.

143
00:09:02,540 --> 00:09:05,070
So that's an additional thing that we need to look into.

144
00:09:05,240 --> 00:09:07,460
So create a new object

145
00:09:09,830 --> 00:09:14,150
from search class and how are we going to do this?

146
00:09:14,240 --> 00:09:18,140
Const search, equal new search.

147
00:09:18,140 --> 00:09:23,510
And I'm going to pass the query from the top because I know the query will always contain something.

148
00:09:23,900 --> 00:09:28,880
OK, now the next thing that I need to use this data, I need to store it here.

149
00:09:28,910 --> 00:09:34,810
So what I can do here is, I guess, a data that search equal to the search.

150
00:09:35,120 --> 00:09:36,130
Did I have it here?

151
00:09:37,040 --> 00:09:39,010
Now I will have something to the data.

152
00:09:39,410 --> 00:09:44,340
Actually, the data this the state will not be empty at the moment.

153
00:09:44,340 --> 00:09:44,510
Right.

154
00:09:44,530 --> 00:09:52,490
This application state, we can say global application app, state of the

155
00:09:55,190 --> 00:09:58,700
global application state is better now.

156
00:09:59,450 --> 00:10:02,090
Data search equal to a search.

157
00:10:02,090 --> 00:10:03,470
But we can do this in one line.

158
00:10:03,620 --> 00:10:05,110
So I'm just going to comment this one out.

159
00:10:05,810 --> 00:10:07,540
So how we can do this in one line.

160
00:10:07,550 --> 00:10:08,660
So I'm going to say data.

161
00:10:09,660 --> 00:10:11,030
Data that search.

162
00:10:13,820 --> 00:10:23,000
Equal to new research, and I'm going to pass the query, so instead of doing the two lines, first

163
00:10:23,510 --> 00:10:28,910
declaring the surge and then adding it here, I can just see data that search equals search.

164
00:10:28,910 --> 00:10:31,670
And that's pretty much more easy now.

165
00:10:31,700 --> 00:10:32,140
Oh, good.

166
00:10:32,150 --> 00:10:33,080
We do have this one.

167
00:10:33,260 --> 00:10:36,080
So let's get the results in story.

168
00:10:36,170 --> 00:10:41,820
So we already actually store it, but now we need to actually get the results.

169
00:10:42,080 --> 00:10:43,600
So how are we going to do this?

170
00:10:45,080 --> 00:10:46,620
Simply, we're going to war.

171
00:10:46,730 --> 00:10:54,190
So I'm going to say here, movie search and simply I'm going to store these into the data.

172
00:10:54,200 --> 00:10:58,520
So data that search, actually, it's not going to be.

173
00:10:58,520 --> 00:11:05,440
Yeah, they did a search and I'm going to call get search result.

174
00:11:05,870 --> 00:11:13,070
So I'm actually calling with search J.S. I'm actually I'm calling this here.

175
00:11:13,250 --> 00:11:19,970
Right, because we do have the access of that class and it doesn't require any parameters because we

176
00:11:19,970 --> 00:11:22,310
already have defined a query and it will go there.

177
00:11:22,790 --> 00:11:25,360
OK, now what is next?

178
00:11:25,910 --> 00:11:33,470
But for this to be successful, because this is we are dealing with API, we need to wait for the result.

179
00:11:33,800 --> 00:11:40,280
Now, we can just say here away, but this is not going to work because a wait only leaves in async

180
00:11:40,280 --> 00:11:40,700
function.

181
00:11:40,740 --> 00:11:44,790
So we need to define the async function on top.

182
00:11:44,810 --> 00:11:46,430
So how are we going to do async?

183
00:11:46,880 --> 00:11:49,510
And pretty much we are done now.

184
00:11:49,520 --> 00:11:51,980
That is pretty much what we have to do.

185
00:11:53,930 --> 00:11:54,490
Next step.

186
00:11:54,500 --> 00:12:03,980
Obviously, we will need to be to display the data, display the data to UI, but here mean we don't

187
00:12:03,980 --> 00:12:10,880
have the view because everything that's connected with UI, same as here, is going to be done in the

188
00:12:10,880 --> 00:12:12,880
View controller or in the search view controller.

189
00:12:12,890 --> 00:12:14,360
But we don't have that one year.

190
00:12:14,540 --> 00:12:18,820
It will be in the next lecture, but here we can just simply cancel a lot.

191
00:12:19,040 --> 00:12:25,130
So I'm going to say console log data, search the movies.

192
00:12:26,000 --> 00:12:26,930
How do I know this?

193
00:12:26,930 --> 00:12:29,480
Because in the search I do have these movies.

194
00:12:29,480 --> 00:12:29,790
Right.

195
00:12:31,460 --> 00:12:31,800
Cool.

196
00:12:32,630 --> 00:12:34,360
Now let's see what's happening here.

197
00:12:34,700 --> 00:12:40,470
If I go outside here, if I do window dot data, it will be again, empty window.

198
00:12:40,490 --> 00:12:41,990
What if I click here?

199
00:12:43,100 --> 00:12:44,360
I do have to.

200
00:12:44,630 --> 00:12:46,730
By the way, I don't know where they're coming from.

201
00:12:47,030 --> 00:12:55,840
Just wait probably here so you can come this one out because that will print the same result twice.

202
00:12:56,120 --> 00:13:00,620
So I'm just going to show you that the window, the data is actually empty.

203
00:13:00,680 --> 00:13:02,060
That is the current state.

204
00:13:02,060 --> 00:13:03,620
We haven't done anything to this one.

205
00:13:03,920 --> 00:13:09,950
So when I click here on this search icon, I will have the data for the Tarzan.

206
00:13:09,950 --> 00:13:10,280
Right.

207
00:13:10,490 --> 00:13:11,330
So we can change.

208
00:13:11,330 --> 00:13:16,940
It doesn't go to the what Batman and you will see it's working.

209
00:13:17,210 --> 00:13:20,780
So if I click it here, you will have this one.

210
00:13:21,060 --> 00:13:24,950
OK, now let's see what the data is having.

211
00:13:25,250 --> 00:13:27,230
So look, now the window, the data.

212
00:13:27,230 --> 00:13:30,380
I have the search object in inside the search.

213
00:13:30,380 --> 00:13:31,700
We do have the query.

214
00:13:31,910 --> 00:13:34,640
We do have the movies are very cool.

215
00:13:34,730 --> 00:13:35,600
Now we have two things.

216
00:13:35,600 --> 00:13:38,360
The movies are array in the search query.

217
00:13:38,780 --> 00:13:40,160
What was the Batman before?

218
00:13:40,160 --> 00:13:40,490
Right.

219
00:13:41,240 --> 00:13:42,720
That is pretty much it.

220
00:13:43,070 --> 00:13:46,190
So now you know how you can do the application.

221
00:13:46,190 --> 00:13:52,910
State in this state will change when we do when we search, when we add to likes, when we add something

222
00:13:52,910 --> 00:13:57,680
else, this state will always be different.

223
00:13:57,680 --> 00:13:59,290
We will add something to the state.

224
00:13:59,300 --> 00:14:02,300
This is how we adding things to the state right now.

225
00:14:02,300 --> 00:14:03,710
That is pretty much it.

226
00:14:03,710 --> 00:14:12,170
What I want to show you for this lecture and all of the event listeners here or have or define the controller,

227
00:14:12,320 --> 00:14:19,280
but we will do the functions outside the controllers, at least some of them, because it's more readable

228
00:14:19,280 --> 00:14:19,880
like this.

229
00:14:20,280 --> 00:14:22,160
Yeah, because this will be bigger file.

230
00:14:22,160 --> 00:14:25,730
So I just want you to have that clean code.

231
00:14:25,970 --> 00:14:26,270
Good.

232
00:14:26,450 --> 00:14:30,560
Now, next time I'm going to show you, same as in the Berney, we're going to define the selectors

233
00:14:30,560 --> 00:14:33,200
here, you know, different files and we're going to call it.

234
00:14:33,200 --> 00:14:38,300
But remember, we can't define some things that are not here.

235
00:14:39,470 --> 00:14:39,830
Right?

236
00:14:39,830 --> 00:14:41,360
They're not here in this one.

237
00:14:41,370 --> 00:14:45,230
So, for example, if I click here, Inspector, I can see that there is a class.

238
00:14:45,410 --> 00:14:51,260
But the part when we actually search later on, it will have popping out here the movies.

239
00:14:51,440 --> 00:14:57,050
So those classes will be added from the action we are taking.

240
00:14:57,050 --> 00:14:59,630
So they are not here at this stage.

241
00:14:59,630 --> 00:15:07,340
So we can't get we can't use all of the all of the classes with from external files.

242
00:15:07,550 --> 00:15:12,110
Some of them they will be defining like this, some of them like this because the movie Serge.

243
00:15:12,410 --> 00:15:17,800
The search, this function, it's going to stay regardless if I refresh, it's going to be there, right.

244
00:15:17,900 --> 00:15:20,090
And I can easily grab it.

245
00:15:20,830 --> 00:15:22,340
It's class.

246
00:15:22,560 --> 00:15:25,010
That's pretty much what I want to explain you.

247
00:15:25,070 --> 00:15:26,110
I will see you in the next one.

248
00:15:26,120 --> 00:15:28,380
I hope you enjoy this and stay safe.