Welcome back.
And this week we're going to take care of the sources screen and you can see that we get a bunch of
sources here, so this is going to be a lazy column once again.
But then we can select it the source that we want to get the details from.
So let's say we're interested, then only TechCrunch details.
Then we see the articles that are based on the TechCrunch page and can read the full article by clicking
on the link.
And you see, it just opens up the TechCrunch website, but it just gives us an overview here of what
the article is about, so that might be interesting for you.
And then we have some Japanese here as go as well.
Two days ago, Ed Sheeran, Ed Sheeran, yeah, whatever.
So let's get back to actually coding this thing.
So therefore, we are going to spend a lot of time in our sources screen.
So before hand, we had this text in here.
So let me get rid of this text because as you saw, it's not just text that we want to display.
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
have to implement.
So let's first of all, pass in the news manager to our sources, because the news manager allows us
to call methods such as get getting articles and so forth.
So inside of this news manager, I'm also going to need another variable which will take care of the
sources.
So I'm going to call this one source name, and it will be a mutable state of.
This one.
ABC News.
OK, so this will be the default state, but then it will be a mutable state of that.
So now in sources, we can go back and actually set up our well, what do we need if we want to have
a top paper and some content inside of it?
Well, we need to have a scaffold.
All right.
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
hand while that's how I got there earlier.
So here, top up bar.
OK, so it's this other composable top hat bar, which has a couple of setups or settings that we can
pass.
So for example, I'm going to set the title for my top hat bar to be a text.
So here?
Ha.
That's OK.
So when you were ever you create this with the curly brackets, this just jumps out of it.
So maybe it's better if I just put it inside of it straight away here.
So the text will be something like news manager thought source name.
And that's not their capital news manager.
Put the lower caps the source name, they'll tell you.
So I want to get the value from it, like so and this will be the source.
So I'm going to call it like this.
And then after this one here, so after this closing bracket, I'm going to add a comma in here.
So now I can set actions, for example.
OK, so the actions that I want to set.
Are going to be these actions here.
OK, so to have this menu, so to speak.
All right.
And here we will then design it.
But now let's first of all, see what the problem is.
So there is this composable top hat bar.
But it doesn't find it.
And the actions that they want to have is going to be, first of all.
Well, I will need a Remember variable.
I'm going to call this one very new expounded by remember you remember which will be a what we need
to import remember which will be a mutable state of.
False.
So I'm going to set that false by default, so this will remember to control the show and dismiss of
the dropdown.
So whether it needs to be showing or dismissing, so that's what this menu expanded.
Remember, state will do for me.
All right, then I will need to set up an iconic button and this I can button when we need to import,
I can button here as well, and this icon button will need an on click event where I'm just going to
override the menu, expand its value.
So I'm going to set.
That's true.
If we click on it, then it's going to be true and then we'll need to design it as well.
So this icon button will just be an icon.
So let me import.
I can hear like so and it will use icons, dots, default more.
Vert.
And the content description I'm gonna set, you know, so.
More overt, we need to import more word for this as well.
And yeah, let's actually get rid of this error here because, well, it just created this opening and
closing brackets, as it seems, and the top up bar doesn't have closing or opening brackets.
OK, so here we are using and remember mutable state of let me see what's up here.
And then let me import remember here.
And Mutable stayed off as well.
So.
And then you we need to import it, import, get menu and actually import it once again.
And then we should be good.
All right.
So we have composer, one time star and composer material star.
So now this should be fine.
And now what I'm going to require, by the way, in this top bar is going to be a list, right?
So now have the icon button, but it's just these three dots, right?
But then this icon button should have this list.
So I need to create a list up here.
So I'm just going to create this list of items which will just be a relationship.
So TechCrunch will be assigned to TechCrunch.
So it's like a map here that we're using, right?
So list of a map where we have TechCrunch assigned to this keyword.
TechCrunch So this is the internal keyword that we're going to get from, uh, from the internet when
we load it from our news API and so forth.
OK, but I don't want to display their names like business minus insider or talk sports with a lower
T.
I want to use proper words, so to speak or proper titles.
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
theme and here I'm going to pass a shape, which will be the material.
Theme thought shapes, thought copy.
So I'm going to use the rounded
corner shape with 16 Vancity pixels, so we need to import dpi here or 16 dpi.
And now let's put this into a separate line.
I think it will make it a little more readable, maybe at this point.
OK, then the material theme is going to get a drop down menu.
Which has an expanded option, and I'm going to set it to arm and you expand it.
So if you hover over it, we see that they spin it as a bullion and our menu expanded is also bullion
because we said it defaults, right?
And then what should happen once we dismissed the request?
Well, that's where we're going to implement.
What should happen.
OK, so once we click on it, we want to set menu expanded to false.
OK, like so.
So let me just check if I have the right amount of brackets.
I think I didn't.
I needed to close it here and then.
This dropdown menu has a content, and this is what the content will be.
So here I'm going to go through items, which is this list that I just created.
So this list here items, list of TechCrunch and so forth.
And I'm going to go for it through each of them.
And for each, I'm going to do something.
So I'm going to create a drop down menu item that is clickable.
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
set the source name to be.
What was named value to be that he thought second.
So this will basically just.
Take whatever we're selecting here, for example, TechCrunch and said it has this sauce named value,
which by default will be ABC News, but then we overwriting it with whatever we are passing to it.
So that's what we're doing here.
And then we are saying that the menu expanded should be false again.
So once we did select an item you see to select TechCrunch, you see the expanded value is set to false
and because it is a.
Remember?
Then when you expand it and remember state, it will just close the UI for us.
All right, and then this drop down on menu item, which we need to actually wait a second.
So that's the thing, like when I'm using, I'm creating something in here and I click on to, I want
to add content to it, just closes it.
So yeah, that's how it's going to be here.
I'm going to create the text taking the first entry.
Okay, so so it's going to take to it.
Which we get from our items here, which is despair.
So the first is going to be.
For example, Reuters with a capital R, and the second will be the voters with a lower caps are.
Same goes for.
So basically the second value in this pair versus the left one second is the right one.
First is TechCrunch.
Second, this TechCrunch.
OK, so you see, that's what this first and second means.
The second one is the one that we're passing to our API, and the first one is the one that we're displaying.
So here's if we were just being TechCrunch like, so all right.
OK.
And then we should have a bunch of closing brackets, I need to get rid of this one, but I need to
close it somewhere else, so let me see how many is going to be.
So one to let me connect those to three.
We don't need content for our material theme.
Yeah, that was it.
So.
The material thing doesn't need any content, we'll just say that we want it to.
He used the icon button and then used a material theme for the selection here you see, this will also
have these beautiful rounded corners, which we have set up here.
So we're setting the medium to be rounded corner shape, which creates this beautiful round the corner
pop up, so to speak.
All right, now, let's go over to our news service because here we need to get everything.
So we're going to get everything this time, not the top headlines, but every thing.
And I'm going to call this function, get articles by source.
Says like so and it will be query or it will be a query of sources.
And it will be a source of type string that we can pass to it and it will return a call.
Where we're going to get the top news response.
So the same that we have had in the other options as well, only that we're changing the name.
Okay.
And now we're getting everything, not just the top headlines for getting everything, and we're searching
specifically for sources.
I know in our news manager we will need to create a article by source thing.
So the same thing that we had.
Article by category will be required for the article by source.
So let me put it in here, actually.
Article by.
And they replaced us with the sauce and the meat.
Copy that they sit in here and here.
This should be pretty much it.
It's still the top response.
We our top news response, but we're just changing what it is that we want to get.
And we need to get articles by resource.
So let me copy this articles by category and paste it in here and replace this with by source and here
instead of getting it.
By category, we're not going to pass anything here.
We still get the source.
But all we still need to pass the category, but this will be a source name, the value.
So we have this global variable, so to speak, that we are overwriting from other.
Classes and stuff.
And then once we do get a response, we want to set the cat article by source value, OK with the response,
buddy.
And the same will go for our log entry here and on failure we can still log it.
OK, so we will still need to set up quite some things in order to be able to see anything.
All right.
And if we want to run it, we will see that now source this is not going to work anymore.
We need to change whatever our news app is getting.
So let's pat.
So let's also pass the news manager here.
Which will be our news manager like so.
So this will.
Maybe, Ron, let's see if it's still going to run.
Yep, it runs.
We get to our sources with see with ABC News source and we have our options.
And once we select them, you see the title is changing.
But we're not done yet.
So we're not loading the data in here or we're not displaying the data in here, so and so forth.
So that's what we're going to do in the next video because it would be too much for one video, I think.
All right.
So see you there.