From 07c2010cce92fcc7c3726b1b150bf8096560f116 Mon Sep 17 00:00:00 2001
From: Erik Johnston <erik@matrix.org>
Date: Tue, 8 Jan 2019 11:14:31 +0000
Subject: [PATCH] Use state rather than forceUpdate

---
 src/components/views/rooms/AuxPanel.js | 54 ++++++++++++++++++++------
 1 file changed, 43 insertions(+), 11 deletions(-)

diff --git a/src/components/views/rooms/AuxPanel.js b/src/components/views/rooms/AuxPanel.js
index dd11ee8ad0..48317411c9 100644
--- a/src/components/views/rooms/AuxPanel.js
+++ b/src/components/views/rooms/AuxPanel.js
@@ -62,6 +62,10 @@ module.exports = React.createClass({
         hideAppsDrawer: false,
     },
 
+    getInitialState: function() {
+        return { counters: this._computeCounters() };
+    },
+
     componentDidMount: function() {
         const cli = MatrixClientPeg.get();
         cli.on("RoomState.events", this._rateLimitedUpdate);
@@ -97,10 +101,40 @@ module.exports = React.createClass({
     },
 
     _rateLimitedUpdate: new RateLimitedFunc(function() {
-        /* eslint-disable babel/no-invalid-this */
-        this.forceUpdate();
+        this.setState({counters: this._computeCounters()})
     }, 500),
 
+    _computeCounters: function() {
+        let counters = [];
+
+        if (this.props.room && SettingsStore.isFeatureEnabled("feature_state_counters")) {
+            const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
+            stateEvs.sort((a, b) => {
+                return a.getStateKey() < b.getStateKey();
+            });
+
+            stateEvs.forEach((ev, idx) => {
+                const title = ev.getContent().title;
+                const value = ev.getContent().value;
+                const link = ev.getContent().link;
+                const severity = ev.getContent().severity || "normal";
+                const stateKey = ev.getStateKey();
+
+                if (title && value && severity) {
+                    counters.push({
+                        "title": title,
+                        "value": value,
+                        "link": link,
+                        "severity": severity,
+                        "stateKey": stateKey
+                    })
+                }
+            });
+        }
+
+        return counters;
+    },
+
     render: function() {
         const CallView = sdk.getComponent("voip.CallView");
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
@@ -165,17 +199,15 @@ module.exports = React.createClass({
         />;
 
         let stateViews = null;
-        if (this.props.room && SettingsStore.isFeatureEnabled("feature_state_counters")) {
-            const stateEvs = this.props.room.currentState.getStateEvents('re.jki.counter');
-
+        if (this.state.counters && SettingsStore.isFeatureEnabled("feature_state_counters")) {
             let counters = [];
 
-            stateEvs.forEach((ev, idx) => {
-                const title = ev.getContent().title;
-                const value = ev.getContent().value;
-                const link = ev.getContent().link;
-                const severity = ev.getContent().severity || "normal";
-                const stateKey = ev.getStateKey();
+            this.state.counters.forEach((counter, idx) => {
+                const title = counter.title;
+                const value = counter.value;
+                const link = counter.link;
+                const severity = counter.severity;
+                const stateKey = counter.stateKey;
 
                 if (title && value && severity) {
                     let span = <span>{ title }: { value }</span>