3.2 Showing the Articles
A feed has any number of articles, so we need to be able to list them and show their content. In this lesson, we'll hook up the Articles panel to our Vuex store.
1.Introduction2 lessons, 06:25
2.User Registration and Authentication7 lessons, 1:05:20
3.Wireframing the UI3 lessons, 27:30
4.Handling Requests5 lessons, 39:24
5.Conclusion1 lesson, 01:04
3.2 Showing the Articles
In the previous lesson, we started implementing the functionality for RUI. Now of course, this is grossly incomplete because we don't have the server side working yet. So, this is just going to get the bare bones functionality working so that when we do have the server. Then we can just tie everything together and well it should work, we'll see. Now what we have is our feeds view, we have three panels and whenever we click on one of these feeds, we want to load the items. Actually, let's call that articles because I'm probably going to use the term items a lot. And I don't want there to be any confusion plus, these are essentially articles. Okay, so we have our articles and it's gonna look very much like the feeds, it's just gonna be a list of links that we will then click. And then the content for whatever selected article will display in the content. So, we essentially want the same type of functionality that we have for our feeds, so let's take this div with the class of list group. Let's take that whole thing, and let's paste it underneath articles. But of course we need to change a few things here, such as we're going to be working with an article. And this is going to come from our getters, which is going to be an article. Let's also put this on multiple lines, so that it's a little bit easier to work with. As far as the class is concerned, we'll leave that alone, but we are going to have a different properties here instead of a feed name. We are going to have an article title and we are seeing these red squiggly here because. We need to add in the key or at least the editor wants us to do that and we'll just use the actual article as the key there. Let's do the same thing for our feed so that we can get that red squiggly. Unfortunately, there are some red squigglies that we will not be able to get rid of because the editor hasn't caught up yet with view three. And the rules of view three, such as having multiple elements inside of a template, we're just gonna have to deal with that. Now, we do need some code that is going to execute whenever we click on this feed item here. So let's go ahead and let's say that's whenever we click on this and we will prevent the default from occurring. Then we're gonna call a function called feed on click, and we will pass in the URL for that feed. So this means we need to add the script element to this component, and let's also go ahead and use the setup method here. And let's open up login, let's grab I don't know if we'll need ref or not, but we'll grab it anyway. And we will import that, and if we don't end up using it then we can get rid of it later. So we do need access to our store, so let's just go ahead and get that, and we also need that function that was a feed on click. Where we receive the URL and let's go ahead and return the object that we need to hear. Now of course, this feed on click isn't really going to do anything right now, it is going to dispatch the action that we created in the previous lesson. But that action isn't going to really do anything except just give us some temporary articles to work with. So we are going to go ahead and dispatch, I think it was get feed and then we will pass in the URL there. So as far as this file is concerned, I think we are done. So let's go to our view X store and we need to do quite a few things here, we have the get feed. And instead of using context, I'm gonna change this to make it just a little bit cleaner. And in fact, let's just do the same thing for all of these actions so that we are a little bit consistent here. All right, so we are going to commit a mutation, and we can call this set articles and then we will pass in an array. Now of course, we would be making a request and then getting data back from the server. And then we would be committing set articles but for right now this is going to work just fine. And we are going to have a title, we'll call this Article 1, and then let's also have a description which is going to be the content for article 1. And let's just copy and paste that a few times and make the necessary changes so that we have multiple articles to work with. So we will have Article 2 and Article 3, so now let's create this set articles mutation. So we'll go up to our mutations, we'll add that there we'll have our state and we will simply set the value. Or I'm sorry, we will set articles equal to the value, this does mean that we need an articles item inside of our state. So let's go ahead and let's add that, we will initialize it as an empty array, let's also go ahead and add a getter for that as well. We'll just call it articles and it is simply going to return what we have in our state. So with all of that plumbing in place, we should be able to go to the browser, click on any one of these and voila, that works. Of course we don't see any difference between first feed and second feed, that's because, well this is all temporary stuff. Now whenever we click on one of the articles, we want to load the content. We, well not only want to do that but we also want to change the title that we have for the content so that it is the title of our article. And off the top of my head, I don't see a reason why we should do anything with our view X state. Because really, these individual items have all of the information that they're going to need. So whenever we click on one of these items, we could just go ahead and change these values. They can be bound to some variables that we have inside of our setup method and all of that will work. We might change that functionality, but in my head that seems great, so it's good that we have this ref here. So what we will do then is for the title of our reading panel, we are going to have a variable called article Title. And then beneath that we will have a div element where we probably want to use the HTML directive to output the article description, just like that. So these are the two things that we need to set inside of our setup method. So we will start with article title and we will of course initialize that by calling the ref function. We will essentially do the same thing for article description as well. And then we need another function for whenever we click on one of the articles. So let's call this article on click and we will accept the article that we wants to work with. And then we will simply set the article title, now we do need to use the value property here. And we are simply going to set that to the selected articles title, and we will exactly do the same thing for the description as well. So let's just do a little bit of copying and pasting there and then we should be good to go. Although we do need to wire this up, don't we? Yes we do. All right, so we do need to return these things, first is going to be the article on click function. Then we will have the article title and then finally the article description. So those are the things that this component is going to be working with. Let's scroll up to our article list and we are going to add the click event listener there, we are going to prevent the default action from occurring. And we will pass in the article, so that should work let's give it a try. We will click on one of the feeds, we will click on one of the Articles and voila, that works just like it should. So, now that we have this basic UI functionality ready to go. We need to focus on our settings UI that is going to allow us to manipulate our feed list so that we can add and remove feeds.