Cleaned TabList up by pulling stuff out into TabListItem, userlist resize listener gets removed on unmount

client/src/js/components/ChatTitle.jsx

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

client/src/js/components/MessageBox.jsx

@@ -34,25 +34,22 @@ var MessageBox = React.createClass({
 	render: function() {
 		var tab = this.state.selectedTab;
 		var dest = tab.channel || tab.server;
-		var messages;
 
-		if (this.state.messages[tab.server] && dest) {
+		var messages = _.map(messageStore.getMessages(tab.server, dest), function(message) {
-			messages = _.map(this.state.messages[tab.server][dest], function(message) {
+			var messageClass = 'message';
-				var messageClass = 'message';
 
-				if (message.type) {
+			if (message.type) {
-					messageClass += ' message-' + message.type;
+				messageClass += ' message-' + message.type;
-				}
+			}
 
-				return (
+			return (
-					<p className={messageClass}>
+				<p className={messageClass}>
-						<span className="message-time">{util.timestamp(message.time)}</span>
+					<span className="message-time">{util.timestamp(message.time)}</span>
-						{ message.from ? <span className="message-sender">{message.from}</span> : null }
+					{ message.from ? <span className="message-sender">{message.from}</span> : null }
-						{message.message}
+					{message.message}
-					</p>
+				</p>
-				);
+			);
-			});
+		});
-		}
 		
 		return (
 			<div className="messagebox">{messages}</div>

client/src/js/components/TabList.jsx

@@ -2,27 +2,24 @@ var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
 
+var TabListItem = require('./TabListItem.jsx');
 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');
 var routeActions = require('../actions/route');
 
 var TabList = React.createClass({
 	mixins: [
+		Reflux.connect(serverStore, 'servers'),
 		Reflux.connect(channelStore, 'channels'),
-		Reflux.connect(privateChatStore, 'privateChats'),
+		Reflux.connect(privateChatStore, 'privateChats')
-		Reflux.connect(selectedTabStore, 'selectedTab'),
-		Reflux.connect(serverStore, 'servers')
 	],
 
 	getInitialState: function() {
 		return {
+			servers: serverStore.getState(),
 			channels: channelStore.getState(),
-			privateChats: privateChatStore.getState(),
+			privateChats: privateChatStore.getState()
-			selectedTab: selectedTabStore.getState(),
-			servers: serverStore.getState()
 		};
 	},
 
@@ -36,60 +33,37 @@ var TabList = React.createClass({
 
 	render: function() {
 		var self = this;
-		var tabClass;
-		var selected = this.state.selectedTab;
 
 		var tabs = _.map(this.state.channels, function(server, address) {
-			var channels = _.map(server, function(channel, name) {				
+			var serverTabs = _.map(server, function(channel, name) {
-				if (address === selected.server &&
-					name === selected.channel) {
-					tabClass = 'selected';
-				} else {
-					tabClass = '';
-				}
-
 				return (
-					<p 
+					<TabListItem 
-						className={tabClass} 
+						server={address} 
-						onClick={tabActions.select.bind(null, address, name)}>
+						channel={name}
-							{name}
+						name={name}>
-					</p>
+					</TabListItem>
 				);
 			});
 
 			_.each(self.state.privateChats[address], function(chat, nick) {
-				if (address === selected.server &&
+				serverTabs.push(
-					nick === selected.channel) {
+					<TabListItem 
-					tabClass = 'selected';
+						server={address} 
-				} else {
+						channel={nick}
-					tabClass = '';
+						name={nick}>
-				}
+					</TabListItem>
-
-				channels.push(
-					<p 
-						className={tabClass} 
-						onClick={tabActions.select.bind(null, address, nick)}>
-							{nick}
-					</p>
 				);	
 			});
 
-			if (address === selected.server &&
+			serverTabs.unshift(
-				selected.channel === null) {
+				<TabListItem 
-				tabClass = 'tab-server selected';
+					server={address} 
-			} else {
+					channel={null}
-				tabClass = 'tab-server';
+					name={serverStore.getName(address)}>
-			}
+				</TabListItem>
-
-			channels.unshift(
-				<p 
-					className={tabClass} 
-					onClick={tabActions.select.bind(null, address, null)}>
-						{serverStore.getName(address)}
-				</p>
 			);
 
-			return channels;
+			return serverTabs;
 		});
 
 		return (

client/src/js/components/TabListItem.jsx

@@ -0,0 +1,41 @@
+var React = require('react');
+var Reflux = require('reflux');
+
+var selectedTabStore = require('../stores/selectedTab');
+var tabActions = require('../actions/tab');
+
+var TabListItem = React.createClass({
+	mixins: [
+		Reflux.connect(selectedTabStore, 'selectedTab')
+	],
+
+	getInitialState: function() {
+		return {
+			selectedTab: selectedTabStore.getState()
+		};
+	},
+
+	handleClick: function() {
+		tabActions.select(this.props.server, this.props.channel);
+	},
+
+	render: function() {
+		var selected = this.state.selectedTab;
+		var classes = [];
+
+		if (!this.props.channel) {
+			classes.push('tab-server');
+		}
+
+		if (this.props.server === selected.server &&
+			this.props.channel === selected.channel) {
+			classes.push('selected');
+		}
+
+		return (
+			<p className={classes.join(' ')} onClick={this.handleClick}>{this.props.name}</p>
+		);
+	}
+});
+
+module.exports = TabListItem;

client/src/js/components/UserList.jsx

@@ -22,10 +22,15 @@ var UserList = React.createClass({
 	},
 
 	componentDidMount: function() {
-		var self = this;
+		window.addEventListener('resize', this.handleResize);
-		window.addEventListener('resize', function() {
+	},
-			self.setState({ height: window.innerHeight - 100 });
+
-		});
+	componentWillUnmount: function() {
+		window.removeEventListener('resize', this.handleResize);
+	},
+
+	handleResize: function() {
+		this.setState({ height: window.innerHeight - 100 });
 	},
 
 	render: function() {

client/src/js/stores/message.js

@@ -77,6 +77,13 @@ var messageStore = Reflux.createStore({
 		this.trigger(messages);
 	},
 
+	getMessages: function(server, dest) {
+		if (messages[server] && messages[server][dest]) {
+			return messages[server][dest];
+		}
+		return [];
+	},
+
 	getState: function() {
 		return messages;
 	}