If we check the HTML template of our new page, we will see that every rendered user has a button that dispatches an add event. Let's handle this in our controller and run a function in our model, which is similar to the process of finding friends:

this.on('add', function(e, id) {
  this.set('loading', true);
  model.add(id, function(err, res) {
    self.set('foundFriends', null);
    if(err) {
      self.set('message', 'Operation failed.');
    } else if(res.success === 'OK') {
      self.set('message', 'Operation successful.');
    }
    self.set('loading', false);
  });
});

We use the same technique with the loading flag. The model's method that we will cover in the following code accepts the id value of the user and reports if the linking is successful. We need to clear the foundFriends array. Otherwise, the current user may click on the same profile twice. The other option is to remove only the clicked item, but this involves more code.

The addition in models/Friends...