merge next

src/views/messages-view.jsx

@@ -98,7 +98,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);
@@ -144,7 +144,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) {
@@ -160,7 +160,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;
@@ -228,7 +228,8 @@ class MessagesView extends React.Component {
     if (!nextProps.topic) {
       // Default state: no topic.
       nextState = {
-        messages: [],
+        latestMsgSeq: -1,
+        latestClearId: -1,
         onlineSubs: [],
         topic: null,
         title: '',
@@ -261,7 +262,6 @@ class MessagesView extends React.Component {
 
       if (topic) {
         // Topic exists.
-        const msgs = [];
         const subs = [];
 
         if (nextProps.connected) {
@@ -272,14 +272,7 @@ class MessagesView extends React.Component {
           });
         }
 
-        topic.messages(function(msg) {
-          if (!msg.deleted) {
-            msgs.push(msg);
-          }
-        });
-
         Object.assign(nextState, {
-          messages: msgs,
           onlineSubs: subs
         });
 
@@ -306,12 +299,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,
@@ -401,10 +397,12 @@ class MessagesView extends React.Component {
           const topic = this.props.tinode.getTopic(this.state.topic);
           if (topic && topic.isSubscribed() && topic.msgHasMoreMessages()) {
             newState.fetchingMessages = true;
-            topic.getMessagesPage(MESSAGES_PAGE).catch((err) => {
-              this.setState({fetchingMessages: false});
-              this.props.onError(err.message, 'err');
-            });
+            topic.getMessagesPage(MESSAGES_PAGE)
+              .then(() => this.setState({fetchingMessages: false}))
+              .catch((err) => {
+                this.setState({fetchingMessages: false});
+                this.props.onError(err.message, 'err');
+              });
           }
         }
         return newState;
@@ -521,33 +519,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) {
@@ -798,7 +795,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;
     }
@@ -1019,13 +1017,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';
@@ -1085,7 +1078,7 @@ class MessagesView extends React.Component {
 
               key={msg.seq} />
           );
-        }
+        });
 
         let lastSeen = null;
         if (isChannel) {