Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:19Length:2.2 hours
Building javascript websites with meteor 400x277 small
  • Overview
  • Transcript

4.6 Deleting Posts

Now let’s build out the methods for editing and deleting posts, and then attach an event handler to our delete button to remove the associated entry.

4.6 Deleting Posts

Now that we know how to insert a new post into our database, I wanna talk in this lesson about how we can edit and delete existing posts. And we're gonna add the edit and delete methods to this Meteor.methods object in our userposts.js file, which is in our api folder. And since we've already covered a lot of ground on the basics of using Meteor, I am just going to copy and paste some code into our userposts file. And then I'll explain what's going on here. So I've added two new methods, one of them called userposts.remove because remove is the Meteor DB command for deleting a row or a document from a collection. And then we have userpost.update because, again, update is the Meteor command, or I'm sorry, the MongoDB command for editing a record that already exists. So again, we're creating these on the userposts.js file in the api folder because we want these to be secure. So we're not going to call the userposts.remove and userposts.update from the front-end JavaScript files, we're gonna call it from this back-end file. And we're gonna be able to call those methods the same way we called the userposts.insert method in just a moment. But let's take a quick look at how these remove and update methods work. And before I get any further, let me go ahead and say that the files from the last lesson were saved in the site010 folder. And the changes we make in this lesson will be saved in the site011 folder. So the remove method, first of all, that's the easy one. We're gonna pass in a userpostId, which is gonna be the unique ID associated with a particular post. And then we're going to remove that post by passing in that userpostId to the remove method. So remember, this Userposts object, with a capital U, that represents our collection, our collection of Userposts. And so when we point to our collection and say .remove and then pass in an ID, it will delete that item from the database. Now, let's talk about that ID for a moment because we didn't create any IDs or we didn't explicitly define any IDs when we created our posts. But Mongo automatically adds an ID field to our posts when we create them. So if we jump into our Mongo window, which, again, you can get to by opening up a command prompt, navigating into your application directory, and then typing meteor mongo. And once we're in the Mongo prompt, I'm gonna type db., and then the name of our collection, which is userposts., and then I'm gonna call on the find method and hit Enter. And that will list out all of the user posts for us. And in here we have a username is Craig, we have createdDate and then the ISODate, and then we have the text and the text that we saved for that post. But you'll also notice that the very first item that's saved is _id. This is a field that's automatically created. Whenever you create a collection and start adding items to that collection, each item is gonna have its own unique ID, and we can see that each one of these items has a different ID. So that's the ID we need to pass into our remove method in order to delete a particular post. Also, in order to delete the post, I need to create a link on the HTML file to delete it. And that link, I'm gonna use Font Awesome to create a couple of icons. And Font Awesome is just an icon font, and we can actually add that very easily to our website. Let's go ahead and exit out of our Mongo prompt so that we're back in our directory. And from our directory, I'm gonna enter in a command to add Font Awesome to our site. And the way we do that is we type, meteor add, and then you get to Font Awesome by typing fortawesome, with an r, :fontawesome. So again, meteor add fortawesome :fontawesome, and when we hit Enter, it will add that font to our website. And we see that it was added just fine, so let's go back into our text editor, save our userposts file. And I'm gonna jump into the singular userpost, which is in our imports > ui directory. And here's where we have our userpost-info object. Well, after the closing div for that userpost-info, but before the closing div for a panel-userpost, this will still be inside that panel. I'm gonna create an unordered list with a class of list-icons, and then I'm just gonna copy and paste a couple of list items into this list that we're gonna use for our edit and delete buttons. So inside these buttons, you'll notice I have an i tag with a class of fa and fa-pencil. fa is the generic font awesome class, and then fa-pencil is the specific class to display a pencil icon. And then for our delete, we have a trash icon that we're going to display. So let's save that, and then let's jump over to our browser and see how it looks. So we come over here to the right, and we have these nice hover effects that have already been put into your CSS. So you can jump into the CSS under, where'd it go? It's gonna be main.css inside our client folder. You can look through there and find all of the CSS that we're using in this course. I've already added the CSS for these buttons and hover effects. And we are using the flexbox model to arrange everything here so that we have all of our text on the left and our buttons over here on the right. So now that we have those buttons there, let's link up our trash can icon with the remove action for our row or for our document in this collection. So when we click on that trash can icon, it will delete that particular post. Well, if you remember, when we remove a post, we have to pass an ID into that post. Well, the good thing is, since all of these items are created using Blaze templates, that template already knows what the ID is. The template for each one of these items knows what the ID is for each one of those items. And I'll show you how we can access that ID. So let's jump back into our code, and the userpost.html file is where our edit and delete buttons are. This is our template for that user post. So we're gonna need the JavaScript file for that template in order to make this happen. So that's gonna be in our imports > ui folder, under userpost.js. And right now there's not a whole lot in here, but we are gonna create some event listeners, just like we've done before. So I'm gonna skip a couple of lines. And if you remember, the way we create an event listener is we type Template.userpost. And you have to make sure that template is imported here or that won't work. So Template.userpost.events, or again, userpost is the name of this particular template, just to avoid confusion. So .events, and then we have our opening and closing parentheses, and then our opening and closing curly brackets. And then inside our events, we can create our events for deleting, and editing, and whatever we want. And then inside these curl brackets, we can create our click events for our buttons. And right now we're gonna create a click event for our delete button. So inside this events object, we're gonna create a click event. And if you remember, we put that inside the quotation marks, and then we put a space, and then the CSS selector for the item we want to add the click event to. And we want to add it to our delete button, which has a class of delete on it. So I'm gonna say .delete, and that will get us there. So then after our closing quotation mark, we'll put our parentheses for our delete method, and then our opening and closing curry brackets for that callback function. So again, we want to call our userposts.remove method and pass into it the ID for that particular post. So let's go back to our JavaScript file, and the way we call these methods is with Meteor.call. But before we can do that, we need to import Meteor, so I'm gonna nudge this template import down, and I'm gonna paste our Meteor import just above it. And then inside this event handler, we're going to say Meteor.call. And then inside parentheses the first thing we need is the name of the function that we're calling. And in this case, it's userposts.remove, and that's userposts plural, comma, space, and then we need to pass into that method the ID of the item that we want to remove. Well, when we're inside the JavaScript file for a template, we can point to all the data in the template simply by typing this. And if we want a particular piece of data, we can say this., and then the name of that data. So we could say this.username if we wanted to because that's one of the properties on this item. But what we want instead is this., and then remember, Mongo automatically gives each item a property called _id. So we're gonna say this._id, and that will pass in the unique ID for this particular userpost. And then we should be able to delete it just fine. But again, when we do Meteor.call and pass into it userposts.remove, and then the ID of the object that we want to delete, that will call, in our userposts.js file, that will call this method right here, userposts.remove. Which will then check the postId to make sure it's a string. And then it will remove the item with that ID in it. So let's see if that works. Let's save all of our files, and then we'll jump into our browser, and I wanna make sure it's refreshed, there we go. And now let's click on the delete button next to one of our posts. So let's do the second post here, I'm gonna click the trash can icon. And when we click on that second post, it's not deleting it. And I think the reason why that is is this is one of the posts that we created from the command prompt. And the reason that's an issue is because, if we go back to that command prompt that we looked at a minute ago where we listed out our items, you'll notice that the first couple items here, the ID is listed as an object ID. And then we have a string inside parentheses there. But if we move down a few items, this one here, here is my first dynamic post. This is one we created from within the app, and that one is listed as a string. So the best way to handle this is just to manually, within Mongo, delete anything that wasn't created in the app and it will get rid of those objects. But I'm guessing that if we were to try to delete another one of these, such as this most recent one that says here we go, you'll notice that one is just a string. So I bet if we click delete on that one, it will delete it. Another thing we can do is if we go into userposts and get rid of this check here, before we remove the item, let's save our file, then it will no longer check to see if it's a string. And it should delete it even if it's an object. So let's jump back into our page and delete it, I'm sorry, refresh it, and then we'll try to delete this second post. And without that check there, we see that it does delete just fine. So we can delete all the ones that come after, here's my first time dynamic post or technically that came before it, and we should be fine. So now we know that all new IDs that we create are gonna be a string. So we'll just add a new post here, this should be a string, hit Enter. And now let's go back to our command prompt, and let's go back into, meteor mongo. And when that loads up, we can hit the Up arrow and it will pull up the last command we typed in, and we'll just hit Enter. And sure enough, we see that the latest post that we made that says, this should be a string, the ID is listed as a string and not as an object. So anything we create from here on out should work out just fine, even if we turn this check back on. So that's how to remove posts. We're also gonna talk about how to update posts, but that's gonna be a little bit more complex than just deleting one. Because we're gonna have to actually not only pass in the ID, but we're also going to have to set the value of the text. And so we'll go ahead and save everything, and we'll talk about how to edit our items in the next lesson. Thank you for watching.

Back to the top