Make ChatTitle and UserList render functions pure

client/gulpfile.js

@@ -100,7 +100,7 @@ gulp.task('bindata', ['gzip'], function(cb) {
 gulp.task('gzip:watch', function() {
     return gulp.src('dist/**/*.{html,css,js}')
         .pipe(gzip())
-        .pipe(gulp.dest('dist'));
+        .pipe(gulp.dest('dist/gz'));
 });
 
 gulp.task('bindata:watch', ['gzip:watch'], function(cb) {

client/src/js/components/ChatTitle.jsx

@@ -10,17 +10,25 @@ var privateChatActions = require('../actions/privateChat');
 
 var ChatTitle = React.createClass({
     mixins: [
-        Reflux.connect(channelStore, 'channels'),
+        Reflux.listenTo(channelStore, 'channelsChanged'),
         Reflux.connect(selectedTabStore, 'selectedTab')
     ],
 
     getInitialState: function() {
+        var tab = selectedTabStore.getState();
+
         return {
-            channels: channelStore.getState(),
-            selectedTab: selectedTabStore.getState()
+            usercount: channelStore.getUsers(tab.server, tab.channel).length,
+            selectedTab: tab
         };
     },
 
+    channelsChanged: function() {
+        var tab = this.state.selectedTab;
+        
+        this.setState({ usercount: channelStore.getUsers(tab.server, tab.channel).length });
+    },
+
     handleLeaveClick: function() {
         var tab = this.state.selectedTab;
 
@@ -35,7 +43,6 @@ var ChatTitle = React.createClass({
 
     render: function() {
         var tab = this.state.selectedTab;
-        var usercount = channelStore.getUsers(tab.server, tab.channel).length;
         var leaveTitle;
 
         if (!tab.channel) {
@@ -58,7 +65,7 @@ var ChatTitle = React.createClass({
                 </div>
                 <div className="userlist-bar">
                     <i className="icon-user"></i>
-                    <span className="chat-usercount">{usercount || null}</span>
+                    <span className="chat-usercount">{this.state.usercount || null}</span>
                 </div>
             </div>
         );

client/src/js/components/UserList.jsx

@@ -9,14 +9,16 @@ var selectedTabStore = require('../stores/selectedTab');
 
 var UserList = React.createClass({
 	mixins: [
-		Reflux.connect(channelStore, 'channels'),
+		Reflux.listenTo(channelStore, 'channelsChanged'),
 		Reflux.connect(selectedTabStore, 'selectedTab')
 	],
 
 	getInitialState: function() {
+		var tab = selectedTabStore.getState();
+
 		return {
-			channels: channelStore.getState(),
-			selectedTab: selectedTabStore.getState(),
+			users: channelStore.getUsers(tab.server, tab.channel),
+			selectedTab: tab,
 			height: window.innerHeight - 100
 		};
 	},
@@ -29,19 +31,25 @@ var UserList = React.createClass({
 		window.removeEventListener('resize', this.handleResize);
 	},
 
+	channelsChanged: function() {
+		var tab = this.state.selectedTab;
+
+		this.setState({ users: channelStore.getUsers(tab.server, tab.channel) });
+	},
+
 	handleResize: function() {
 		this.setState({ height: window.innerHeight - 100 });
 	},
 
 	render: function() {
-		var users = [];
 		var tab = this.state.selectedTab;
+		var users = [];
 		var style = {};
 
 		if (!tab.channel || tab.channel[0] !== '#') {
 			style.display = 'none';
 		} else {
-			users = _.map(channelStore.getUsers(tab.server, tab.channel), (user) => {
+			users = _.map(this.state.users, (user) => {
 				return <UserListItem key={user.nick} user={user} />;
 			});
 		}