2.3 Code Reuse, Not Code Duplication

In the previous lesson we pretty much finished the feed list stuff. So now we need to retrieve the feed and then populate the article list. So let's just get started inside of the app file. Because that is where we will load the feed. Makes sense to start there because that's where we left off. Now, when it comes to retrieving a feed, you're gonna be hard pressed to find feeds that will allow you to retrieve them with JavaScript. Most of the hosts aren't set up correctly for allowing that. So what we're going to do then is use a proxy that will fetch our feeds, and it is set up correctly so that we can request it using JavaScript. So to retrieve our feeds, we are going to use the RSS parser so we need to new up a new instance of that. The constructor is just RSSParser. And that has a method called parseURL. And the we parse in the URL that we wanted to retrieve. Well, the first part of our URL is going to be the proxy. Then the second is going to be the feed's URL and that will retrieve our feed, hopefully. If everything is okay, then we are going to work with the result of our call back. And the result is going to be the parse version of the RSS feed. It will have an items property that is going to be the items that we want to use as articles. So what we will do here is a lot like what we did for retrieving our feeds to begin with. And that is we will load the feeds, or load the articles, with our articles object, which we don't have yet. So we are getting back into the habit of just writing the code that we want to write. So we're going to load the items from our results and we're going to pass those there. So that should be okay, although I have a syntax error there. We need an arrow, and there we go. So we need this article's object. And this means that we need to then focus on our ItemContainer, because right now the ItemContainer is somewhat specific for our feeds. The loadItems method is doing for feeds. So here's what we're going to do. We're going to use our ItemContainer as a base class for our two types of containers. So we'll have our FeedContainer which will extend the ItemContainer. Let's go ahead and write the constructor that is going to accept the selector. And then we will call super, first of all, so that we don't forget to do that, and we will pass in the selector there. We don't need to do anything else as far as the constructor is concerned, because retrieving the given elements and then setting up the items, everything is going to be okay there that will be handled by the ItemContainer. So let's copy that and paste it for our ArticleContainer as well. And then we're can focus on what's going to be different between the two, becauze the constructor can be reused, the setActive item should be able to be reused, so it's just the loadItems. So here's what we'll do, we will take our current loadItems and add that to the FeedContainer because that just makes sense. But for the ItemContainer itself, let's make it just an empty method, so that we have a method here. But we're going to override it in the child classes. And let's take the loadItems from our FeedContainer, paste that into ArticleContainer and we'll just make a few modifications here so that we're going to be working with articles. So we will still iterate over our articles array. We will work with each individual article and then instead of creating a new feed, we will create a new article. We will pass in the Article object that we have. Push items, [SOUND]. You know what? This is all repeated. So what we could do, well, no, no, we're not gonna do that. Nevermind, we're gonna leave that as is. There's probably some things that we could do to reuse code but this is fine. Now, something else that we might want to consider is that our ArticleContainer and our FeedContainer are pretty specific. So we could say that we don't really need to specify the selector here, and instead we can hard-code it to inside of these classes. You can do what you want, I mean there can be arguments both for keeping the selector and then hard coding it. I'm just going to leave it as is because I know that that works. And so for our feeds, we now have a FeedContainer. Let's go ahead and create the articles as well. So that is going to new up the ArticleContainer, and then for the selector we will have '#article-list-container'. All right, so that should get our containers going. Let's focus on our items now because right now we just have the feed class. But really what we want to do is have a class called Item that extends the event target. And then we will use this as the base class for the other classes. So over here for the Item class, we of course want our constructor. We are going to call super, so that I don't forget to do that. And then as far as the feed is concerned, we just need to think about what it is that is going to be unique for each item class. And then what is going to be shared between them. All right, so as far as our feed is concerned, the text and the URL are dependent upon the object that's being passed to the constructor. So what we can do inside of Item is we can go ahead and initialize text and initialize URL as empty strings. We can also go ahead and create our element object because there is nothing that is specific for a feed or an article here. The same is true for the class list so that we can do that. The href however is dependent upon the value for the URL. So everything else except this event is going to be specific so let's move the event up to the Item's constructor. And everything else is okay. Now, the active and render are going to be the same for both feed and articles. So we can move those up into item. And really, setting up the href in the innerHTML Once we have the text and the URL, that is the same. So we could move that very easily to like the render method. So let's do that, that way we have nice clean little subclasses, and that really made that a lot easier. So let's copy what we have for Feed, rename it to Article. Change the parameter for the constructor to Article. Now as far as the text is concerned, we get that from the title and then the URL we get from the link. So with that done, we should be able to make this work. Let's click on one of the feeds. And, I've been patient enough, nothing happened. We have an error, cannot read property items of undefined, that's on line 25. Okay, let's click on one of the items again. Let's see, error, well, that's interesting. I have used this several times and this is the first time that I've run into this issue. So we're not gonna use error here, we're going to use results instead as the only argument. So now that should work. Let's get rid of that break point. And let's refresh, and let's see what happens if we click on one of our feeds. That worked, that's great, we can see that the active automatically works because all of that functionality is the same between the two types of items. If we click on PRS Guitars, well, I just saw the scroll bar change size. So we need to clear our list. So let's go to our container class. And we really need to do two things. We need to clear the items array. We also need to clear out the element by removing all of the children. So well, you know what, we've got the same thing going on here as far as the loadItems. The only difference is the object that we are creating inside of the load items. So this is what I'm going to do, let's create a method called itemFactory. It will accept an item, and as far as the base class is concerned, we're going to leave this as this. But this is how we could use it inside of our FeedContainer and the ArticleContainer. So, what was that? ItemFactory. We have the item. We're going to return a new Feed and we will pass in the item. We will do the same thing for the article but of course we're going to return an article object instead of a feed object. This way instead of our loadItems we can change, well, let's do this. Let's get rid of the loadItems from both these classes so that there's no confusion there. And then inside of our base class, we're going to use loadItems. We're going to change the terminology here so that we are working with items. You're iterating over items. We have an item here but instead of newing up something, what we're going to do is use our itemFactory. We will pass in the item that will create whatever object that we need and there we go. We have much cleaner container classes, but that doesn't solve the issue as far as our items are concerned in clearing them out. So let's first of all set items equal to an empty array, and let's also just cheat, and say innerHTML equals an empty string that will clear out our element object and there we go. So now if we click on one of the feeds, then we see our items in the articles, that's great. If we click on the other feed, yes, that works exactly as it should. So now the only thing that we need to do is load the content, and we will do that in the next lesson. So let's first of all, talk about what we did. We did a lot [LAUGH]. We created base classes and then moved all of the reusable functionality to the base classes. So that in our subclasses, like FeedContainer and ArticleContainer, all we have is just a different constructor. Really, it's not even different. We have to have the constructor because that's how we do it in JavaScript. And then just the deferring item factories. As far as the items themselves are concerned, we moved all of the reuseable code in logic up into the base item class. So that's out Feed and our Article classes only differ as far as the constructor is concerned. We initialize the text and URL based upon the object that was passed to the constructor. Everything else is being handled by the base class. So I think we did a pretty good job of code reuse. So that in the next lesson, we just need to load the content and we will be done.