Added nick change handling, the client now shows nick and quit messages, the userlist gets hidden when the chat window is not a channel

client/src/js/actions/channel.js

@@ -9,6 +9,7 @@ var channelActions = Reflux.createActions([
 	'addUser',
 	'removeUser',
 	'removeUserAll',
+	'renameUser',
 	'setUsers',
 	'setTopic',
 	'setMode',
@@ -41,6 +42,10 @@ socket.on('quit', function(data) {
 	channelActions.removeUserAll(data.user, data.server);
 });
 
+socket.on('nick', function(data) {
+	channelActions.renameUser(data.old, data.new, data.server);
+});
+
 socket.on('users', function(data) {
 	channelActions.setUsers(data.users, data.server, data.channel);
 });

client/src/js/actions/message.js

@@ -5,7 +5,8 @@ var socket = require('../socket');
 
 var messageActions = Reflux.createActions([
 	'send',
-	'add'
+	'add',
+	'broadcast'
 ]);
 
 messageActions.send.preEmit = function(message, to, server) {
@@ -44,6 +45,14 @@ socket.on('part', function(data) {
 	});
 });
 
+socket.on('quit', function(data) {
+	messageActions.broadcast(data.user + ' has quit', data.server);
+});
+
+socket.on('nick', function(data) {
+	messageActions.broadcast(data.old + ' changed nick to ' + data.new, data.server);
+});
+
 socket.on('motd', function(data) {
 	_.each(data.content.split('\n'), function(line) {
 		messageActions.add({

client/src/js/components/UserList.jsx

@@ -2,7 +2,7 @@ var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
 
-var UserListItem = require('../components/UserListItem.jsx');
+var UserListItem = require('./UserListItem.jsx');
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
 
@@ -23,6 +23,12 @@ var UserList = React.createClass({
 		var users = null;
 		var tab = this.state.selectedTab;
 
+		var style = {};
+
+		if (!tab.channel || tab.channel[0] !== '#') {
+			style.display = 'none';
+		}
+
 		if (tab.channel && this.state.channels[tab.server]) {
 			var channel = this.state.channels[tab.server][tab.channel];
 			if (channel) {
@@ -33,7 +39,7 @@ var UserList = React.createClass({
 		}
 
 		return (
-			<div className="userlist">{users}</div>
+			<div className="userlist" style={style}>{users}</div>
 		);
 	}
 });

client/src/js/stores/channel.js

@@ -110,6 +110,18 @@ var channelStore = Reflux.createStore({
 		this.trigger(channels);
 	},
 
+	renameUser: function(oldNick, newNick, server) {
+		_.each(channels[server], function(channel, channelName) {
+			var user = _.find(channel.users, { nick: oldNick });
+			if (user) {
+				user.nick = newNick;
+				updateRenderName(user);
+				sortUsers(server, channelName);
+			}
+		});
+		this.trigger(channels);
+	},
+
 	setUsers: function(users, server, channel) {
 		initChannel(server, channel);
 		var chan = channels[server][channel];
@@ -170,6 +182,10 @@ var channelStore = Reflux.createStore({
 		}
 	},
 
+	getChannels: function(server) {
+		return channels[server];
+	},
+
 	getState: function() {
 		return channels;
 	}

client/src/js/stores/message.js

@@ -1,6 +1,8 @@
 var Reflux = require('reflux');
+var _ = require('lodash');
 
 var serverStore = require('./server');
+var channelStore = require('./channel');
 var actions = require('../actions/message');
 
 var messages = {};
@@ -45,6 +47,20 @@ var messageStore = Reflux.createStore({
 		this.trigger(messages);
 	},
 
+	broadcast: function(message, server) {
+		_.each(channelStore.getChannels(server), function(channel, channelName) {
+			addMessage({
+				server: server,
+				from: '',
+				to: channelName,
+				message: message,
+				type: 'info',
+				time: new Date()
+			}, channelName);
+		});
+		this.trigger(messages);
+	},
+
 	getState: function() {
 		return messages;
 	}