PLT-7093/PLT-7096 Updates to new message below indicator (#6912)

* Updates to new message below indicator

* Fixes per feedback

1 files changed, 33 insertions, 14 deletions

diff --git a/webapp/components/post_view/post_list.jsx b/webapp/components/post_view/post_list.jsx
index ba20622f9..c42c62377 100644
--- a/webapp/components/post_view/post_list.jsx
+++ b/webapp/components/post_view/post_list.jsx
@@ -110,7 +110,7 @@ export default class PostList extends React.PureComponent {
             atEnd: false,
             unViewedCount: 0,
             isScrolling: false,
-            lastViewed: Number.MAX_SAFE_INTEGER
+            lastViewed: props.lastViewedAt
         };
     }
 
@@ -146,24 +146,19 @@ export default class PostList extends React.PureComponent {
                 this.hasScrolledToFocusedPost = false;
                 this.hasScrolledToNewMessageSeparator = false;
                 this.atBottom = false;
-                this.setState({atEnd: false});
+                this.setState({atEnd: false, lastViewed: nextProps.lastViewedAt});
 
                 if (nextChannel.id) {
                     this.loadPosts(nextChannel.id);
                 }
-                return;
             }
 
-            if (!this.atBottom && this.props.posts !== nextProps.posts && this.hasScrolledToNewMessageSeparator) {
-                const unViewedCount = nextProps.posts.reduce((count, post) => {
-                    if (post.create_at > this.state.lastViewed &&
-                        post.user_id !== nextProps.currentUserId &&
-                        post.state !== Constants.POST_DELETED) {
-                        return count + 1;
-                    }
-                    return count;
-                }, 0);
-                this.setState({unViewedCount});
+            const nextPosts = nextProps.posts || [];
+            const posts = this.props.posts || [];
+            const hasNewPosts = (posts.length === 0 && nextPosts.length > 0) || (posts.length > 0 && nextPosts.length > 0 && posts[0].id !== nextPosts[0].id);
+
+            if (!this.checkBottom() && hasNewPosts) {
+                this.setUnreadsBelow(nextPosts, nextProps.currentUserId);
             }
         }
     }
@@ -205,6 +200,9 @@ export default class PostList extends React.PureComponent {
         if (messageSeparator && !this.hasScrolledToNewMessageSeparator) {
             const element = ReactDOM.findDOMNode(messageSeparator);
             element.scrollIntoView();
+            if (!this.checkBottom()) {
+                this.setUnreadsBelow(posts, this.props.currentUserId);
+            }
             return;
         } else if (postList && !this.hasScrolledToNewMessageSeparator) {
             postList.scrollTop = postList.scrollHeight;
@@ -244,6 +242,18 @@ export default class PostList extends React.PureComponent {
         }
     }
 
+    setUnreadsBelow = (posts, currentUserId) => {
+        const unViewedCount = posts.reduce((count, post) => {
+            if (post.create_at > this.state.lastViewed &&
+                post.user_id !== currentUserId &&
+                post.state !== Constants.POST_DELETED) {
+                return count + 1;
+            }
+            return count;
+        }, 0);
+        this.setState({unViewedCount});
+    }
+
     handleScrollStop = () => {
         this.setState({
             isScrolling: false
@@ -251,6 +261,15 @@ export default class PostList extends React.PureComponent {
     }
 
     checkBottom = () => {
+        if (!this.refs.postlist) {
+            return false;
+        }
+
+        // No scroll bar so we're at the bottom
+        if (this.refs.postlist.scrollHeight <= this.refs.postlist.clientHeight) {
+            return true;
+        }
+
         return this.refs.postlist.clientHeight + this.refs.postlist.scrollTop >= this.refs.postlist.scrollHeight - CLOSE_TO_BOTTOM_SCROLL_MARGIN;
     }
 
@@ -323,7 +342,7 @@ export default class PostList extends React.PureComponent {
             });
         }
 
-        if (this.atBottom) {
+        if (this.checkBottom()) {
             this.setState({
                 lastViewed: new Date().getTime(),
                 unViewedCount: 0,