1
00:00:00,750 --> 00:00:01,380
Welcome back.

2
00:00:01,680 --> 00:00:06,810
And this week we're going to take care of the sources screen and you can see that we get a bunch of

3
00:00:06,810 --> 00:00:09,780
sources here, so this is going to be a lazy column once again.

4
00:00:10,110 --> 00:00:13,890
But then we can select it the source that we want to get the details from.

5
00:00:13,890 --> 00:00:16,440
So let's say we're interested, then only TechCrunch details.

6
00:00:16,440 --> 00:00:23,340
Then we see the articles that are based on the TechCrunch page and can read the full article by clicking

7
00:00:23,340 --> 00:00:23,910
on the link.

8
00:00:23,910 --> 00:00:30,150
And you see, it just opens up the TechCrunch website, but it just gives us an overview here of what

9
00:00:30,150 --> 00:00:33,110
the article is about, so that might be interesting for you.

10
00:00:33,120 --> 00:00:36,500
And then we have some Japanese here as go as well.

11
00:00:36,510 --> 00:00:41,310
Two days ago, Ed Sheeran, Ed Sheeran, yeah, whatever.

12
00:00:41,610 --> 00:00:44,880
So let's get back to actually coding this thing.

13
00:00:45,360 --> 00:00:49,200
So therefore, we are going to spend a lot of time in our sources screen.

14
00:00:49,200 --> 00:00:51,510
So before hand, we had this text in here.

15
00:00:51,510 --> 00:00:55,680
So let me get rid of this text because as you saw, it's not just text that we want to display.

16
00:00:56,010 --> 00:01:02,400
It's a lot more and we have a top up bar here at the top, so you can see this is something we will

17
00:01:02,400 --> 00:01:03,690
have to implement.

18
00:01:04,790 --> 00:01:11,090
So let's first of all, pass in the news manager to our sources, because the news manager allows us

19
00:01:11,510 --> 00:01:15,620
to call methods such as get getting articles and so forth.

20
00:01:16,220 --> 00:01:23,120
So inside of this news manager, I'm also going to need another variable which will take care of the

21
00:01:23,120 --> 00:01:23,870
sources.

22
00:01:23,990 --> 00:01:29,960
So I'm going to call this one source name, and it will be a mutable state of.

23
00:01:31,060 --> 00:01:31,510
This one.

24
00:01:32,620 --> 00:01:34,090
ABC News.

25
00:01:34,540 --> 00:01:38,800
OK, so this will be the default state, but then it will be a mutable state of that.

26
00:01:39,550 --> 00:01:47,230
So now in sources, we can go back and actually set up our well, what do we need if we want to have

27
00:01:47,230 --> 00:01:49,690
a top paper and some content inside of it?

28
00:01:49,840 --> 00:01:52,270
Well, we need to have a scaffold.

29
00:01:52,840 --> 00:01:53,170
All right.

30
00:01:53,170 --> 00:02:00,130
So let's go and create a scaffold here with a top hat bar or top bar where I'm just going to pass my

31
00:02:00,490 --> 00:02:03,400
hand while that's how I got there earlier.

32
00:02:03,820 --> 00:02:05,800
So here, top up bar.

33
00:02:06,220 --> 00:02:13,510
OK, so it's this other composable top hat bar, which has a couple of setups or settings that we can

34
00:02:13,510 --> 00:02:13,930
pass.

35
00:02:14,350 --> 00:02:19,270
So for example, I'm going to set the title for my top hat bar to be a text.

36
00:02:19,540 --> 00:02:20,140
So here?

37
00:02:20,410 --> 00:02:20,810
Ha.

38
00:02:20,860 --> 00:02:21,840
That's OK.

39
00:02:21,850 --> 00:02:25,420
So when you were ever you create this with the curly brackets, this just jumps out of it.

40
00:02:25,750 --> 00:02:29,770
So maybe it's better if I just put it inside of it straight away here.

41
00:02:30,100 --> 00:02:39,140
So the text will be something like news manager thought source name.

42
00:02:40,630 --> 00:02:43,330
And that's not their capital news manager.

43
00:02:43,330 --> 00:02:46,690
Put the lower caps the source name, they'll tell you.

44
00:02:46,840 --> 00:02:54,420
So I want to get the value from it, like so and this will be the source.

45
00:02:54,430 --> 00:02:56,440
So I'm going to call it like this.

46
00:02:57,820 --> 00:03:04,420
And then after this one here, so after this closing bracket, I'm going to add a comma in here.

47
00:03:06,040 --> 00:03:09,670
So now I can set actions, for example.

48
00:03:10,300 --> 00:03:13,390
OK, so the actions that I want to set.

49
00:03:14,640 --> 00:03:16,470
Are going to be these actions here.

50
00:03:17,160 --> 00:03:20,520
OK, so to have this menu, so to speak.

51
00:03:21,720 --> 00:03:22,070
All right.

52
00:03:22,080 --> 00:03:23,640
And here we will then design it.

53
00:03:23,820 --> 00:03:26,310
But now let's first of all, see what the problem is.

54
00:03:27,510 --> 00:03:30,510
So there is this composable top hat bar.

55
00:03:31,670 --> 00:03:32,690
But it doesn't find it.

56
00:03:35,990 --> 00:03:40,340
And the actions that they want to have is going to be, first of all.

57
00:03:40,730 --> 00:03:43,580
Well, I will need a Remember variable.

58
00:03:43,670 --> 00:03:53,180
I'm going to call this one very new expounded by remember you remember which will be a what we need

59
00:03:53,180 --> 00:03:56,930
to import remember which will be a mutable state of.

60
00:03:58,970 --> 00:03:59,570
False.

61
00:03:59,960 --> 00:04:06,440
So I'm going to set that false by default, so this will remember to control the show and dismiss of

62
00:04:06,440 --> 00:04:07,040
the dropdown.

63
00:04:07,040 --> 00:04:11,690
So whether it needs to be showing or dismissing, so that's what this menu expanded.

64
00:04:11,960 --> 00:04:14,090
Remember, state will do for me.

65
00:04:14,930 --> 00:04:22,990
All right, then I will need to set up an iconic button and this I can button when we need to import,

66
00:04:23,000 --> 00:04:30,380
I can button here as well, and this icon button will need an on click event where I'm just going to

67
00:04:30,380 --> 00:04:32,960
override the menu, expand its value.

68
00:04:33,200 --> 00:04:34,280
So I'm going to set.

69
00:04:34,280 --> 00:04:34,910
That's true.

70
00:04:35,480 --> 00:04:40,710
If we click on it, then it's going to be true and then we'll need to design it as well.

71
00:04:40,730 --> 00:04:43,130
So this icon button will just be an icon.

72
00:04:43,130 --> 00:04:44,450
So let me import.

73
00:04:44,930 --> 00:04:52,610
I can hear like so and it will use icons, dots, default more.

74
00:04:54,220 --> 00:04:54,670
Vert.

75
00:04:55,910 --> 00:04:58,940
And the content description I'm gonna set, you know, so.

76
00:04:59,840 --> 00:05:02,540
More overt, we need to import more word for this as well.

77
00:05:07,790 --> 00:05:13,490
And yeah, let's actually get rid of this error here because, well, it just created this opening and

78
00:05:13,760 --> 00:05:18,590
closing brackets, as it seems, and the top up bar doesn't have closing or opening brackets.

79
00:05:19,130 --> 00:05:24,770
OK, so here we are using and remember mutable state of let me see what's up here.

80
00:05:30,910 --> 00:05:33,910
And then let me import remember here.

81
00:05:35,950 --> 00:05:38,740
And Mutable stayed off as well.

82
00:05:44,570 --> 00:05:44,900
So.

83
00:05:49,730 --> 00:05:55,100
And then you we need to import it, import, get menu and actually import it once again.

84
00:05:55,400 --> 00:05:57,200
And then we should be good.

85
00:05:57,350 --> 00:05:57,770
All right.

86
00:05:57,770 --> 00:06:02,000
So we have composer, one time star and composer material star.

87
00:06:02,000 --> 00:06:03,860
So now this should be fine.

88
00:06:04,730 --> 00:06:10,220
And now what I'm going to require, by the way, in this top bar is going to be a list, right?

89
00:06:10,220 --> 00:06:13,850
So now have the icon button, but it's just these three dots, right?

90
00:06:13,850 --> 00:06:15,920
But then this icon button should have this list.

91
00:06:16,250 --> 00:06:18,710
So I need to create a list up here.

92
00:06:19,070 --> 00:06:25,370
So I'm just going to create this list of items which will just be a relationship.

93
00:06:25,370 --> 00:06:27,890
So TechCrunch will be assigned to TechCrunch.

94
00:06:27,890 --> 00:06:30,320
So it's like a map here that we're using, right?

95
00:06:30,320 --> 00:06:34,040
So list of a map where we have TechCrunch assigned to this keyword.

96
00:06:34,040 --> 00:06:40,070
TechCrunch So this is the internal keyword that we're going to get from, uh, from the internet when

97
00:06:40,070 --> 00:06:43,160
we load it from our news API and so forth.

98
00:06:43,200 --> 00:06:48,800
OK, but I don't want to display their names like business minus insider or talk sports with a lower

99
00:06:48,800 --> 00:06:49,250
T.

100
00:06:49,780 --> 00:06:54,860
I want to use proper words, so to speak or proper titles.

101
00:06:57,030 --> 00:07:04,860
OK, so we're going to use these items in a bit, but then in our top bar, I'm going to use my material

102
00:07:04,860 --> 00:07:11,610
theme and here I'm going to pass a shape, which will be the material.

103
00:07:13,340 --> 00:07:18,320
Theme thought shapes, thought copy.

104
00:07:19,960 --> 00:07:23,320
So I'm going to use the rounded

105
00:07:25,780 --> 00:07:34,420
corner shape with 16 Vancity pixels, so we need to import dpi here or 16 dpi.

106
00:07:35,170 --> 00:07:37,780
And now let's put this into a separate line.

107
00:07:37,780 --> 00:07:42,400
I think it will make it a little more readable, maybe at this point.

108
00:07:43,300 --> 00:07:48,550
OK, then the material theme is going to get a drop down menu.

109
00:07:50,840 --> 00:07:55,610
Which has an expanded option, and I'm going to set it to arm and you expand it.

110
00:07:56,450 --> 00:08:01,700
So if you hover over it, we see that they spin it as a bullion and our menu expanded is also bullion

111
00:08:01,710 --> 00:08:03,170
because we said it defaults, right?

112
00:08:03,830 --> 00:08:06,980
And then what should happen once we dismissed the request?

113
00:08:07,700 --> 00:08:10,700
Well, that's where we're going to implement.

114
00:08:10,700 --> 00:08:11,420
What should happen.

115
00:08:12,260 --> 00:08:18,440
OK, so once we click on it, we want to set menu expanded to false.

116
00:08:19,990 --> 00:08:20,830
OK, like so.

117
00:08:26,930 --> 00:08:30,440
So let me just check if I have the right amount of brackets.

118
00:08:30,490 --> 00:08:31,510
I think I didn't.

119
00:08:31,520 --> 00:08:34,730
I needed to close it here and then.

120
00:08:36,340 --> 00:08:41,990
This dropdown menu has a content, and this is what the content will be.

121
00:08:42,039 --> 00:08:46,690
So here I'm going to go through items, which is this list that I just created.

122
00:08:46,990 --> 00:08:50,830
So this list here items, list of TechCrunch and so forth.

123
00:08:51,340 --> 00:08:53,680
And I'm going to go for it through each of them.

124
00:08:54,970 --> 00:08:56,590
And for each, I'm going to do something.

125
00:08:57,040 --> 00:09:01,330
So I'm going to create a drop down menu item that is clickable.

126
00:09:01,960 --> 00:09:08,110
So each time that I want to click on it or that I click on it, I'm going to get the news manager to

127
00:09:08,200 --> 00:09:11,260
set the source name to be.

128
00:09:12,910 --> 00:09:16,150
What was named value to be that he thought second.

129
00:09:17,600 --> 00:09:19,310
So this will basically just.

130
00:09:20,460 --> 00:09:25,710
Take whatever we're selecting here, for example, TechCrunch and said it has this sauce named value,

131
00:09:26,070 --> 00:09:31,020
which by default will be ABC News, but then we overwriting it with whatever we are passing to it.

132
00:09:31,470 --> 00:09:32,700
So that's what we're doing here.

133
00:09:33,670 --> 00:09:39,490
And then we are saying that the menu expanded should be false again.

134
00:09:39,820 --> 00:09:46,630
So once we did select an item you see to select TechCrunch, you see the expanded value is set to false

135
00:09:46,960 --> 00:09:47,750
and because it is a.

136
00:09:48,130 --> 00:09:48,820
Remember?

137
00:09:49,950 --> 00:09:56,440
Then when you expand it and remember state, it will just close the UI for us.

138
00:09:58,120 --> 00:10:05,890
All right, and then this drop down on menu item, which we need to actually wait a second.

139
00:10:07,890 --> 00:10:15,030
So that's the thing, like when I'm using, I'm creating something in here and I click on to, I want

140
00:10:15,030 --> 00:10:17,250
to add content to it, just closes it.

141
00:10:17,670 --> 00:10:19,710
So yeah, that's how it's going to be here.

142
00:10:19,720 --> 00:10:23,550
I'm going to create the text taking the first entry.

143
00:10:23,700 --> 00:10:25,740
Okay, so so it's going to take to it.

144
00:10:26,970 --> 00:10:30,900
Which we get from our items here, which is despair.

145
00:10:31,260 --> 00:10:34,140
So the first is going to be.

146
00:10:35,240 --> 00:10:42,310
For example, Reuters with a capital R, and the second will be the voters with a lower caps are.

147
00:10:42,800 --> 00:10:43,910
Same goes for.

148
00:10:43,940 --> 00:10:49,470
So basically the second value in this pair versus the left one second is the right one.

149
00:10:49,490 --> 00:10:50,600
First is TechCrunch.

150
00:10:50,600 --> 00:10:51,620
Second, this TechCrunch.

151
00:10:51,920 --> 00:10:54,950
OK, so you see, that's what this first and second means.

152
00:10:55,550 --> 00:11:00,050
The second one is the one that we're passing to our API, and the first one is the one that we're displaying.

153
00:11:00,320 --> 00:11:03,740
So here's if we were just being TechCrunch like, so all right.

154
00:11:05,890 --> 00:11:06,440
OK.

155
00:11:06,460 --> 00:11:11,140
And then we should have a bunch of closing brackets, I need to get rid of this one, but I need to

156
00:11:11,140 --> 00:11:14,330
close it somewhere else, so let me see how many is going to be.

157
00:11:14,350 --> 00:11:19,420
So one to let me connect those to three.

158
00:11:21,050 --> 00:11:24,680
We don't need content for our material theme.

159
00:11:25,130 --> 00:11:26,000
Yeah, that was it.

160
00:11:26,420 --> 00:11:26,840
So.

161
00:11:27,940 --> 00:11:32,410
The material thing doesn't need any content, we'll just say that we want it to.

162
00:11:33,670 --> 00:11:40,570
He used the icon button and then used a material theme for the selection here you see, this will also

163
00:11:40,570 --> 00:11:43,360
have these beautiful rounded corners, which we have set up here.

164
00:11:43,450 --> 00:11:49,210
So we're setting the medium to be rounded corner shape, which creates this beautiful round the corner

165
00:11:49,210 --> 00:11:50,200
pop up, so to speak.

166
00:11:52,750 --> 00:11:59,590
All right, now, let's go over to our news service because here we need to get everything.

167
00:12:00,220 --> 00:12:06,170
So we're going to get everything this time, not the top headlines, but every thing.

168
00:12:06,820 --> 00:12:12,640
And I'm going to call this function, get articles by source.

169
00:12:13,910 --> 00:12:21,590
Says like so and it will be query or it will be a query of sources.

170
00:12:23,070 --> 00:12:29,760
And it will be a source of type string that we can pass to it and it will return a call.

171
00:12:31,220 --> 00:12:33,890
Where we're going to get the top news response.

172
00:12:34,460 --> 00:12:40,010
So the same that we have had in the other options as well, only that we're changing the name.

173
00:12:40,440 --> 00:12:40,790
Okay.

174
00:12:40,820 --> 00:12:47,240
And now we're getting everything, not just the top headlines for getting everything, and we're searching

175
00:12:47,240 --> 00:12:48,530
specifically for sources.

176
00:12:48,860 --> 00:12:55,130
I know in our news manager we will need to create a article by source thing.

177
00:12:55,140 --> 00:12:56,570
So the same thing that we had.

178
00:12:56,870 --> 00:13:00,220
Article by category will be required for the article by source.

179
00:13:00,230 --> 00:13:02,210
So let me put it in here, actually.

180
00:13:02,630 --> 00:13:04,070
Article by.

181
00:13:05,630 --> 00:13:08,720
And they replaced us with the sauce and the meat.

182
00:13:08,930 --> 00:13:12,650
Copy that they sit in here and here.

183
00:13:13,670 --> 00:13:15,250
This should be pretty much it.

184
00:13:15,260 --> 00:13:16,580
It's still the top response.

185
00:13:16,930 --> 00:13:22,550
We our top news response, but we're just changing what it is that we want to get.

186
00:13:25,250 --> 00:13:27,830
And we need to get articles by resource.

187
00:13:27,950 --> 00:13:37,910
So let me copy this articles by category and paste it in here and replace this with by source and here

188
00:13:37,910 --> 00:13:39,140
instead of getting it.

189
00:13:40,220 --> 00:13:43,130
By category, we're not going to pass anything here.

190
00:13:44,600 --> 00:13:46,130
We still get the source.

191
00:13:47,720 --> 00:13:53,660
But all we still need to pass the category, but this will be a source name, the value.

192
00:13:54,230 --> 00:13:58,430
So we have this global variable, so to speak, that we are overwriting from other.

193
00:13:59,610 --> 00:14:00,540
Classes and stuff.

194
00:14:01,140 --> 00:14:11,460
And then once we do get a response, we want to set the cat article by source value, OK with the response,

195
00:14:11,460 --> 00:14:11,940
buddy.

196
00:14:12,540 --> 00:14:18,240
And the same will go for our log entry here and on failure we can still log it.

197
00:14:21,220 --> 00:14:28,090
OK, so we will still need to set up quite some things in order to be able to see anything.

198
00:14:28,810 --> 00:14:29,160
All right.

199
00:14:29,170 --> 00:14:33,120
And if we want to run it, we will see that now source this is not going to work anymore.

200
00:14:33,130 --> 00:14:37,240
We need to change whatever our news app is getting.

201
00:14:37,300 --> 00:14:38,590
So let's pat.

202
00:14:39,190 --> 00:14:41,830
So let's also pass the news manager here.

203
00:14:44,280 --> 00:14:46,860
Which will be our news manager like so.

204
00:14:48,390 --> 00:14:50,340
So this will.

205
00:14:51,490 --> 00:14:54,370
Maybe, Ron, let's see if it's still going to run.

206
00:14:54,910 --> 00:14:56,120
Yep, it runs.

207
00:14:56,140 --> 00:15:01,180
We get to our sources with see with ABC News source and we have our options.

208
00:15:01,300 --> 00:15:04,120
And once we select them, you see the title is changing.

209
00:15:05,230 --> 00:15:06,820
But we're not done yet.

210
00:15:06,940 --> 00:15:11,470
So we're not loading the data in here or we're not displaying the data in here, so and so forth.

211
00:15:11,710 --> 00:15:16,540
So that's what we're going to do in the next video because it would be too much for one video, I think.

212
00:15:16,720 --> 00:15:17,070
All right.

213
00:15:17,080 --> 00:15:17,770
So see you there.