Render userlist with react-infinite

client/src/js/app.js

@@ -12,7 +12,6 @@ var Chat = require('./components/Chat.jsx');
 var Settings = require('./components/Settings.jsx');
 
 var uuid = localStorage.uuid || (localStorage.uuid = util.UUID());
-var nick = 'test' + Math.floor(Math.random() * 99999);
 
 socket.on('connect', function() {
 	socket.send('uuid', uuid);

client/src/js/components/UserList.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
+var Infinite = require('react-infinite');
 
 var UserListItem = require('./UserListItem.jsx');
 var channelStore = require('../stores/channel');
@@ -15,12 +16,20 @@ var UserList = React.createClass({
 	getInitialState: function() {
 		return {
 			channels: channelStore.getState(),
-			selectedTab: selectedTabStore.getState()
+			selectedTab: selectedTabStore.getState(),
+			height: window.innerHeight - 100
 		};
 	},
 
+	componentDidMount: function() {
+		var self = this;
+		window.addEventListener('resize', function() {
+			self.setState({ height: window.innerHeight - 100 });
+		});
+	},
+
 	render: function() {
-		var users = null;
+		var users = [];
 		var tab = this.state.selectedTab;
 		var style = {};
 
@@ -33,7 +42,11 @@ var UserList = React.createClass({
 		}
 
 		return (
-			<div className="userlist" style={style}>{users}</div>
+			<div className="userlist" style={style}>
+				<Infinite containerHeight={this.state.height} elementHeight={24}>
+					{users}
+				</Infinite>
+			</div>
 		);
 	}
 });

client/src/js/stores/channel.js

@@ -108,7 +108,7 @@ var channelStore = Reflux.createStore({
 
 	removeUserAll: function(user, server) {
 		_.each(channels[server], function(channel) {
-			_.remove(channel.users, { nick: user });
+			_.remove(channel.users, { nick: user });
 		});
 		this.trigger(channels);
 	},

client/src/style.css

@@ -243,10 +243,11 @@ p {
 	bottom: 50px;
 	right: 0;
 	width: 200px;
-	padding: 15px 0px;
-	overflow: auto;
 	border-left: 1px solid #DDD;
-	overflow-x: hidden;
+}
+
+.userlist > div {
+	padding: 15px 0px;
 }
 
 .userlist p {