Added IRC network naming, added some convenience getters to the stores

client/package.json

@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "lodash": "3.0.0",
-    "reflux": "~0.2.2",
+    "reflux": "0.2.4",
     "react-router": "~0.11.6",
     "react": "~0.12.2"
   }

client/src/js/actions/server.js

@@ -8,12 +8,13 @@ var serverActions = Reflux.createActions([
 	'load'
 ]);
 
-serverActions.connect.preEmit = function(server, nick, username, tls) {
+serverActions.connect.preEmit = function(server, nick, username, tls, name) {
 	socket.send('connect', {
 		server: server,
 		nick: nick,
 		username: username,
-		tls: tls || false
+		tls: tls || false,
+		name: name || server
 	});
 };
 

client/src/js/app.js

@@ -14,8 +14,8 @@ var nick = 'test' + Math.floor(Math.random() * 99999);
 socket.on('connect', function() {
 	socket.send('uuid', uuid);
 
-	serverActions.connect('irc.freenode.net', nick, 'username', true);
-	serverActions.connect('irc.quakenet.org', nick, 'username');
+	serverActions.connect('irc.freenode.net', nick, 'username', true, 'Freenode');
+	serverActions.connect('irc.quakenet.org', nick, 'username', false, 'QuakeNet');
 
 	channelActions.join(['#stuff'], 'irc.freenode.net');
 	channelActions.join(['#herp'], 'irc.quakenet.org');

client/src/js/components/ChatTitle.jsx

@@ -19,25 +19,21 @@ var ChatTitle = React.createClass({
 
     render: function() {
         var tab = this.state.selectedTab;
-        var title;
         var topic;
         var usercount;
 
         if (tab.channel && this.state.channels[tab.server]) {
             var channel = this.state.channels[tab.server][tab.channel];
-            title = tab.channel
             if (channel) {
                 usercount = channel.users.length;
                 topic = channel.topic || '';
             }
-        } else {
-            title = tab.server;
         }
 
         return (
             <div className="chat-title-bar">
                 <div>
-                    <span className="chat-title">{title}</span>
+                    <span className="chat-title">{tab.name}</span>
                     <span className="chat-topic" title={topic}>{topic}</span>
                 </div>
                 <span className="chat-usercount">{usercount}</span>

client/src/js/components/TabList.jsx

@@ -4,6 +4,7 @@ var _ = require('lodash');
 
 var channelStore = require('../stores/channel');
 var privateChatStore = require('../stores/privateChat');
+var serverStore = require('../stores/server');
 var selectedTabStore = require('../stores/selectedTab');
 var tabActions = require('../actions/tab');
 
@@ -11,14 +12,16 @@ var TabList = React.createClass({
 	mixins: [
 		Reflux.connect(channelStore, 'channels'),
 		Reflux.connect(privateChatStore, 'privateChats'),
-		Reflux.connect(selectedTabStore, 'selectedTab')
+		Reflux.connect(selectedTabStore, 'selectedTab'),
+		Reflux.connect(serverStore, 'servers')
 	],
 
 	getInitialState: function() {
 		return {
 			channels: channelStore.getState(),
 			privateChats: privateChatStore.getState(),
-			selectedTab: selectedTabStore.getState()
+			selectedTab: selectedTabStore.getState(),
+			servers: serverStore.getState()
 		};
 	},
 
@@ -36,7 +39,13 @@ var TabList = React.createClass({
 					tabClass = '';
 				}
 
-				return <p className={tabClass} onClick={tabActions.select.bind(null, address, name)}>{name}</p>;
+				return (
+					<p 
+						className={tabClass} 
+						onClick={tabActions.select.bind(null, address, name)}>
+							{name}
+					</p>
+				);
 			});
 
 			_.each(self.state.privateChats[address], function(chat, nick) {
@@ -46,8 +55,14 @@ var TabList = React.createClass({
 				} else {
 					tabClass = '';
 				}
-				
-				channels.push(<p className={tabClass} onClick={tabActions.select.bind(null, address, nick)}>{nick}</p>);	
+
+				channels.push(
+					<p 
+						className={tabClass} 
+						onClick={tabActions.select.bind(null, address, nick)}>
+							{nick}
+					</p>
+				);	
 			});
 
 			if (address === selected.server &&
@@ -57,7 +72,13 @@ var TabList = React.createClass({
 				tabClass = 'tab-server';
 			}
 
-			channels.unshift(<p className={tabClass} onClick={tabActions.select.bind(null, address, null)}>{address}</p>);
+			channels.unshift(
+				<p 
+					className={tabClass} 
+					onClick={tabActions.select.bind(null, address, null)}>
+						{serverStore.getName(address)}
+				</p>
+			);
 
 			return channels;
 		});

client/src/js/components/UserList.jsx

@@ -22,20 +22,14 @@ var UserList = React.createClass({
 	render: function() {
 		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) {
-				users = _.map(channel.users, function(user) {
-					return <UserListItem user={user} />;
-				});
-			}
+		} else {
+			users = _.map(channelStore.getUsers(tab.server, tab.channel), function(user) {
+				return <UserListItem key={user.nick} user={user} />;
+			});
 		}
 
 		return (

client/src/js/stores/channel.js

@@ -186,6 +186,13 @@ var channelStore = Reflux.createStore({
 		return channels[server];
 	},
 
+	getUsers: function(server, channel) {
+		if (channels[server] && channels[server][channel]) {
+			return channels[server][channel].users;
+		}
+		return [];
+	},
+
 	getState: function() {
 		return channels;
 	}

client/src/js/stores/selectedTab.js

@@ -1,6 +1,7 @@
 var Reflux = require('reflux');
 var _ = require('lodash');
 
+var serverStore = require('./server');
 var actions = require('../actions/tab');
 var channelActions = require('../actions/channel');
 
@@ -20,6 +21,13 @@ var selectedTabStore = Reflux.createStore({
 	select: function(server, channel) {
 		selectedTab.server = server;
 		selectedTab.channel = channel;
+
+		if (channel) {
+			selectedTab.name = channel;
+		} else {
+			selectedTab.name = serverStore.getName(server);
+		}
+
 		this.trigger(selectedTab);
 	},
 
@@ -49,8 +57,8 @@ var selectedTabStore = Reflux.createStore({
 	}
 });
 
-selectedTabStore.listen(function(selected) {
-	localStorage.selectedTab = JSON.stringify(selected);
+selectedTabStore.listen(function(selectedTab) {
+	localStorage.selectedTab = JSON.stringify(selectedTab);
 });
 
 module.exports = selectedTabStore;

client/src/js/stores/server.js

@@ -10,11 +10,12 @@ var serverStore = Reflux.createStore({
 		this.listenToMany(actions);
 	},
 
-	connect: function(server, nick, username) {
+	connect: function(server, nick, username, tls, name) {
 		servers[server] = {
 			address: server,
 			nick: nick,
-			username: username
+			username: username,
+			name: name || server
 		};
 		this.trigger(servers);
 	},
@@ -30,6 +31,13 @@ var serverStore = Reflux.createStore({
 		return servers[server].nick;
 	},
 
+	getName: function(server) {
+		if (servers[server]) {
+			return servers[server].name;
+		}
+		return null;
+	},
+
 	getState: function() {
 		return servers;
 	}