Added private messaging to the client

client/src/js/actions/privateChat.js

@@ -0,0 +1,8 @@
+var Reflux = require('reflux');
+
+var privateChatActions = Reflux.createActions([
+	'open',
+	'close'
+]);
+
+module.exports = privateChatActions;

client/src/js/components/ChatTitle.jsx

@@ -25,8 +25,8 @@ var ChatTitle = React.createClass({
 
         if (tab.channel && this.state.channels[tab.server]) {
             var channel = this.state.channels[tab.server][tab.channel];
+            title = tab.channel
             if (channel) {
-                title = tab.channel
                 usercount = channel.users.length;
                 topic = channel.topic || '';
             }

client/src/js/components/TabList.jsx

@@ -3,18 +3,21 @@ var Reflux = require('reflux');
 var _ = require('lodash');
 
 var channelStore = require('../stores/channel');
+var privateChatStore = require('../stores/privateChat');
 var selectedTabStore = require('../stores/selectedTab');
 var tabActions = require('../actions/tab');
 
 var TabList = React.createClass({
 	mixins: [
 		Reflux.connect(channelStore, 'channels'),
+		Reflux.connect(privateChatStore, 'privateChats'),
 		Reflux.connect(selectedTabStore, 'selectedTab')
 	],
 
 	getInitialState: function() {
 		return {
 			channels: channelStore.getState(),
+			privateChats: privateChatStore.getState(),
 			selectedTab: selectedTabStore.getState()
 		};
 	},
@@ -36,6 +39,17 @@ var TabList = React.createClass({
 				return <p className={tabClass} onClick={tabActions.select.bind(null, address, name)}>{name}</p>;
 			});
 
+			_.each(self.state.privateChats[address], function(chat, nick) {
+				if (address === selected.server &&
+					nick === selected.channel) {
+					tabClass = 'selected';
+				} else {
+					tabClass = '';
+				}
+				
+				channels.push(<p className={tabClass} onClick={tabActions.select.bind(null, address, nick)}>{nick}</p>);	
+			});
+
 			if (address === selected.server &&
 				selected.channel === null) {
 				tabClass = 'tab-server selected';

client/src/js/components/UserList.jsx

@@ -2,6 +2,7 @@ var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
 
+var UserListItem = require('../components/UserListItem.jsx');
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
 
@@ -26,7 +27,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.renderName}</p>;
+					return <UserListItem user={user} />;
 				});
 			}
 		}

client/src/js/components/UserListItem.jsx

@@ -0,0 +1,20 @@
+var React = require('react');
+
+var selectedTabStore = require('../stores/selectedTab');
+var privateChatActions = require('../actions/privateChat');
+var tabActions = require('../actions/tab');
+
+var UserListItem = React.createClass({
+	handleClick: function() {
+		var server = selectedTabStore.getServer();
+
+		privateChatActions.open(server, this.props.user.nick);
+		tabActions.select(server, this.props.user.nick);
+	},
+
+	render: function() {
+		return <p onClick={this.handleClick}>{this.props.user.renderName}</p>;
+	}
+});
+
+module.exports = UserListItem;

client/src/js/stores/privateChat.js

@@ -0,0 +1,50 @@
+var Reflux = require('reflux');
+
+var actions = require('../actions/privateChat');
+var messageActions = require('../actions/message');
+
+var privateChats = {};
+
+function initChat(server, nick) {
+	if (!(server in privateChats)) {
+		privateChats[server] = {};
+		privateChats[server][nick] = {};
+
+		return true;
+	} else if (!(nick in privateChats[server])) {
+		privateChats[server][nick] = {};
+
+		return true;
+	}
+	return false;
+}
+
+var privateChatStore = Reflux.createStore({
+	init: function() {
+		this.listenToMany(actions);
+		this.listenTo(messageActions.add, 'messageAdded');
+	},
+
+	open: function(server, nick) {
+		if (initChat(server, nick)) {
+			this.trigger(privateChats);
+		}
+	},
+
+	close: function(server, nick) {
+		delete privateChat[server][nick];
+		this.trigger(privateChats);
+	},
+
+	messageAdded: function(message) {
+		if (!message.to && message.from.indexOf('.') === -1) {
+			this.open(message.server, message.from);
+		}
+	},
+
+	getState: function() {
+		return privateChats;
+	}
+});
+
+module.exports = privateChatStore;

client/src/js/stores/selectedTab.js

@@ -36,6 +36,14 @@ var selectedTabStore = Reflux.createStore({
 		}
 	},
 
+	getServer: function() {
+		return selectedTab.server;
+	},
+
+	getChannel: function() {
+		return selectedTab.channel;
+	},
+
 	getState: function() {
 		return selectedTab;
 	}

client/src/style.css

@@ -140,12 +140,13 @@ p {
 }
 
 .message {
-	padding-left: 50px;
+	margin-bottom: 5px;
-	text-indent: -50px;
+	padding-left: 55px;
+	text-indent: -55px;
 }
 
 .message span {
-	margin-right: 10px;
+	margin-right: 15px;
 }
 
 .message-info {
@@ -182,8 +183,17 @@ p {
 	bottom: 50px;
 	right: 0;
 	width: 200px;
-	padding: 15px;
+	padding: 15px 0px;
 	overflow: auto;
 	border-left: 1px solid #DDD;
 	overflow-x: hidden;
+}
+
+.userlist p {
+	padding: 0px 15px;
+	cursor: pointer;
+}
+
+.userlist p:hover {
+	background: #DDD;
 }