Nicely done.
And once we can fetch the stories and of course, we change the estate values using our Dirceu now it's
the easy part.
We just need to navigate the stories, get them from global context, because remember, in the context
we pass in the whole state.
So I don't need to worry about it.
I know that I have access in the stories and not only I'm getting news loading, but I also want to
get my hits because of course that is my property over there.
And I'll start with is loading.
And then if I'm not loading and of course I would want to return something else and that something else
will be my section.
I'll add a class name of stories over here and inside of the section.
We're just going to iterate over hits.
Can we use the map method so that stays the same.
And as far as the name for every article, I'm just going to go with the story and I'll try to work
on so I just can see what we're getting back and what we're going to be structuring.
So in here, I'm going to go so log on the story since I would want to show you the properties first
and then we're going to go with return.
And I would want to return the article.
I'll add a class name here and the class name will be Story.
And for the time being, let's just say single and story.
Let's say it.
And there it is now we have all our stories, but for the time being, with just display, there's simple
text.
What is more important is what we're getting in the console.
So in a console, I can see that this is the structure for every story.
So we've got author, we have the number of comments and some other properties.
So of course, one by one we can restructure them and then add them to our UI.
So I have my story.
And then the problem is that I'm looking for our object ID cards and an object ID that is the name of
the property, because of course we know that we need to keep the values here unique because we have
a list or we need the unique value and we can see that unique value is in the object ID property.
And then I'll set it equal to my story.
Of course, since I'm doing the.
And then I would want to look for the title of the story.
I want to get a number of comments.
I also would want to get the URL.
So of course the user can navigate that story and points as well as the author.
So again, if you want different properties, just grab them from the story.
And then as far as my return, well, let's say so.
We have the article not to start, but we know that it is a list.
So let's a property as well.
And that one, of course, will be equal to the object, adding that instead of the article I'm going
to go with heading for an out of class name and class name will be title.
And then of course we pass in my title value.
Correct.
So I pass it.
And there is now of course I have all the titles for the current.
It's then I would want to set up my info where essentially I'm going to have the paragraph with author
and number of comments.
So here's what I want on display in this line over here.
So this is going to be the amount of points and then the author, as well as how many comments this
particular story has.
Let's not forget back.
We're going to go here with a paragraph and I would want to add a class name of info and instead of
this paragraph, which is display the amount of points of this particular article has, and then let's
add text points, points.
And then by and also I want to go with one span where I would want to display the author.
So I'm just going to access right away the author.
So and then we'll have a vertical bar.
And lastly, outside of the span, let's just go with a number of comments, number of comments and
also comments as a text.
So say that this is something we should see on the screen.
We have the title, we have the points.
We have the author, as well as how many comments this particular article has.
And then lastly, I would want to add two things.
One is going to be the link that allows the user to navigate that specific story.
And then the second one is the remove button that allows us to remove that story.
Of course, when I say remove story, I'm talking about the UI, so we'll just remove it from the UI
and here instead of the dev.
I'm going to go with my link and say your URL and then we're going to go Target and then blank since
I would want to open a new page.
But before we do that, you know, let's just set up our link and then the button and then we'll do
that one last.
Now, I do want to add here, though, for the styling and I'll say read and then hyphen link.
And then as far as the value of, say, read and learn more.
And then right next to my link, I'm going to go with my button.
And then as far as the class name, I'll say remove the hyphen B10 and eventually there's going to be
unclick.
So I would want to read that story.
But for the time being I'll just say remove.
I'll save it.
I should have both of these things now at the moment, nothing is happening when I click either of them.
I mean, this one technically navigates to the article where I want it, but I would want to set up
this functionality in a separate tab.
So every time I click, I would want to open up new tab so the user stays on my app.
And then if he or she wants to read the article, of course they would just need to look in the other
time.
And also there is a button which doesn't do anything, of course, or we will add that functionality.
So first, I would want to deal with this one, the link, and simply if I want to open up a new tab,
I can go Target Target and I'll set it equal to the blank.
So underscore blank.
But then once I do that, there's going to be a big fat complaint in here.
And of course I'm going to be scrolling up and the north using target underscore blank without that
relationship.
And the text value is a security risk.
And essentially what you need to do is just copy and paste this and then pass it in where you have the
link.
Just pass and that specific value and you're going to be in good shape, but now, of course, I can
open this article, but I'm opening this up in time, which is good.
That means that user stays in my application.
And then, of course, I have the button that we will set up in the next video.
So next video, we're about this move, but that is how our app should look like.
So notice on a bigger screen, of course, now I have the Tulkarm layout.
So that's why I have two stories side by side.
Now, also navigate back to my stories and I don't need to console longboarding anymore.
I know what I'm getting back, so I think we can just remove that.
And yeah, I think we are in good shape.
We have stories displayed and of course we can add more functionality to our application.