Added basic mode support with op/voice and userlist sorting

client/src/js/actions/channel.js

@@ -11,6 +11,7 @@ var channelActions = Reflux.createActions([
 	'removeUserAll',
 	'setUsers',
 	'setTopic',
+	'setMode',
 	'load'
 ]);
 
@@ -48,6 +49,10 @@ socket.on('topic', function(data) {
 	channelActions.setTopic(data.topic, data.server, data.channel);
 });
 
+socket.on('mode', function(data) {
+	channelActions.setMode(data);
+});
+
 socket.on('channels', function(data) {
 	channelActions.load(data);
 });

client/src/js/components/Chat.jsx

@@ -14,7 +14,7 @@ var Chat = React.createClass({
                 <MessageInput />
                 <UserList />
             </div>
-        )
+        );
     }
 });
 

client/src/js/components/MessageInput.jsx

@@ -11,7 +11,7 @@ function dispatchCommand(cmd, channel, server) {
 	switch (params[0].toLowerCase()) {
 		case 'join':
 			if (params[1]) {
-				channelActions.join(params[1], server);
+				channelActions.join([params[1]], server);
 			}
 			break;
 

client/src/js/components/UserList.jsx

@@ -26,7 +26,7 @@ var UserList = React.createClass({
 			var channel = this.state.channels[tab.server][tab.channel];
 			if (channel) {
 				users = _.map(channel.users, function(user) {
-					return <p>{user}</p>;
+					return <p>{user.renderName}</p>;
 				});
 			}
 		}

client/src/js/stores/channel.js

@@ -14,6 +14,54 @@ function initChannel(server, channel) {
 	}
 }
 
+function createUser(nick, mode) {
+	return updateRenderName({
+		nick: nick,
+		renderName: nick,
+		mode: mode || ''
+	});
+}
+
+function loadUser(users, nick) {
+	var mode;
+
+	if (nick[0] === '@') {
+		mode = 'o';
+	} else if (nick[0] === '+') {
+		mode = 'v';
+	}
+
+	if (mode) {
+		nick = nick.slice(1);
+	}
+
+	users.push(createUser(nick, mode));
+}
+
+function updateRenderName(user) {
+	if (user.mode.indexOf('o') !== -1) {
+		user.renderName = '@' + user.nick;
+	} else if (user.mode.indexOf('v') !== -1) {
+		user.renderName = '+' + user.nick;
+	} else {
+		user.renderName = user.nick;
+	}
+
+	return user;
+}
+
+function sortUsers(server, channel) {
+	channels[server][channel].users.sort(function(a, b) {
+		if (a.renderName < b.renderName) {
+			return -1;
+		}
+		if (a.renderName > b.renderName) {
+			return 1;
+		}
+		return 0;
+	});
+}
+
 var channelStore = Reflux.createStore({
 	init: function() {
 		this.listenToMany(actions);
@@ -28,25 +76,34 @@ var channelStore = Reflux.createStore({
 
 	addUser: function(user, server, channel) {
 		initChannel(server, channel);
-		channels[server][channel].users.push(user);
+		channels[server][channel].users.push(createUser(user));
+		sortUsers(server, channel);
 		this.trigger(channels);
 	},
 
 	removeUser: function(user, server, channel) {
-		_.pull(channels[server][channel].users, user);
+		_.remove(channels[server][channel].users, { nick: user });
 		this.trigger(channels);
 	},
 
 	removeUserAll: function(user, server) {
 		_.each(channels[server], function(channel) {
-			_.pull(channel.users, user);
+			_.remove(channel.users, { nick: user });
 		});
 		this.trigger(channels);
 	},
 
 	setUsers: function(users, server, channel) {
 		initChannel(server, channel);
-		channels[server][channel].users = users;
+		var chan = channels[server][channel];
+
+		chan.users = [];
+
+		_.each(users, function(user) {
+			loadUser(chan.users, user);
+		});
+
+		sortUsers(server, channel);
 		this.trigger(channels);
 	},
 
@@ -55,12 +112,37 @@ var channelStore = Reflux.createStore({
 		this.trigger(channels);
 	},
 
+	setMode: function(mode) {
+		var user = _.find(channels[mode.server][mode.channel].users, { nick: mode.user });
+		if (user) {
+			_.each(mode.remove, function(mode) {
+				user.mode = user.mode.replace(mode, '');
+			});
+			_.each(mode.add, function(mode) {
+				user.mode += mode;
+			});
+
+			updateRenderName(user);
+			sortUsers(mode.server, mode.channel);
+			this.trigger(channels);
+		}
+	},
+
 	load: function(storedChannels) {
 		_.each(storedChannels, function(channel) {
 			initChannel(channel.server, channel.name);
-			channels[channel.server][channel.name].users = channel.users;
-			channels[channel.server][channel.name].topic = channel.topic;
+			var chan = channels[channel.server][channel.name];
+			
+			chan.users = [];
+			chan.topic = channel.topic;
+
+			_.each(channel.users, function(user) {
+				loadUser(chan.users, user);
+			});
+
+			sortUsers(channel.server, channel.name);
 		});
+
 		this.trigger(channels);
 	},