7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 Fetching Individual Feeds

There are many libraries available that will take an RSS or Atom feed and convert that into a JavaScript object. However, none of them are as easy to use as what is called RSS parser. So we are going to install that. And even though it says just rss-parser it does work with Atom feeds as well. And this is very straightforward. This will fetch the feed for us, it will automatically convert it for us. So that's really all that we need to do is find the feed that we want to retrieve and then have RSS parser pass that on to our response. So a very simple and straightforward implementation here. And we can start with our delete routes because some of this we are going to need. We of course need to change the method name to get. But we are going to fetch the feed based upon it's id. Originally I had thought that we would just pass on the URL but I like this approach a lot better because this allows us to actually ensure that the feed that we are trying to retrieve is a feed that the user is subscribed to. So we still need to get the user as well as the record id. We are still going to get the index of the item from our feeds, based upon that id. But we're going to do something a little bit different here. We're going to check to see if we do not have this feed. Because if we don't, then it is very important in this case that we return a 404. Now we should have probably done the same thing for our delete route so that if we didn't have that feed, it's a 404. There's nothing to delete. But in the case of getting something, it's a lot more important to return that 404. So in this case, we'll just simply have a status of 404. And then, as far as the data that we send, we'll just have an error object that has the text of Not found. So following the same convention that we've been using throughout this course. Now if we make it past here then, of course, we have a feed. So let's go ahead and get that very easily by using feeds. We'll use the index notation there, and there we go. And then all we have to do is then fetch that feed with the URL property, but we do need to require the parser. So we will do that, this is going to give us a constructor function which we will then need to use to create our parser object, which is what we will do right now. And then this parser object is very simple to use. It has a method called parse URL, we pass in the URL, and it's going to do everything for us. So that right here we will use parser and then parseURL. We have our feed's URL, so we will pass that and this of course returns a promise so that's we will then be able to work with a feed. And all we will have to do is just send that feed back to the client. There we go, very simple and straightforward. So with that done, we can focus on our client code, and we will start in our VueX data store. So let's go ahead and open that up, and we want to go to our action for getting the feed. Now we are no longer working with the URL. We are working with the feed object itself. And we can copy the starting code from the remove feed action, and of course we need to change that function that would not be a good thing to do. But then we can work with the data from the request. And really the first thing we should do is check to see if we have that error. And in this particular case, I don't know what we would want to do. So we'll just have a comment to do something and then we will return the data there. If we get past that, then we of course want to commit the set articles mutation and we will pass in the items from our feed. That is the property that RSS parser gives us to reference the articles and then we will return the data there. So that should be it for this. Now, we did use this action inside of our feeds view, and we need to go there and modify it so that we pass in the feed as opposed to the URL. So let's open that up. And let's go up to our template to where we are passing in the URL no longer, that is the feed. Which means that down here for feed on click, we need to change that to feed. We will pass in the feed for the get feed action and that should work. So let's give this a try. Let's do a hard refresh and, let's click on the feed. And there we have our articles. One thing we do need to change though, is, the description property for our article on click. The RSS parser has a property called content to give us. Well, the content so that whenever we click on one of these items, we can see the content and everything is independently scrollable which is very nice. Now there is some play in the overall document scrolling. I didn't intend on that happening at all, which I guess for our purposes for right now, that's okay. I mean if we were gonna actually use this or release it for use, we would want to tweak it and make it just absolutely perfect, but that's okay for me. Let's see if we can quickly implement a log out. So let's go to our app.vue file, and we wanna add another link to our menu for logging out. Now this doesn't need to be a router link, this can be just a normal link. So let's do that we'll have a hash for the href, and the text is going to be Logout. Now we do need to execute some code here. So let's go ahead and set up the click .event listener. We'll just call this method, Logout. And instead of using the composition API, we'll just use the good old standard options API, because that will get us up and running very quickly. And we're not doing a whole lot of extra stuff inside of this component here. So we have the log out method, and the first thing we need to do is clear out our token. Now, I know we have a set token mutation, and we can modify this so that if we don't have a value then we will essentially clear out the token. So if we have a value, we will execute the code that we currently have. Otherwise, we are going to set our state's token to null and then we will remove our off token from local storage, so that should effectively log us out. So we can go back to our component. And the first thing that we can do is commit that setToken. We won't pass in anything so that'll clear it out. But then we also need to route to the login view. So we'll just use our router to push in the login, and that should work. So let's go back to the browser. Let's do a hard refresh. Let's make sure I didn't break anything first and everything is working okay. And then let's log out. And voila, we have a working modern application with Node and Express on the back-end and Vue3 on the front-end.

Back to the top