From d16968d52805a6ff0ec2f8c350b0d79367d18b3f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 25 Oct 2015 01:16:41 +0000
Subject: [PATCH] update badge count in realtime

---
 .../vector/views/organisms/RightPanel.js      | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/views/organisms/RightPanel.js b/src/skins/vector/views/organisms/RightPanel.js
index 41978aafb9..bf10425910 100644
--- a/src/skins/vector/views/organisms/RightPanel.js
+++ b/src/skins/vector/views/organisms/RightPanel.js
@@ -29,6 +29,17 @@ module.exports = React.createClass({
         FileList: 'FileList',
     },
 
+    componentWillMount: function() {
+        var cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
+        }
+    },
+
     getInitialState: function() {
         return {
             phase : this.Phase.MemberList
@@ -49,6 +60,13 @@ module.exports = React.createClass({
         }
     },
 
+    onRoomStateMember: function(ev, state, member) {
+        // redraw the badge on the membership list
+        if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
+            this.forceUpdate();
+        }
+    },
+
     render: function() {
         var MemberList = sdk.getComponent('organisms.MemberList');
         var buttonGroup;
@@ -69,7 +87,6 @@ module.exports = React.createClass({
         if (this.state.phase == this.Phase.MemberList && this.props.roomId) {
             var cli = MatrixClientPeg.get();
             var room = cli.getRoom(this.props.roomId);
-            // FIXME: presumably we need to subscribe to some event to refresh this count when it changes?
             if (room) {
                 membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
             }