mereg devel

src/views/messages-view.jsx

@@ -85,7 +85,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);
@@ -125,7 +125,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) {
@@ -141,7 +141,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;
@@ -209,7 +209,8 @@ class MessagesView extends React.Component {
     if (!nextProps.topic) {
       // Default state: no topic.
       nextState = {
-        messages: [],
+        latestMsgSeq: -1,
+        latestClearId: -1,
         onlineSubs: [],
         topic: null,
         title: '',
@@ -240,7 +241,6 @@ class MessagesView extends React.Component {
 
       if (topic) {
         // Topic exists.
-        const msgs = [];
         const subs = [];
 
         if (nextProps.connected) {
@@ -251,14 +251,7 @@ class MessagesView extends React.Component {
           });
         }
 
-        topic.messages(function(msg) {
-          if (!msg.deleted) {
-            msgs.push(msg);
-          }
-        });
-
         Object.assign(nextState, {
-          messages: msgs,
           onlineSubs: subs
         });
 
@@ -285,12 +278,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,
@@ -500,22 +496,22 @@ 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);
-      }
-    });
-
+    if (!msg) {
       // msg could be null if one or more messages were deleted.
-    if (msg && !msg.deleted) {
+      // Updating state to force redraw.
+      this.setState({latestClearId: topic.maxClearId()});
+      return;
+    }
+
+    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)) {
-        newState.scrollPosition = 0;
+      this.setState({scrollPosition: 0});
     }
 
     // Aknowledge messages except own messages. They are
@@ -524,10 +520,9 @@ class MessagesView extends React.Component {
     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);
   }
-    this.setState(newState);
-  }
 
   handleAllMessagesReceived(count) {
     this.setState({fetchingMessages: false});
@@ -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;
     }
@@ -840,13 +836,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';
@@ -900,7 +891,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}

umd/index.dev.js

@@ -2781,7 +2781,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     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);
@@ -2816,7 +2816,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
 
   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) {
         this.messagesScroller.scrollTop = this.messagesScroller.scrollHeight - this.state.scrollPosition;
       } else if (prevProps.viewportHeight > this.props.viewportHeight) {
         this.messagesScroller.scrollTop += prevProps.viewportHeight - this.props.viewportHeight;
@@ -2831,7 +2831,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       }
 
       if (topic) {
-        topic.onData = this.handleNewMessage;
+        topic.onData = this.handleMessageUpdate;
         topic.onAllMessagesReceived = this.handleAllMessagesReceived;
         topic.onInfo = this.handleInfoReceipt;
         topic.onMetaDesc = this.handleDescChange;
@@ -2896,7 +2896,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
 
     if (!nextProps.topic) {
       nextState = {
-        messages: [],
+        latestMsgSeq: -1,
+        latestClearId: -1,
         onlineSubs: [],
         topic: null,
         title: '',
@@ -2926,7 +2927,6 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
       };
 
       if (topic) {
-        const msgs = [];
         const subs = [];
 
         if (nextProps.connected) {
@@ -2937,13 +2937,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
           });
         }
 
-        topic.messages(function (msg) {
-          if (!msg.deleted) {
-            msgs.push(msg);
-          }
-        });
         Object.assign(nextState, {
-          messages: msgs,
           onlineSubs: subs
         });
 
@@ -2972,11 +2966,14 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         }
 
         Object.assign(nextState, {
+          latestMsgSeq: topic.maxMsgSeq(),
+          latestClearId: topic.maxClearId(),
           channel: topic.isChannelType()
         });
       } else {
         Object.assign(nextState, {
-          messages: [],
+          latestMsgSeq: -1,
+          latestClearId: -1,
           onlineSubs: [],
           title: '',
           avatar: null,
@@ -3200,20 +3197,24 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     }
   }
 
-  handleNewMessage(msg) {
+  handleMessageUpdate(msg) {
     const topic = this.props.tinode.getTopic(this.state.topic);
-    const newState = {
-      messages: []
-    };
-    topic.messages(m => {
-      if (!m.deleted) {
-        newState.messages.push(m);
+
+    if (!msg) {
+      this.setState({
+        latestClearId: topic.maxClearId()
+      });
+      return;
     }
+
+    this.setState({
+      latestMsgSeq: topic.maxMsgSeq()
     });
 
-    if (msg && !msg.deleted) {
     if (topic.isNewMessage(msg.seq)) {
-        newState.scrollPosition = 0;
+      this.setState({
+        scrollPosition: 0
+      });
     }
 
     const status = topic.msgStatus(msg, true);
@@ -3225,9 +3226,6 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
     this.props.onData(msg);
   }
 
-    this.setState(newState);
-  }
-
   handleAllMessagesReceived(count) {
     this.setState({
       fetchingMessages: false
@@ -3485,7 +3483,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
   }
 
   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;
@@ -3559,15 +3558,8 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
         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';
 
@@ -3622,8 +3614,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
             onCancelUpload: this.handleCancelUpload,
             key: msg.seq
           }));
-        }
-
+        });
         let lastSeen = null;
 
         if (isChannel) {