hooked up socket calls to usercard

lib/persona.js

@@ -1,6 +1,6 @@
 "use strict";
 
-/*globals ajaxify, config, utils, templates, app, Slideout, NProgress*/
+/*globals ajaxify, config, utils, templates, app, socket, Slideout, NProgress*/
 
 $(document).ready(function() {
 	setupNProgress();
@@ -166,11 +166,16 @@ $(document).ready(function() {
 	function setupHoverCards() {
 		require(['components'], function(components) {
 			components.get('user/picture')
-				.on('mouseover', function() {
+				.on('mouseover', generateUserCard);
+		});	
+	}
+
+	function generateUserCard() {
 		var avatar = $(this),
 			index = avatar.parents('[data-index]').attr('data-index'),
 			data = (ajaxify.data.topics || ajaxify.data.posts)[index].user;
 
+		socket.emit('user.isFollowing', {uid: data.uid}, function(err, isFollowing) {
 			templates.parse('modules/usercard', data, function(html) {
 				var card = $(html);
 				avatar.parents('a').after(card.hide());
@@ -179,6 +184,16 @@ $(document).ready(function() {
 					card.find('.btn-morph').hide();
 				} else {							
 					card.find('.btn-morph').click(function(ev) {
+						var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
+
+						socket.emit('user.' + type, {uid: data.uid}, function(err) {
+							if (err) {
+								return app.alertError(err.message);
+							}
+
+							app.alertSuccess('[[global:alert.' + type + ', ' + data.username + ']]');
+						});
+
 						$(this).toggleClass('plus').toggleClass('heart');
 
 						if ($(this).find('b.drop').length === 0) {
@@ -191,6 +206,12 @@ $(document).ready(function() {
 
 						drop.css({top: y + 'px', left: x + 'px'}).addClass('animate');
 					});
+
+					if (isFollowing) {
+						$('.btn-morph').addClass('heart');
+					} else {
+						$('.btn-morph').addClass('plus');
+					}
 				}
 
 				utils.makeNumbersHumanReadable($('.human-readable-number'));
@@ -204,6 +225,5 @@ $(document).ready(function() {
 				card.fadeIn();
 			});
 		});
-		});	
 	}
 });

templates/modules/usercard.tpl

@@ -22,7 +22,7 @@
 				<span class="human-readable-number">{reputation}</span>
 			</div>
 			
-			<button class="btn-morph fab plus">
+			<button class="btn-morph fab">
 				<span>
 					<span class="s1"></span>
 					<span class="s2"></span>