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.4 Deleting Feeds

Deleting feeds is going to be very simple. One of the things about using MongoDB, and especially mongoose is that we get to use a JavaScript oriented approach to working with our data. So just like in the previous lesson, whenever we added or created a feed and stored that in the database we used, well, just normal JavaScript syntax and API's, we will essentially do the same thing for deleting a feed. So let's go ahead and let's create this route. This is going to be a delete request for our feeds endpoint, but we will also have another segment that we will just call, recordId. Because every feed that we store in the database has an ID. Let's just look at those. So if we drill down inside of feeds and take a look at any one of these, there is this underscore ID, just like the underscore ID that we were using to generate the tokens for our authentication. So all we need to do is reference this ID. And the great thing is, since we will always have the latest feeds coming from the service, then we also have those IDs available to us. So whenever we add a feed and we return the feeds altogether, we have the IDs for all of those feeds. So we have all of the information we just need to provide it in the request. So this is, of course, needing to be protected. So we will use our isAuthenticated middleware, and then we will simply handle the request. So let's first of all get our user. Once again, this will make it just a little bit easier to access that particular object, and then we want to get the record ID which we will get using the params property on our request. And then all we have to do is just use the name of our parameter, which is recordId. The next thing we need to do is find the index of the feed with this record ID. So as I said, this is going to look a lot like just normal JavaScript stuff. So we are going to use our feeds. And instead of using an index of, we're going to use this findIndex, where we will attempt to find the record with the given ID, that is equal to the record ID that was supplied in the request. And if we have that index, then we can use that to remove the item. So of course, we need to check to see if index is greater than negative one. And if so, then we will simply remove that feed. So we will call the splice method, we will pass in the index of that feed, we want to remove just one thing, and that's it. All we have to do then is save our database. And we've just removed that feed. So then we can kind of do what we did in the previous lesson and just return all of our feeds. This will, of course, mean that we need to make some modifications to the code that we've already written in our view X data store. But this is going to be ultimately better overall. So we will just have our feeds, and we will return those back. There's our route. We have that all set up, we need to go into our clients code, and we need to first of all have a function for making a delete request. So let's open up the HTTP module and let's just copy the getJson because this is essentially going to be the same exact code except for the method. So we will call the function, deleteJson, we get the headers, we have the URL, and the method is, of course, delete. So, there we go. We can export this so that we can then use it inside of our view X store. So let's open that file. We, of course, need to import the deleteJson. And we need to find the action for removing a feed. It's right there. So we're gonna follow the same pattern that we've used throughout all of these actions. We're going to call our function, deleteJson, and the URL is going to consist of feeds, and then it's also going to have the feed underscore ID because we do have access to that. And as far as the request is concerned, that is it. Now, we do want to be able to handle the data that's coming back because remember, we are getting all of those feeds, so we want to commit the set feeds mutation if we have it. So let's check to see if we have our feeds. And we will simply commit our set feeds, and then we will pass in data feeds and we then need to return data, so that whatever is calling this action can do something with the data that needs to. So, that means we don't need that mutation for removing a feed. It was a nice thought, but ultimately, we don't need that, which getting rid of code is always a good thing. I will not complain about that. So with that in place, we should be ready to go. Let's take a look at our settings view just to make sure if there's anything that we need to do, and I don't think so. We are dispatching the removeFeed action, we are supplying the feed, we don't need to do anything else there. So let's give this a test. Let's go to the settings. One thing that we should probably do is load all of our feeds whenever we are inside of settings. So let's do that just like we did inside of feed. So we will use a store, we will dispatch the getFeeds action. That way whenever we go to the settings, those feeds will automatically be loaded there. So if we click on the delete button for this first item that doesn't have a name, it should be deleted. And of course, something goes horribly wrong, nothing can work the very first time. So we have an unexpected token, so let's take a look at the network. Let's click on delete again and let's see exactly what we get. We get a 500. So let's take a look at the response, cannot read property on line 65, can't read property splice. So let's look at line 65 inside of our API. And yes, that is feeds not feed. So with that in place, we should be able to click on the button again, and there we go. It was deleted and it was successful. So now, we can do a hard refresh just to make sure that we are fetching new information, and sure enough, that's the case. So if we wanted to, we could go ahead and delete this other item, and we could add it back in. So it's not Tuts+ Code2, it's just simply Tuts+ Code. And whenever we add the feed, we have it. Whenever we look at our feeds, that is the only feed that we have. So, now the only thing that we need to make this application work is the functionality for actually fetching our feed and we will implement that in the next lesson.

Back to the top