rafactor.js

var api = {

    submitUserChanges: function(updated) {
        console.log("BACKEND DELETE:");
        console.log(updated);
    },

    listenForFriendChanges: function(listener) {
        listener(_dataGenerator.getFriendUpdates());
        setInterval(function() {
            listener(_dataGenerator.getFriendUpdates());
        }, 2000);
    }
}
    function idForFriend(friend) {
        return 'friend' + friend.id;
    };
  

function makeFriendElement(friend) {
  var newElement = $('<li id=' + idForFriend(friend) + '>'
                     + friend.name +
                     '</li>');

  newElement.data(friendDataKey, friend);
  return newElement;
}

function findFriendElement(friend) {
  return $('#' + idForFriend(friend));
}

function domId(id){
  return parseInt(id.slice(6));
}



function sortFriendsFn(domA, domB) {
  var idA = domId($(domA).attr("id"));
  var idB = domId($(domB).attr("id"));
  if (idA < idB) {
    return -1;
  } else if (idA < idB) {
    return 1;
  } else {
    return 0;
  }
  
}


var FriendList = (function (listId, sortFn, makeNewElement, findExistingElement) {

    var list = listId;
    var button = 'button#delete-friends';
    var pendingDeleteClass = "pending-deletion";
    var friendDataKey = 'backendObject';

  function sortFriendElements() {
    var listEl = $(list)
    var elements = listEl.children();
    elements.sort(sortFn);
    listEl.empty();
    elements.each(function(index, id) {
      listEl.append(elementsMap[id]);
    });
  }

    function addObject(friend) {
      var newElement = makeNewElement(friend);
        newElement.click(function (e) {
            newElement.toggleClass(pendingDeleteClass);
            $(button).toggle(!($('.' + pendingDeleteClass).length == 0));
        });

        $(list).append(newElement);
    };

    function removeObject(obj) {
        findExistingElement(obj).remove();
    };

    function processAction(action) {
        if (action.action === 'add') {
            addObject(action.friend);
        } else if (action.action === 'remove') {
            removeObject(action.friend);
        }
    };


    $(document).ready(function() {

        // to clear out sample friends
        $(list).empty();
      
      // event handler for when delete button is clicked
        $(button).click(function (e) {
            var deletions = [];

            $('.' + pendingDeleteClass).each(function (index) {
                deletions.push({action: 'remove',
                                friend: $(this).data(friendDataKey)});
                this.remove();
            });

            api.submitUserChanges(deletions);

        });

        api.listenForFriendChanges(function(actionList) {
          actionList.forEach(processAction);
          sortFriendElements();
        });
    });

}("#friends-list", sortFriendsFn, makeFriendElement, findFriendElement));