Render UserList with react-virtualized

client/package.json

@@ -12,8 +12,9 @@
     "babel-preset-es2015": "^6.3.13",
     "babel-preset-react": "^6.3.13",
     "babel-preset-stage-0": "^6.3.13",
+    "css-loader": "^0.23.1",
     "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^4.0.0",
+    "eslint-config-airbnb": "^5.0.0",
     "eslint-loader": "^1.2.1",
     "eslint-plugin-react": "^3.16.1",
     "express": "^4.13.4",
@@ -32,7 +33,8 @@
     "redux-devtools": "^3.1.0",
     "redux-devtools-dock-monitor": "^1.0.1",
     "redux-devtools-log-monitor": "^1.0.4",
-    "webpack": "^1.12.12",
+    "style-loader": "^0.13.0",
+    "webpack": "^1.12.13",
     "webpack-dev-middleware": "^1.5.1",
     "webpack-hot-middleware": "^2.6.4"
   },
@@ -41,17 +43,18 @@
     "backo": "^1.1.0",
     "base64-arraybuffer": "^0.1.5",
     "eventemitter2": "^0.4.14",
-    "history": "^2.0.0-rc3",
+    "history": "^2.0.0",
     "immutable": "^3.7.6",
     "lodash": "^4.2.1",
     "pure-render-decorator": "^0.2.0",
     "react": "^0.14.7",
     "react-dom": "^0.14.7",
     "react-infinite": "0.8.0",
-    "react-redux": "^4.2.1",
+    "react-redux": "^4.4.0",
     "react-router": "^2.0.0-rc5",
     "react-router-redux": "^3.0.0",
-    "redux": "^3.2.1",
+    "react-virtualized": "^4.8.1",
+    "redux": "^3.3.0",
     "redux-thunk": "^1.0.3",
     "reselect": "^2.0.3"
   }

client/src/css/style.css

@@ -457,11 +457,6 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   transition: transform .2s;
 }
 
-.userlist > div {
-  overflow-y: auto !important;
-  padding: 10px 0px;
-}
-
 .userlist p {
   padding: 0px 15px;
   cursor: pointer;

client/src/js/components/UserList.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Infinite from 'react-infinite';
+import { VirtualScroll } from 'react-virtualized';
 import pure from 'pure-render-decorator';
 import UserListItem from './UserListItem';
 
@@ -17,20 +17,28 @@ export default class UserList extends Component {
     window.removeEventListener('resize', this.handleResize);
   }
 
+  getRowHeight = index => {
+    if (index === 0 || index === this.props.users.size + 1) {
+      return 10;
+    }
+
+    return 24;
+  };
+
   handleResize = () => {
     this.setState({ height: window.innerHeight - 100 });
   };
 
-  render() {
-    const { tab, openPrivateChat, select, showUserList } = this.props;
-    const className = showUserList ? 'userlist off-canvas' : 'userlist';
-    const users = [];
-    const style = {};
+  renderUser = index => {
+    const { users } = this.props;
 
-    if (!tab.channel) {
-      style.display = 'none';
-    } else {
-      this.props.users.forEach(user => users.push(
+    if (index === 0 || index === users.size + 1) {
+      return <span style={{ height: '10px' }}></span>;
+    }
+
+    const { tab, openPrivateChat, select } = this.props;
+    const user = users.get(index - 1);
+    return (
       <UserListItem
         key={user.nick}
         user={user}
@@ -38,14 +46,26 @@ export default class UserList extends Component {
         openPrivateChat={openPrivateChat}
         select={select}
       />
-      ));
+    );
+  };
+
+  render() {
+    const { tab, showUserList } = this.props;
+    const className = showUserList ? 'userlist off-canvas' : 'userlist';
+    const style = {};
+
+    if (!tab.channel) {
+      style.display = 'none';
     }
 
     return (
       <div className={className} style={style}>
-        <Infinite containerHeight={this.state.height} elementHeight={24}>
-          {users}
-        </Infinite>
+        <VirtualScroll
+          height={this.state.height}
+          rowsCount={this.props.users.size + 2}
+          rowHeight={this.getRowHeight}
+          rowRenderer={this.renderUser}
+        />
       </div>
     );
   }

client/src/js/index.js

@@ -8,6 +8,8 @@ import Socket from './util/Socket';
 import handleSocket from './socket';
 import Root from './containers/Root';
 
+import 'react-virtualized/styles.css';
+
 const host = __DEV__ ? `${window.location.hostname}:1337` : window.location.host;
 const socket = new Socket(host);
 

client/webpack.config.dev.js

@@ -17,7 +17,8 @@ module.exports = {
       { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ }
     ],
     loaders: [
-      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
+      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
+      { test: /\.css$/, loader: 'style!css' }
     ]
   },
   plugins: [

client/webpack.config.prod.js

@@ -15,7 +15,8 @@ module.exports = {
       { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ }
     ],
     loaders: [
-      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
+      { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
+      { test: /\.css$/, loader: 'style!css' }
     ]
   },
   plugins: [