Break out the sort+render messages logic so it can be fired on visibility change. Closes #1643

2 files changed, 7 insertions, 11 deletions

diff --git a/webroot/js/app.js b/webroot/js/app.js
index 2386958cf..4ad2dacc8 100644
--- a/webroot/js/app.js
+++ b/webroot/js/app.js
@@ -177,7 +177,6 @@ export default class App extends Component {
     this.player.init();
 
     // check routing
-    console.log('==== did mount');
     this.getRoute();
   }
 
diff --git a/webroot/js/components/chat/chat.js b/webroot/js/components/chat/chat.js
index 164dd9dc7..244ed5e29 100644
--- a/webroot/js/components/chat/chat.js
+++ b/webroot/js/components/chat/chat.js
@@ -50,10 +50,6 @@ export default class Chat extends Component {
     this.receivedMessageUpdate = false;
     this.hasFetchedHistory = false;
 
-    // Force render is a state to force the messages to re-render when visibility
-    // changes for messages. This overrides componentShouldUpdate logic.
-    this.forceRender = false;
-
     // Unordered dictionary of messages keyed by ID.
     this.messages = {};
 
@@ -101,10 +97,6 @@ export default class Chat extends Component {
       sortedMessages,
     } = this.state;
 
-    if (this.forceRender) {
-      return true;
-    }
-
     const {
       webSocketConnected: nextSocket,
       chatUserNames: nextUserNames,
@@ -227,7 +219,8 @@ export default class Chat extends Component {
     };
 
     this.messages = updatedMessagesList;
-    this.forceRender = true;
+
+    this.resortAndRenderMessages();
   }
 
   handleChangeModeratorStatus(isModerator) {
@@ -264,12 +257,16 @@ export default class Chat extends Component {
     };
     this.messages = updatedMessagesList;
 
+    this.resortAndRenderMessages();
+  }
+
+  resortAndRenderMessages() {
     // Convert the unordered dictionary of messages to an ordered array.
     // NOTE: This sorts the entire collection of messages on every new message
     // because the order a message comes in cannot be trusted that it's the order
     // it was sent, you need to sort by timestamp. I don't know if there
     // is a  performance problem waiting to occur here for larger chat feeds.
-    var sortedMessages = Object.values(updatedMessagesList)
+    var sortedMessages = Object.values(this.messages)
       // Filter out messages set to not be visible
       .filter((message) => message.visible !== false)
       .sort((a, b) => {