1
00:00:01,210 --> 00:00:06,220
Welcome back in this video, we are going to set up this search bar here at the top, as you can see,

2
00:00:06,220 --> 00:00:08,950
there is this beautiful bar where we can now search for news.

3
00:00:09,220 --> 00:00:13,090
I don't know why you would do that, but maybe you want to do that and now you will learn how to do

4
00:00:13,090 --> 00:00:13,300
it.

5
00:00:13,720 --> 00:00:14,080
All right.

6
00:00:14,080 --> 00:00:19,330
So let me say, or let's say we're interested in LeBron news, so we're just going to search for LeBron

7
00:00:19,660 --> 00:00:22,090
and filter for it and we can see squid.

8
00:00:22,090 --> 00:00:30,400
Game creator Huanglong Huke takes a jab at LeBron James, then Lakers star LeBron James handed one game

9
00:00:30,400 --> 00:00:32,130
suspension after and so forth.

10
00:00:32,140 --> 00:00:39,070
So you see, we get a bunch of LeBron James news, so let's go ahead and implement this feature because

11
00:00:39,070 --> 00:00:40,550
this is pretty cool, right?

12
00:00:40,570 --> 00:00:43,450
It will give you a lot of new skills and let's get started.

13
00:00:45,820 --> 00:00:48,520
Therefore, let's go ahead and create a new composable.

14
00:00:51,570 --> 00:00:57,930
Which I'm going to put into my components, so I'm going to call this one search bar.

15
00:00:58,380 --> 00:01:01,380
Mike, so all right, so the search bar.

16
00:01:02,660 --> 00:01:04,700
Will just be a composable.

17
00:01:05,180 --> 00:01:11,670
So let's just add the ad composable annotation again, which will be fun.

18
00:01:11,900 --> 00:01:25,670
Search bar, which will require a query which will be a mutable state of type string and then the news

19
00:01:26,030 --> 00:01:27,530
manager as well.

20
00:01:30,210 --> 00:01:32,880
Therefore, we need to implement mutable state.

21
00:01:33,420 --> 00:01:35,760
So let's do that real quick or import it.

22
00:01:37,320 --> 00:01:39,840
And then what good?

23
00:01:40,290 --> 00:01:46,200
So for this point or at this point, let's add a preview here.

24
00:01:47,100 --> 00:01:57,810
So at preview show or here at previewing the imported show background, I'm going to say that I want

25
00:01:57,810 --> 00:02:06,760
to see the background and then at composable, which will be fun search bar preview.

26
00:02:07,530 --> 00:02:10,740
So which will just display the search bar?

27
00:02:11,870 --> 00:02:16,070
With a query of a mutable state of.

28
00:02:17,870 --> 00:02:18,890
Just an empty string.

29
00:02:20,890 --> 00:02:23,440
And then news manager.

30
00:02:28,670 --> 00:02:30,980
And we need to suppress this Arab because.

31
00:02:32,020 --> 00:02:33,340
That's just what it is.

32
00:02:34,630 --> 00:02:40,570
It is an unremembered, mutable state error that we can suppress so that it doesn't appear so that we

33
00:02:40,570 --> 00:02:44,080
can see the search bar, even though at this point the search bar will be empty.

34
00:02:44,080 --> 00:02:50,050
There's nothing to really display here, but we're going to implement step by step.

35
00:02:50,770 --> 00:02:59,070
OK, before we do that, however, let's go ahead and go over to our chopper news and create a query.

36
00:03:00,070 --> 00:03:04,570
At the top level here, because we get the articles, but now let's add equerry here as well.

37
00:03:05,360 --> 00:03:05,650
Okay.

38
00:03:05,650 --> 00:03:11,080
Query, which will be of type, mutable state, mutable state.

39
00:03:12,690 --> 00:03:13,980
That is of type string.

40
00:03:15,320 --> 00:03:18,210
OK, so let's import the mutable state at this point.

41
00:03:18,650 --> 00:03:27,410
And we're also going to need the news manager, so the top news will need to be able to draw data or

42
00:03:27,620 --> 00:03:28,760
to ask for data.

43
00:03:29,120 --> 00:03:34,850
So let's create a news manager object in your past and use manager object to our top news as well.

44
00:03:35,210 --> 00:03:37,880
We can then use this inside of our column.

45
00:03:38,180 --> 00:03:46,190
So instead of displaying text top news which we have in our application right now, we will need to

46
00:03:46,190 --> 00:03:47,060
replace this.

47
00:03:47,060 --> 00:03:53,870
I'm going to comment this out and this the search bar instead, with the query being the query.

48
00:03:55,900 --> 00:03:59,860
So here, query the inquiry and passing the new manager to it.

49
00:04:00,280 --> 00:04:01,660
So let's import such bar.

50
00:04:03,230 --> 00:04:08,180
Which is inside of a different package, which is why we need to insert it or import it, even though

51
00:04:08,510 --> 00:04:09,620
it's in our own project.

52
00:04:10,280 --> 00:04:15,270
So now that we set up the search bar here, even though it's empty, there's really nothing to show.

53
00:04:15,410 --> 00:04:20,360
It's really nothing in my search bar, even though we're having a query and the news manager.

54
00:04:20,600 --> 00:04:24,110
But the thing is, the news manager itself is not really prepared for this yet.

55
00:04:24,470 --> 00:04:28,230
The news manager doesn't know how to handle a query.

56
00:04:28,550 --> 00:04:32,810
So let's go ahead and create a new variable, which will be called query.

57
00:04:33,200 --> 00:04:42,380
So I'm going to create a vowel query, which will be a mutable state of, for now, an empty string.

58
00:04:43,160 --> 00:04:48,560
So this will just hold a string and based on the string, it will manage to state.

59
00:04:49,340 --> 00:04:52,640
So if the string is changing, then the state will change as well.

60
00:04:55,360 --> 00:04:58,930
OK, now we can use this query in our news app.

61
00:04:59,290 --> 00:05:01,090
So here news app.

62
00:05:02,540 --> 00:05:03,670
The key file.

63
00:05:04,170 --> 00:05:07,080
So here you see, we have this composable.

64
00:05:07,320 --> 00:05:13,440
Well, basically, this is ANA navigation, right, where we are displaying the three different categories

65
00:05:13,440 --> 00:05:16,230
here at the bottom of the three different options here at the bottom.

66
00:05:16,560 --> 00:05:21,090
And our top news one isn't happy anymore because now it needs a query.

67
00:05:21,810 --> 00:05:26,730
So we're going to use used to news manager query because that's where we're going to store the query

68
00:05:26,730 --> 00:05:29,150
itself right or get to stay away from it.

69
00:05:29,160 --> 00:05:34,110
And we need to pass the news manager itself as well, which we get from the bottom navigation here so

70
00:05:34,110 --> 00:05:34,900
we can pass it.

71
00:05:34,920 --> 00:05:40,550
We did pass it before for our categories, for example, as well as for our sources.

72
00:05:40,590 --> 00:05:47,670
So we were using the news manager before and now we're just going to do that as well for our top news.

73
00:05:50,920 --> 00:05:59,230
A. This wouldn't do anything unless we have a query for it where we actually do have a search request,

74
00:05:59,240 --> 00:06:01,840
so to speak, and that will be in our news service.

75
00:06:02,320 --> 00:06:08,980
Katie File So here we had this, the one where we searched for sources, but now we're going to have

76
00:06:08,980 --> 00:06:15,720
something similar where I'm going to call this one, get articles and not by source.

77
00:06:15,730 --> 00:06:17,290
You could call a by query or so.

78
00:06:17,500 --> 00:06:20,860
But our aquarium just going to college your keyboard.

79
00:06:20,860 --> 00:06:27,790
The keyword is Q, and I'm going to call this one query, which will be of type string.

80
00:06:33,310 --> 00:06:40,810
And it will return a call with a top news response, so the same as we've had for all of our other responses

81
00:06:40,810 --> 00:06:41,020
here.

82
00:06:42,060 --> 00:06:48,780
OK, now we need to create a getter and setter in our news manager for our news response that we searched

83
00:06:48,780 --> 00:06:49,050
for.

84
00:06:49,320 --> 00:06:50,970
So for the query, so to speak.

85
00:06:51,300 --> 00:06:52,890
So let's go ahead and do that.

86
00:06:53,370 --> 00:06:54,600
This one will be searched.

87
00:06:55,020 --> 00:06:56,790
News response.

88
00:06:58,000 --> 00:06:59,080
So I'm going to call it.

89
00:06:59,170 --> 00:07:01,360
It will still give us a news response, right?

90
00:07:02,170 --> 00:07:08,470
Using the mutable state and here this one will be called search and use response like so and it will

91
00:07:09,190 --> 00:07:12,070
get on the score search news response, remember?

92
00:07:12,460 --> 00:07:18,400
So just again, getter and setter with the privacy turned on, so to speak.

93
00:07:21,350 --> 00:07:26,450
And now our news management needs some effort to get us the article, so we had all of these good articles

94
00:07:26,450 --> 00:07:27,740
by and so forth.

95
00:07:28,010 --> 00:07:31,540
So let's go ahead and do the same thing.

96
00:07:31,610 --> 00:07:37,490
So get articles by query or get searched articles is how I'm going to call it.

97
00:07:37,610 --> 00:07:40,310
So get searched articles.

98
00:07:41,320 --> 00:07:47,140
And it will call the surged Missy, how did I call this method?

99
00:07:48,730 --> 00:07:54,520
And it's inside of our news service here.

100
00:07:54,730 --> 00:07:56,020
I called get articles.

101
00:07:56,980 --> 00:08:02,080
OK, so here get articles with the query name.

102
00:08:02,620 --> 00:08:08,890
So here we're going to use to query which I'm going to pass here to this method query, which will be

103
00:08:08,890 --> 00:08:09,670
of type string.

104
00:08:10,810 --> 00:08:17,620
And I'm going to use this query to pass it to my get articles method, which will be this method here.

105
00:08:20,030 --> 00:08:20,450
OK.

106
00:08:21,560 --> 00:08:23,450
And that should be good articles.

107
00:08:23,630 --> 00:08:28,760
So then we are going to do the same thing, we want to get top news response, call back.

108
00:08:29,090 --> 00:08:34,900
If the response is successful, then we're going to set the value of our search news response to be

109
00:08:34,909 --> 00:08:35,929
the response body.

110
00:08:36,500 --> 00:08:39,830
And we're going to display that in our blog as well.

111
00:08:40,309 --> 00:08:42,380
And everything else, I think, should stay the same.

112
00:08:44,960 --> 00:08:47,360
And maybe we can call this one such error.

113
00:08:48,020 --> 00:08:53,510
And this woman will log search instead of category, and this will be also searched.

114
00:08:53,750 --> 00:08:56,420
And if it wasn't successful, so to speak.

115
00:08:57,290 --> 00:09:01,790
OK, so this is our get searched articles, which will give us not the searched articles based on the

116
00:09:01,790 --> 00:09:07,460
query that we're passing because it will call this get search will get articles new service method,

117
00:09:07,490 --> 00:09:11,750
which will pass in the query with the string that we are passing to it.

118
00:09:15,510 --> 00:09:18,270
And in that case, you were wondering what is Q comes from?

119
00:09:18,480 --> 00:09:24,520
Well, we're searching for everything with Q, so here.

120
00:09:24,540 --> 00:09:30,990
Q, for example, would be Apple secures the query or the keyword question or search keywords, so to

121
00:09:30,990 --> 00:09:31,380
speak.

122
00:09:31,710 --> 00:09:39,330
So you just go to the news API and you can also get search for news articles or just get started search

123
00:09:39,330 --> 00:09:40,110
for news articles.

124
00:09:40,110 --> 00:09:47,250
You will find everything is the end point and then you need to give the reference as well after question

125
00:09:47,250 --> 00:09:47,580
mark.

126
00:09:48,510 --> 00:09:54,780
OK, so you can add also a date if you wanted to, you can sort it as well, and you need to pass in

127
00:09:54,780 --> 00:09:55,710
the API key.

128
00:09:55,920 --> 00:10:01,080
So we don't need to do any of that manually, because that's what because that's why we created our

129
00:10:01,080 --> 00:10:02,700
architecture around it, right?

130
00:10:03,390 --> 00:10:08,580
So now we can just go ahead and use this approach right where we just get everything, which is again,

131
00:10:08,580 --> 00:10:09,360
the end point.

132
00:10:09,360 --> 00:10:13,440
And we add the Q as the question after the question mark, so to speak.

133
00:10:13,440 --> 00:10:17,370
So cute equals and then whatever we have as a query will be added in there.

134
00:10:20,070 --> 00:10:26,100
OK, and now we can go back to our search bar because we still haven't created anything here, so I'm

135
00:10:26,100 --> 00:10:38,310
going to need a local focus manager, so local focus manager, which I'm going to set to local focus

136
00:10:38,310 --> 00:10:39,840
manager Dot current.

137
00:10:43,790 --> 00:10:53,000
The focus manager takes care of what is currently in focus, so to speak, in our application, so call

138
00:10:53,000 --> 00:10:57,830
this function to clear focus from the currently focused component and set the focus to the root focus

139
00:10:57,830 --> 00:10:58,370
modifier.

140
00:10:58,380 --> 00:11:02,090
So yeah, that's what you can do with focus or clear focus.

141
00:11:02,390 --> 00:11:07,700
But generally speaking, the focus manager and you can see the documentation is really limited and this

142
00:11:08,240 --> 00:11:11,630
is just taking care of what the focus should be.

143
00:11:11,930 --> 00:11:13,860
So what is the focus of your application?

144
00:11:13,880 --> 00:11:17,420
Does it focus on this part of the application?

145
00:11:17,720 --> 00:11:21,830
For example, it says, then the focus of the app.

146
00:11:23,930 --> 00:11:27,750
For example, it then says the focus of the app to the search bar.

147
00:11:27,770 --> 00:11:31,850
So that's what this focus manager, this local focus manager, can do.

148
00:11:33,450 --> 00:11:35,730
So we're going to set a local focus manager.

149
00:11:38,650 --> 00:11:44,320
And then we're just creating a cart because you see, this is basically just a card that is floating

150
00:11:44,320 --> 00:11:44,680
there.

151
00:11:45,070 --> 00:11:47,470
So let's go ahead and create a card here.

152
00:11:48,010 --> 00:11:52,900
I'm just going to set the default settings here really quickly.

153
00:11:54,930 --> 00:12:03,450
So, so this card will have an elevation of six, it will have rounded corners of four density pixels,

154
00:12:03,450 --> 00:12:07,200
then we're filling the max with we're setting the padding to eight.

155
00:12:07,650 --> 00:12:13,470
Then I'm setting the background color to be the material theme.

156
00:12:14,930 --> 00:12:15,500
Thought.

157
00:12:16,880 --> 00:12:24,620
Colors thought our primary colors or whatever the primary color of our application is and the primary

158
00:12:24,620 --> 00:12:28,670
color is the main color that we have in our application.

159
00:12:28,940 --> 00:12:34,250
So if you go to your themes, you will find that your color primary in our case, is the purple five.

160
00:12:34,580 --> 00:12:37,580
So this is the primary color, which you can also find here.

161
00:12:37,590 --> 00:12:38,780
So this is this purple?

162
00:12:40,100 --> 00:12:41,690
So that's the background color.

163
00:12:41,690 --> 00:12:46,520
And then we need to have the content of the card, which is going to be a text field.

164
00:12:47,650 --> 00:12:49,180
Where we can enter something, right?

165
00:12:49,600 --> 00:12:58,330
So this text field will give us a value, which will be the very value and when the value is changed

166
00:12:58,330 --> 00:13:01,150
and so on, value change and we need to import text for this.

167
00:13:01,360 --> 00:13:02,890
So on value change.

168
00:13:03,160 --> 00:13:04,660
We want to run something.

169
00:13:04,870 --> 00:13:10,480
We want to change the value of the query with whatever it is that has been changed.

170
00:13:10,780 --> 00:13:16,690
So for example, when we enter a new letter, the query value itself will change, which is this mutable

171
00:13:16,690 --> 00:13:17,890
state that we're passing.

172
00:13:18,220 --> 00:13:23,740
And then we can add a couple more values to our text field.

173
00:13:23,740 --> 00:13:31,480
So the modifier, for example, so we can style our text field with, for example, fill max with.

174
00:13:31,660 --> 00:13:33,850
So we want to fill the entire with available.

175
00:13:34,180 --> 00:13:41,080
Then we're going to set the label of it to be the text, which will just say text search.

176
00:13:41,470 --> 00:13:46,210
So search with a white color, so color will just be white.

177
00:13:47,610 --> 00:13:49,200
Let's import White as a color.

178
00:13:49,320 --> 00:13:51,270
Let's import text here as well.

179
00:13:52,340 --> 00:13:53,210
Compose one.

180
00:13:54,740 --> 00:13:55,730
All right, and then.

181
00:13:58,480 --> 00:14:03,610
You see this text field has a bunch of different parameters that we can overwrite, so the value on

182
00:14:03,610 --> 00:14:07,450
value change modifier and able to read only textile and so forth.

183
00:14:07,840 --> 00:14:09,610
So I'm going to set some more.

184
00:14:09,970 --> 00:14:15,790
For example, the keyboard options and not actions, but options, keyboard options.

185
00:14:15,790 --> 00:14:20,470
This one, I'm going to set two keyboard options.

186
00:14:22,880 --> 00:14:25,580
Where I'm passing the keyboard type.

187
00:14:26,770 --> 00:14:29,740
To be taxed, so keyboard type.

188
00:14:31,430 --> 00:14:35,360
Third text, which just means that the keyboard that opens up.

189
00:14:36,310 --> 00:14:40,750
Is going to be the text version, so there are other keyboard types, for example.

190
00:14:41,200 --> 00:14:43,510
No or no password.

191
00:14:43,930 --> 00:14:47,530
So it really depends on what kind of setting you want.

192
00:14:47,540 --> 00:14:52,720
So for example, if you are entering number 10, this keyboard will just allow you to enter numbers.

193
00:14:53,170 --> 00:14:53,800
So it won't.

194
00:14:53,800 --> 00:14:57,490
You will not see the letters, but it will only see the numbers available.

195
00:14:57,850 --> 00:14:59,770
So that's why I don't want that.

196
00:14:59,770 --> 00:15:07,900
I want to actually display text, and then I'm going to set the I'm action to search.

197
00:15:09,520 --> 00:15:13,210
So let's import impaction and let's look at what this is.

198
00:15:14,660 --> 00:15:21,100
So imports, then you can hover over it to learn more and to see more action search represents that

199
00:15:21,290 --> 00:15:23,870
the user wants to execute a search.

200
00:15:24,170 --> 00:15:30,680
So for example, a web search query, which is what we want because that's why you see here at the bottom

201
00:15:30,860 --> 00:15:35,810
edge changes this icon to or not an enter button, but the search button?

202
00:15:36,560 --> 00:15:38,720
Okay, so that's what this text field does for us.

203
00:15:40,040 --> 00:15:46,190
And then we can also add the icon here at the front by adding a lead icon.

204
00:15:46,280 --> 00:15:52,790
So there's this leading icon thingy where we can say that we want to have an icon which is going to

205
00:15:52,790 --> 00:15:54,020
use an image vector.

206
00:15:56,660 --> 00:16:01,000
What would where we're going to set the image of actor, let's import it and so that it will help us

207
00:16:01,000 --> 00:16:01,360
with it.

208
00:16:01,720 --> 00:16:06,490
So the image of should be I can start field thought search.

209
00:16:06,910 --> 00:16:13,180
So it's just a search icon and the content description will be empty and the color of it is going to

210
00:16:13,180 --> 00:16:13,630
be white.

211
00:16:13,750 --> 00:16:16,450
So I'm just going to set the tint to be white as well.

212
00:16:16,900 --> 00:16:18,520
And here, let's import search.

213
00:16:19,300 --> 00:16:20,680
So let's import this icon.

214
00:16:21,070 --> 00:16:27,910
So what this will do is it will just set this icon to be white, which is distinct white and will basically

215
00:16:28,090 --> 00:16:33,460
at this icon to be searching search icon and then or just magnifying glass.

216
00:16:33,700 --> 00:16:39,580
And then we're using a leading icon because this is the because we want to have this icon on the left

217
00:16:39,580 --> 00:16:44,830
hand side, because on the right hand side, you can see we have another icon entered in the icon that

218
00:16:44,830 --> 00:16:49,870
you want to have at the end or at the right hand side is the trailing icon.

219
00:16:50,200 --> 00:16:52,720
So let's go ahead and create a trading icon as well.

220
00:16:53,050 --> 00:17:01,270
So we're going to say if the query value is not empty, so is not equal an empty string, then we want

221
00:17:01,270 --> 00:17:03,610
to have an icon button here.

222
00:17:04,720 --> 00:17:10,150
I can button where we can click on it and we're going to set the query.

223
00:17:10,569 --> 00:17:17,440
And here like this, the query value should be an empty string.

224
00:17:17,950 --> 00:17:26,980
Once you click on it and then the icon itself for this icon button should be icons, the default thought

225
00:17:27,460 --> 00:17:30,250
close, which is this cross that you just saw.

226
00:17:30,520 --> 00:17:37,420
Content description will just be an empty string, and the tint should also be white.

227
00:17:39,540 --> 00:17:48,300
OK, and then let's import close here, which will just be this trading icon here with just this cross.

228
00:17:51,310 --> 00:17:51,800
OK.

229
00:17:52,090 --> 00:17:58,840
So this was the trading icon, now let's take care of another setting, for example, the text style,

230
00:17:58,840 --> 00:18:06,280
so we can style the text of this query, and I'm going to set the textile to be what to have the color.

231
00:18:07,120 --> 00:18:13,690
And this is not the Java version, but the jetpack compose one this one, the color being white as well.

232
00:18:15,940 --> 00:18:22,180
And the font size to be 18, I speak and we need to import ESP for this.

233
00:18:23,960 --> 00:18:26,660
So let's do that real quick and poured.

234
00:18:27,700 --> 00:18:28,270
S.P..

235
00:18:30,820 --> 00:18:33,390
Then we can set the keyboard actions.

236
00:18:35,490 --> 00:18:39,420
So here, let's set the keyboard actions, what should happen?

237
00:18:39,990 --> 00:18:44,460
And here we need to pass some more details here to this keyboard action.

238
00:18:44,470 --> 00:18:51,480
So for example, on search once once the search button is pressed on the keyboard, we want to check

239
00:18:51,480 --> 00:18:53,940
if the query value is not equal empty.

240
00:18:54,330 --> 00:18:58,200
So if there is a query and then we want to.

241
00:18:59,240 --> 00:19:00,560
Get the search articles.

242
00:19:00,740 --> 00:19:04,070
So we got to search for the articles.

243
00:19:04,610 --> 00:19:06,710
What we're going to use that value.

244
00:19:08,960 --> 00:19:13,910
And we're going to clear the focus on that's where we're finally certainly you're using this.

245
00:19:15,300 --> 00:19:17,400
Manager, just local focus manager.

246
00:19:17,670 --> 00:19:24,390
Clear focus, because if you check at it or check it out, once you click on it, we're clearing the

247
00:19:24,390 --> 00:19:31,610
focus, which means the keyboard is closing and the focus is not on this text anymore.

248
00:19:31,660 --> 00:19:33,240
You see the focus by focus.

249
00:19:33,570 --> 00:19:40,290
You could see that this well, it's very hard to see, but there is this little bar or this little line

250
00:19:40,500 --> 00:19:44,340
that is constantly visible and invisible, visible and invisible.

251
00:19:44,970 --> 00:19:47,550
And once I click on this button, you see this bar disappears.

252
00:19:47,550 --> 00:19:51,960
So now the focus is not on this keyboard entry field anymore.

253
00:19:52,530 --> 00:19:55,230
So that's what we're using the local focus manager for.

254
00:19:56,580 --> 00:20:00,330
And finally, I'm going to set the colors to be text.

255
00:20:02,060 --> 00:20:03,650
Field defaults.

256
00:20:05,600 --> 00:20:06,140
Text.

257
00:20:07,310 --> 00:20:08,360
Field colors.

258
00:20:09,950 --> 00:20:16,220
Well, that's uh, too much she a text field colors, that's what I wanted to have field colors with

259
00:20:16,220 --> 00:20:19,310
the text color to be white as well.

260
00:20:20,600 --> 00:20:25,640
OK, so this was quite a long setup, but this is basically just the card where we're setting up this

261
00:20:25,640 --> 00:20:30,140
text field and this text field has all of these properties that we are setting.

262
00:20:30,650 --> 00:20:35,600
For example, we're setting as we saw the modifier obviously filling the max was saying, take the entire

263
00:20:35,600 --> 00:20:39,650
with and we're setting the label, the keyboard options and so forth.

264
00:20:40,610 --> 00:20:41,060
All right.

265
00:20:41,330 --> 00:20:47,060
So now we have set up our search bar and even if we run it, we don't see it in designer.

266
00:20:47,270 --> 00:20:52,010
Let's take care of that by actually going over to our top news.

267
00:20:52,340 --> 00:20:55,700
So currently we have our search bar dared.

268
00:20:55,700 --> 00:20:56,270
It's good.

269
00:20:56,270 --> 00:20:58,670
We have a query that's good as well.

270
00:20:59,120 --> 00:21:04,630
Now let's create a new results list that will display the results in our search bar.

271
00:21:04,640 --> 00:21:13,580
So we see the search bar here and that works so well we can enter something, but obviously nothing

272
00:21:13,580 --> 00:21:15,140
happens once we click on the button.

273
00:21:15,620 --> 00:21:16,850
So let's take care of that.

274
00:21:16,850 --> 00:21:19,980
So the search bar here needs to get results.

275
00:21:20,000 --> 00:21:29,660
So before we use this lazy column, we're going to get the results list result list, which will be

276
00:21:29,660 --> 00:21:36,380
a mutable list of top articles or top news articles.

277
00:21:40,490 --> 00:21:46,940
OK, and then we can check the well, we need a variable that will give us the search text, so let's

278
00:21:46,940 --> 00:21:54,050
create a search text variable searched text, which will be basically just a query value.

279
00:21:54,590 --> 00:22:00,920
So here we get the value of the search, text, whatever we searched and then we can check if the searched

280
00:22:01,460 --> 00:22:04,400
text that we entered is not equal, an empty string.

281
00:22:04,940 --> 00:22:12,200
So if we have actually entered something, then let's run some code, and let's add to this result list.

282
00:22:12,320 --> 00:22:14,180
So what do we want to add?

283
00:22:14,210 --> 00:22:23,480
Well, we want to add all news, manage that search news response, not value thought articles.

284
00:22:23,870 --> 00:22:29,330
And if it's empty, then we're just going to display articles.

285
00:22:30,470 --> 00:22:37,310
So these articles, that just means that if we don't have a search, news, response, articles, value

286
00:22:37,310 --> 00:22:42,890
or a list of articles, then we're just going to use the default articles and then else.

287
00:22:46,880 --> 00:22:55,040
So if the list is empty, so we didn't search for anything, then the result list will just be had all

288
00:22:55,040 --> 00:22:55,610
articles.

289
00:22:55,640 --> 00:22:57,020
So just the default articles.

290
00:22:58,010 --> 00:23:05,630
And now at this point, our lazy column will not display the articles itself, but it will display the

291
00:23:05,630 --> 00:23:06,380
results list.

292
00:23:06,800 --> 00:23:14,810
So what we just did here is we created a new list, which we filled with either the search results or

293
00:23:14,960 --> 00:23:18,320
the default results that we would get when we launched the application.

294
00:23:19,040 --> 00:23:23,480
And if we did search for something, then it will load the search results.

295
00:23:23,840 --> 00:23:27,710
And if we didn't load anything, then it will display the default articles.

296
00:23:28,040 --> 00:23:34,400
And in case that we search something that there was no result, it will still display the default articles.

297
00:23:34,940 --> 00:23:39,320
Now you could, of course, go as far and say, Well, if this is the case, then display.

298
00:23:39,330 --> 00:23:45,710
No results were found to something like this, but I think this should be fine as we have done it here.

299
00:23:48,750 --> 00:23:53,970
So now in our news app, we need to do one final thing, so to speak.

300
00:23:54,180 --> 00:24:02,190
So in our navigation here, where we are displaying the bottom navigation and the composable here,

301
00:24:02,880 --> 00:24:09,870
we need to make sure that the list that we're displaying so the articles is not just going to be articles,

302
00:24:09,870 --> 00:24:11,750
but we're checking first.

303
00:24:11,760 --> 00:24:18,420
If the news managers query value is not empty.

304
00:24:18,960 --> 00:24:28,530
So if it's not empty, then clear all articles and add the articles that you fault.

305
00:24:28,770 --> 00:24:35,790
So add all articles from the news manager, your news manager.

306
00:24:35,790 --> 00:24:41,040
Dods searched articles or search news, response value, thought articles.

307
00:24:41,880 --> 00:24:44,120
And here again, I'm checking if it's not empty.

308
00:24:44,130 --> 00:24:52,890
Otherwise display an empty list off and here articles OK and here with the articles.

309
00:24:54,480 --> 00:24:59,370
So at this point, our articles were just the articles that we get from our value here.

310
00:24:59,820 --> 00:25:05,820
But what I'm going to do instead now is I'm going to say the articles is going to be mutable list of

311
00:25:06,030 --> 00:25:10,410
top news articles, so of top news article objects.

312
00:25:12,550 --> 00:25:22,450
And then I'm going to override the articles list with either the query that I'm getting so with either

313
00:25:22,450 --> 00:25:32,530
the results of the search, so news responds value or articles or with a list of top new, top news

314
00:25:32,530 --> 00:25:33,040
articles.

315
00:25:33,250 --> 00:25:37,210
So or of a list of top news article.

316
00:25:39,150 --> 00:25:45,900
OK, so this is what I'm doing here, I check, and then I'm this being the top news article, so I'm

317
00:25:45,900 --> 00:25:48,000
not going to need this articles anymore.

318
00:25:48,600 --> 00:25:54,960
Instead, I'm going to get the search and then here I can now clear my articles and add new articles

319
00:25:55,290 --> 00:25:56,520
and then the else case.

320
00:25:56,850 --> 00:26:00,360
So let's say the quarry is empty, so we didn't search for anything.

321
00:26:00,540 --> 00:26:06,820
We're still going to clear all articles and we're going to fill the articles with all of our articles.

322
00:26:06,840 --> 00:26:13,860
So at all news manager, news, response, dot value, thought articles.

323
00:26:14,340 --> 00:26:16,770
And if those are empty, it's just going to be an empty list.

324
00:26:17,430 --> 00:26:18,360
So list of.

325
00:26:20,830 --> 00:26:21,310
Like so.

326
00:26:23,120 --> 00:26:26,810
OK, let me put that into a new line as well, like this.

327
00:26:27,950 --> 00:26:30,380
So it's a little more readable, I guess, now.

328
00:26:31,640 --> 00:26:36,800
OK, so that's quite a bit that we have to set up here, but let's have a look at it.

329
00:26:39,240 --> 00:26:40,710
So let's search for something.

330
00:26:41,100 --> 00:26:41,880
Let's run the app.

331
00:26:49,140 --> 00:26:55,710
OK, and then I just ran the application and it crashed multiple times, so let me show you how I fixed

332
00:26:55,710 --> 00:26:59,460
it and it fixed and while I got this problem.

333
00:26:59,490 --> 00:27:04,260
Let me show you real quickly where I am force unwrapping the published death.

334
00:27:04,530 --> 00:27:06,360
But what if we don't have it published it?

335
00:27:06,610 --> 00:27:08,910
Well, an unforeseen wrapping, something that doesn't exist.

336
00:27:08,910 --> 00:27:10,140
And then we run into an error.

337
00:27:10,140 --> 00:27:15,660
So what we can do is we can add a dot question.

338
00:27:15,720 --> 00:27:22,920
What question mark don't let in here with curly brackets and then just run this code in that case that

339
00:27:22,920 --> 00:27:29,670
we don't get an empty published at variable that we don't need to force on repetition anymore.

340
00:27:29,670 --> 00:27:32,310
We don't need those double exclamation marks anymore.

341
00:27:32,670 --> 00:27:35,280
And the same goes for this text right here.

342
00:27:35,700 --> 00:27:42,360
OK, so I need to also check for Article Dot title not being empty.

343
00:27:42,840 --> 00:27:49,260
So only if title is not, and then I'm going to display the title and then I don't need those for on

344
00:27:49,260 --> 00:27:51,750
wrappings anymore, those double exclamation marks.

345
00:27:52,740 --> 00:27:58,740
And now if I run it and search for CNN, for example, well, then it doesn't display the CNN news.

346
00:27:58,740 --> 00:28:03,930
But in the Lochhead, if I search for search, which is the keyword that we had in our news manager

347
00:28:03,930 --> 00:28:09,210
here for this search, then I will find entries for CNN.

348
00:28:09,210 --> 00:28:11,280
So here you see name CNN.

349
00:28:11,780 --> 00:28:12,610
CNN.

350
00:28:12,690 --> 00:28:14,280
CNN So we do get those.

351
00:28:14,280 --> 00:28:19,890
But let me check why we don't see them on our wall in the why yet?

352
00:28:23,360 --> 00:28:30,350
And I found it, and it has to be that we are still displaying the articles instead of the result lists

353
00:28:30,350 --> 00:28:36,970
here in our top news, so let's run it again and then we should be able to search for.

354
00:28:36,980 --> 00:28:39,320
So let's search for science news specifically.

355
00:28:40,220 --> 00:28:40,960
And there we are.

356
00:28:40,970 --> 00:28:45,170
So we have a bunch of science news now that search for football.

357
00:28:46,740 --> 00:28:48,830
And then we should get the football news.

358
00:28:48,870 --> 00:28:49,770
There we are.

359
00:28:50,930 --> 00:28:58,460
Now, let's search for poker, because I read that a German player won the Poker World Championship,

360
00:28:58,470 --> 00:29:02,630
so here Corey Ozdemir Dogecoin Poker VM, that sounds freakin awesome.

361
00:29:03,140 --> 00:29:05,450
So yeah, it works pretty much so.

362
00:29:05,450 --> 00:29:06,620
Our search feature works.

363
00:29:06,620 --> 00:29:08,210
Our quiz app in general works.

364
00:29:08,210 --> 00:29:14,720
So now you have a fully working quiz application with many different approaches and features to it.

365
00:29:15,380 --> 00:29:16,460
I hope you enjoyed this.

366
00:29:16,790 --> 00:29:21,050
And see you in the next one where we're going to set up the MVP and part of it.

367
00:29:21,050 --> 00:29:21,950
So the next chapter?