merge next

src/views/messages-view.jsx

@@ -186,16 +186,23 @@ class MessagesView extends React.Component {
 
   getVisibleMessageRange(holderRect) {
     let min = Number.MAX_SAFE_INTEGER, max = -1;
-    this.chatMessageRefs.forEach((ref, seq) => {
+    let visibilityStatus = false;
+    this.chatMessageRefs.every((ref, seq) => {
       if (ref.current) {
         const { top, bottom, height } = ref.current.getBoundingClientRect();
         const visible = top <= holderRect.top ? holderRect.top - top <= height : bottom - holderRect.bottom <= height;
         if (visible) {
+          visibilityStatus = true;
           min = Math.min(min, seq);
           max = Math.max(max, seq);
+        } else if (visibilityStatus) {
+          // The remaining elements are no longer visible, no need to iterate them.
+          return false;
         }
       }
+      return true;
     });
+
     return max >= min ? {min: min, max: max} : {min: 0, max: 0};
   }
 
@@ -274,12 +281,12 @@ class MessagesView extends React.Component {
     }
 
     if (topic) {
-      if ((this.state.topic != prevState.topic) || !prevProps.ready) {
+      if ((this.state.topic != prevState.topic) || (this.props.myUserId && !prevProps.myUserId)) {
         // Don't immediately subscribe to a new p2p topic, wait for the first message.
         const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);
         if (topic.isP2PType() && newTopic && !IMMEDIATE_P2P_SUBSCRIPTION) {
           topic.getMeta(topic.startMetaQuery().withDesc().build());
-        } else {
+        } else if (this.props.myUserId) {
           this.subscribe(topic);
         }
       } else if (topic.isSubscribed() && this.state.isReader && !prevState.isReader) {
@@ -321,7 +328,8 @@ class MessagesView extends React.Component {
         showGoToLastButton: false,
         dragging: false,
         pins: [],
-        selectedPin: 0
+        selectedPin: 0,
+        subsVersion: 0
       };
     } else if (nextProps.topic != prevState.topic) {
       const topic = nextProps.tinode.getTopic(nextProps.topic);
@@ -478,7 +486,6 @@ class MessagesView extends React.Component {
 
     // Is this a new topic?
     const newTopic = (this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic);
-
     // Don't request the tags. They are useless unless the user
     // is the owner and is editing the topic.
     let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub().withAux();
@@ -503,6 +510,9 @@ class MessagesView extends React.Component {
         if (this.state.topic != ctrl.topic) {
           this.setState({topic: ctrl.topic});
         }
+        if (this.state.deleted) {
+          this.setState({deleted: false});
+        }
         this.props.onNewTopicCreated(this.props.topic, ctrl.topic);
         // If there are unsent messages (except hard-failed and video call messages),
         // try sending them now. Hard-failed and unsent video call messages will be dropped.
@@ -576,13 +586,14 @@ class MessagesView extends React.Component {
       showGoToLastButton: (pos > SHOW_GO_TO_LAST_DIST) && (pos < this.state.scrollPosition),
     });
 
-    if (this.state.fetchingMessages) {
+    if (this.state.fetchingMessages || this.processingScrollEvent) {
       return;
     }
 
     if (event.target.scrollTop <= FETCH_PAGE_TRIGGER) {
       const topic = this.props.tinode.getTopic(this.state.topic);
       if (topic && topic.isSubscribed()) {
+        this.processingScrollEvent = true;
         const {min, max} = this.getVisibleMessageRange(event.target.getBoundingClientRect());
         const gaps = topic.msgHasMoreMessages(min, max, false);
         if (gaps.length > 0) {
@@ -594,6 +605,7 @@ class MessagesView extends React.Component {
         }
       }
     }
+    this.processingScrollEvent = false;
   }
 
   /* Mount drag and drop events */
@@ -705,12 +717,12 @@ class MessagesView extends React.Component {
     if (this.state.topic) {
       const subs = [];
       const topic = this.props.tinode.getTopic(this.state.topic);
-      topic.subscribers((sub) => {
+      topic.subscribers(sub => {
         if (sub.online && sub.user != this.props.myUserId) {
           subs.push(sub);
         }
       });
-      const newState = {onlineSubs: subs};
+      const newState = {onlineSubs: subs, subsVersion: this.state.subsVersion + 1};
       const peer = topic.p2pPeerDesc();
       if (peer) {
         Object.assign(newState, {