2.1 Retrieving Feeds

I like to think that I'm okay when it comes to object oriented programming. I'm not the best, I don't claim to be the best, I don't claim that my code is correct or beautiful. I certainly don't claim to write masterpieces of object oriented design. What I do write is software that works in fact, that's what I do for my day job. I was hired to write software, and so if I don't have something that works at the end of the day, then I haven't done my job. So I focus on getting something working, and if the code is somewhat maintainable. Then that's great, and we're going to go through my personal process of running software. So the first thing I do is I try to analyse what I need to start out with. And in this case, we have a UI to work with. Sometimes I don't, sometimes I have to think of how do I want the UI to look and react. But in this case, we have a UI. And I see two things, on the left hand side, I see a place for feeds. So I start to think what kind of objects am I going to need here. Well, the feeds themselves are going to be objects. And they are going to be responsible for rendering themselves in this feed list. But then, I see a feed list. There needs to be something to manage those feeds as well as render itself, too. And then I see the same thing for the article list. So those two things are going to be very similar, so I start to think about the objects needed and the classes. And we could probably have a base class, and maybe even use the same class for both of these lists here. But then I also see the overall application itself, and I think of an object that is there, controlling things behind the scenes. Not necessarily controlling, but at least kick-starting everything so that everything will just work. So what I tend to do then is I just start writing the code that I want to write, and then I make it work. It may not be the correct thing to do, but that's what I do. So that's what we are going to do here. So let's start by kick starting the applications. So, we'll have an app object that is going to serve as the application itself. And it will have a method called init, and that will kickstart everything. So let's go ahead and let's write that. We will define an app object that has a method called init. Now, the first thing that we should really do then is fetch the feeds that we have. Otherwise, there's really nothing else to do until we have our feeds. So let's go ahead and let's do that inside of init. So we will have a method called fetchFeeds, and let's define that method. So, that we will retrieve our feeds and go ahead, and render them in our lists there. So we're going to use axios here. We'll call the get method and that file is in js/slash/feeds.json. Then we want to work with a response, and axios is going to parse that json array into an actual array that we can access with res.data. So then once we have those feeds then we of course, want to load them. And we could do that with a method. So we could say this.loadFeeds, and then we could pass in that array. And well, let's just write that, loadFeeds will get our feeds as an argument. And then we need to actually load our feeds. Well, what we could do is go ahead and pass that off to an object called feeds, because that makes sense. The feeds list, over here on the left-hand side, should be responsible for rendering itself. And if it needs to, it'll pass some of that off on to the individual feed objects, so that they could render themselves. So we could do something like this, this.feeds, and we could have a method called loadFeeds, and then we would pass in those. And then whatever thing that we define for the feeds object, we'll then load those feeds as far as the UI is concerned. So let's have that feeds object, and we will new up, now let's call this ItemContainer, for the lack of a better. And then we can pass in the CSS selector for that containing element. And that will give us a reference to the HTML elements so that then we can manipulate it however we need to. So, let's go ahead and grab that ID, and we will pass that as the CSS selector. And now we just need that item container class. So let's add that to our JS folder. I don't really know of any conventions as far as file names that contain classes. But let's to this. Let's say item-container-class.js. Then we will define that class. We'll have our constructor, which is going to accept the selector. And then we want to retrieve that element from the DOM. Now, this is just my personal convention. Whenever I have an object that references an element, then I just call that .el. And we will retrieve that with querySelector. We will pass in the selector and that will give us that elements, hopefully. So that's, then what do we do? We have this method called, loadFeeds which is going to accept that array. So we will have a method, loadFeeds. You'll have our feedsArray, and for right now, let's just do this. We'll set the inner HTML to something. And that will at least, let us see what it's going to look like in the browser, we don't see anything. That's because I did not add a reference to that new JavaScript file. So, before app, let's add in a script element with the source to /js/item-container-class. And with that done, now we will see if this will work or not. And it does. We see something there, and that's great. So, now we want to actually create the individual items that we are going to show within our feeds here. So let's go back to our item container, and let's think about how we want to do this. We have this array of feeds, so what we could do is run a forEach over them. And we could first of all, say that we're going to have an items property. Because we want to keep track of all of the items inside of this container so that we would always have that. But first of all, we need our feed object only, so let's say let obj =, and we will new up an item called Feed. We would pass in the feed object which is going to have two properties. It will have a name and a URL, and then this feed object will be added to our items array. So we will do that. But then let's do this. We'll have this.el. And we will use the appendChild method. And we will say, obj.render. That'll create an element object that we will then append to our containing element. Now, there would definitely be a more efficient way of doing that as far as writing to the DOM, but this is going to be okay. And so with that, let's create a new file. We will call this item-class.js, and the reason why I'm gonna call it item is because we are going to essentially have two items. We will have a feed item and then an article item. And they're going to be very close together. So the first thing that we'll do is write our feed class. And then when it comes time to write the class for our article item. Then we will create a base class for both of them, and be able to reuse some code. So we're going to accept a feed object, and let's have some normalized API here. Because if we look at our data once again, we have a name and a URL. Well, the feeds that are coming in are going to have a title, property and a link, so completely different. So it would help if we would have some normalization as far as the API is concerned. So with our items, let's do this. Let's have a text property which is going to be the name as far as our feed is concerned. And then we will have a URL, and that will be URL there. But then we also need a render method so that we can create those. But let's do this. Let's do kind of the same thing that we did with our containing class. But in this case, we're going to create an element. And we're gonna make it an element. We can also go ahead and set the class list because there are two classes that we are going to need to define. That is list-group-item, and then the list-group-item-action, those are the classes. We could go ahead and set the href to whatever the url is, and we could set the text as well. So let's use innerHTML there, and then inside of render, all we could do then is return this.el. Now we could make the argument that we want to create our HTML element object inside of the render method, but I don't think so. I mean, because this is going to be unique for each individual feed object, so we are initializing properties, everything should be fine there. So that's for the render method, we will just return el. And we should be good to go, I would think. So let's go to the browser. Things aren't working but that's also because I did not add a reference to that new file. So, before our container class, lets put in the item class. And there we go, viola, we have our items. However, whenever we click on them, they are of course, going to take us to the actual feeds because we set the HREF to those feed URLs. So let's do this. Let's add a click, EventListener. And the first thing that we will do is prevent the default action from occurring. So at least, we won't be able to navigate there, and that's fine. But we will still want to do something because as far as visual cues are concerned, we want something to signify that a particular feed is active. And we will get to that in the next lesson, but for now lets just briefly talk about what we have done thus far. So we started with the application object app, and it is a single object, which makes sense because we have just one application. So unlike the Feed class or the ItemContainer class, we're not creating multiple types of applications. So the application object can be single. In fact, we would expect it to be. And then, the application object itself is really only responsible for the application level stuff. So, the initialization and kick starting the application by fetching the feeds. Everything else is just passing on to the other components, which right now we just have our feeds container. But the feeds container itself is only responsible for working with the feeds that it gets. And the individual feeds are responsible for rendering themselves. Now there is going to be some overlap here. Like for example, the feed object does render itself. But that render method is being called here in the ItemContainer. That's because the ItemContainer is responsible for managing these feed objects. So when there's that kind of relationship, there is certainly going to be an overlap, and we will see that going forward as well. But that's also to be expected, these two types of objects are very closely related. And just like we created a single object for something that's really only needed a single object. We created classes for those objects that we need multiple instances of. And while we just started, we really only wrote the things that we need. That's always a great way to start writing your applications. It's great to look forward and think about what you will need. But it's also a good idea to just write what you need, and then massage the code as you go on. And that's what we plan on doing for the remainder of this course.