3.2 Making Friends

In the previous lesson, we displayed our list of users, and we created a button that will allow the logged in user to add or remove people from their list of friends. So in this lesson, we're going to begin wiring up that button, and you'll see why I say begin In a couple of minutes. The first step, of course, will be to determine whether or not the user who is logged in is already a friend of that person or not. So we're going to write a helper function. And I happen to know that we're gonna need this function in a few places. So we're going to write this function outside of an actual template helpers. So let's go ahead and create a new file in the lib folder. And we're gonna call this helpers.js. And we're going to call this function alreadyFriends. And just as we did with the collections, we'll make this a global variable, so that we can use it outside of this file. And this function will take a userId as its only parameter. Let's begin by getting Meteor.user to see if we have a user logged in. Now, unfortunately, this is going to be a little bit of a messy function, because there's a lot of possibilities here. So, what we're going to do here is return, and we're going to use a bunch of binary ands. And this is why, first of all, we're gonna say user. And this is because it's possible that there is no user logged in and so this is going to be no. Now, really, this function should never be called if someone's not logged in because they won't see the button, but let's just make sure. So we'll say user && user.profile because the user records don't have a profile object by default. And so if this is the user's first friend, user.profile will be undefined. Of course it's possible that there will be user.profile, but not a list of friends. So we'll have to say user.profile.friends, and then finally, we will say user.profile.friends.indexOf(userId) > -1. Now this is kind of a long line, so I'm gonna break it up a bit. We'll just break it up at the double ampersands. And so we can say, we'll return true if there is a user logged in and they have a profile and they have some friends, and this user id is in their list of friends and we know that they are already friends. All right, so that's all we need with the helpers file for now. Now, we'll be able to access that function from in our users.js function. Now we have our user template here. And this is where we're gonna need to use that function. So let's say Template.user, and we're not saying users, we're saying user for the individual template. So Template.user.helpers. And we'll say, alreadyFriends. And we'll make that the alreadyFriends function. Now we can access this function globally, and so we'll just apply it to our users list of helper functions here. So now, within here, we can put another if statement. And we'll say if alreadyFriends, and we'll say _id_. And this, of course, is one of the properties of the user object that we were passed. You might think that since we said only the username in the profile that the id is not included. But that's not the way Mongo DB works. It always sends the id, unless we explicitly say no id. But we're not saying that, and so the id will be passed along. So we'll pass that id property to the alreadyFriends function. If it returns true, we will put a- {{else}}. If it returns false, we will put a +. And then let's close off the if statement here. Now if we come back, it seems that our app is crashing. I wonder why that is. It looks like we forgot to actually put the if keyword after that hash mark. So if we do that, and refresh the page, which we have to do after the app crashes, then we should see that we have a + here. Excellent. Now right now, clicking it doesn't actually do anything, so let's wire up that event handler. So here in our users.js file, we'll say Template.user.events. And this is how we can wire up event handlers. And we'll do this using event strings similar to the kind of thing you can do in jQuery. We'll say click for the event, and then we'll have a selector for the element, so we can say .add, since we added the add class to the button. All right, so here is our function, and of course, it takes an event. And in here, we're going to do Meteor.call, and we'll call the setFriend method. And we will pass this._id. Okay, there's a couple of things to explain here. First of all, this, inside of this function, refers to the data that we are using for this template. Now, we've already discussed how, in this template, the data context for this template was set to the user object because of our loop up here. So within here, we still have that data context. So this._id is going to be the id for this user. But what about this Meteor.call('setFriend'), what's going on here? This is how we can call a Meteor method. Now Meteor methods are methods that we write ourselves, and we're going to learn all about them in the next lesson.