use topic.messages directly instead of creating a copy in this.state

src/views/messages-view.jsx

@@ -84,7 +84,7 @@ class MessagesView extends React.Component {
     this.handleScrollEvent = this.handleScrollEvent.bind(this);
     this.handleDescChange = this.handleDescChange.bind(this);
     this.handleSubsUpdated = this.handleSubsUpdated.bind(this);
-    this.handleNewMessage = this.handleNewMessage.bind(this);
+    this.handleMessageUpdate = this.handleMessageUpdate.bind(this);
     this.handleAllMessagesReceived = this.handleAllMessagesReceived.bind(this);
     this.handleInfoReceipt = this.handleInfoReceipt.bind(this);
     this.handleImagePostview = this.handleImagePostview.bind(this);
@@ -124,7 +124,7 @@ class MessagesView extends React.Component {
   // or vertical shrinking.
   componentDidUpdate(prevProps, prevState) {
     if (this.messagesScroller) {
-      if (prevState.topic != this.state.topic || prevState.messages.length != this.state.messages.length) {
+      if (prevState.topic != this.state.topic || prevState.latestMsgSeq != this.state.latestMsgSeq) {
         // New message
         this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
       } else if (prevProps.viewportHeight > this.props.viewportHeight) {
@@ -140,7 +140,7 @@ class MessagesView extends React.Component {
       }
 
       if (topic) {
-        topic.onData = this.handleNewMessage;
+        topic.onData = this.handleMessageUpdate;
         topic.onAllMessagesReceived = this.handleAllMessagesReceived;
         topic.onInfo = this.handleInfoReceipt;
         topic.onMetaDesc = this.handleDescChange;
@@ -208,7 +208,8 @@ class MessagesView extends React.Component {
     if (!nextProps.topic) {
       // Default state: no topic.
       nextState = {
-        messages: [],
+        latestMsgSeq: -1,
+        latestClearId: -1,
         onlineSubs: [],
         topic: null,
         title: '',
@@ -236,7 +237,6 @@ class MessagesView extends React.Component {
 
       if (topic) {
         // Topic exists.
-        const msgs = [];
         const subs = [];
 
         if (nextProps.connected) {
@@ -247,14 +247,7 @@ class MessagesView extends React.Component {
           });
         }
 
-        topic.messages(function(msg) {
-          if (!msg.deleted) {
-            msgs.push(msg);
-          }
-        });
-
         Object.assign(nextState, {
-          messages: msgs,
           onlineSubs: subs
         });
 
@@ -281,12 +274,15 @@ class MessagesView extends React.Component {
           });
         }
         Object.assign(nextState, {
+          latestMsgSeq: topic.maxMsgSeq(),
+          latestClearId: topic.maxClearId(),
           channel: topic.isChannelType()
         });
       } else {
         // Invalid topic.
         Object.assign(nextState, {
-          messages: [],
+          latestMsgSeq: -1,
+          latestClearId: -1,
           onlineSubs: [],
           title: '',
           avatar: null,
@@ -496,33 +492,32 @@ class MessagesView extends React.Component {
     }
   }
 
-  handleNewMessage(msg) {
-    // Regenerate messages list
+  // The 'msg' could be false-ish if some message ranges were deleted.
+  handleMessageUpdate(msg) {
     const topic = this.props.tinode.getTopic(this.state.topic);
-    const newState = {messages: []};
-    topic.messages((m) => {
-      if (!m.deleted) {
-        newState.messages.push(m);
-      }
-    });
-
-    // msg could be null if one or more messages were deleted.
-    if (msg && !msg.deleted) {
-      // If the message is added to the end of the message list,
-      // scroll to the bottom.
-      if (topic.isNewMessage(msg.seq)) {
-        newState.scrollPosition = 0;
-      }
-
-      // Aknowledge messages except own messages. They are
-      // automatically assumed to be read and recived.
-      const status = topic.msgStatus(msg, true);
-      if (status >= Tinode.MESSAGE_STATUS_SENT && msg.from != this.props.myUserId) {
-        this.postReadNotification(msg.seq);
-      }
-      this.props.onData(msg);
+    if (!msg) {
+      // msg could be null if one or more messages were deleted.
+      // Updating state to force redraw.
+      this.setState({latestClearId: topic.maxClearId()});
+      return;
     }
-    this.setState(newState);
+
+    this.setState({latestMsgSeq: topic.maxMsgSeq()});
+
+    // If the message is added to the end of the message list,
+    // scroll to the bottom.
+    if (topic.isNewMessage(msg.seq)) {
+      this.setState({scrollPosition: 0});
+    }
+
+    // Aknowledge messages except own messages. They are
+    // automatically assumed to be read and recived.
+    const status = topic.msgStatus(msg, true);
+    if (status >= Tinode.MESSAGE_STATUS_SENT && msg.from != this.props.myUserId) {
+      this.postReadNotification(msg.seq);
+    }
+    // This will send "received" notifications right away.
+    this.props.onData(msg);
   }
 
   handleAllMessagesReceived(count) {
@@ -777,7 +772,8 @@ class MessagesView extends React.Component {
   }
 
   handleCancelUpload(seq, uploader) {
-    const found = this.state.messages.find(msg => msg.seq == seq);
+    const topic = this.props.tinode.getTopic(this.state.topic);
+    const found = topic.findMessage(seq);
     if (found) {
       found._cancelled = true;
     }
@@ -828,13 +824,8 @@ class MessagesView extends React.Component {
         let messageNodes = [];
         let previousFrom = null;
         let chatBoxClass = null;
-        for (let i=0; i<this.state.messages.length; i++) {
-          let msg = this.state.messages[i];
-          let nextFrom = null;
-
-          if (i + 1 < this.state.messages.length) {
-            nextFrom = this.state.messages[i+1].from || 'chan';
-          }
+        topic.messages((msg, prev, next, i) => {
+          let nextFrom = next ? (next.from || null) : 'chan';
 
           let sequence = 'single';
           let thisFrom = msg.from || 'chan';
@@ -888,7 +879,7 @@ class MessagesView extends React.Component {
               onCancelUpload={this.handleCancelUpload}
               key={msg.seq} />
           );
-        }
+        });
 
         let lastSeen = null;
         if (isChannel) {

src/widgets/chat-message.jsx

@@ -92,8 +92,10 @@ export default class ChatMessage extends React.Component {
         attachments.push(<Attachment
           tinode={this.props.tinode}
           downloadUrl={Drafty.getDownloadUrl(att)}
-          filename={att.name} uploading={Drafty.isProcessing(att)}
-          mimetype={att.mime} size={Drafty.getEntitySize(att)}
+          filename={att.name}
+          uploading={Drafty.isProcessing(att)}
+          mimetype={att.mime}
+          size={Drafty.getEntitySize(att)}
           progress={this.state.progress}
           onCancelUpload={this.handleCancelUpload}
           onError={this.props.onError}