Update scrolling for RHS threads (#2803)

1 files changed, 44 insertions, 32 deletions

diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 499e0e7c3..2398e5e69 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -44,11 +44,9 @@ export default class RhsThread extends React.Component {
         this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
         this.handleResize = this.handleResize.bind(this);
 
-        const state = {};
+        const state = this.getPosts();
         state.windowWidth = Utils.windowWidth();
         state.windowHeight = Utils.windowHeight();
-        state.selected = PostStore.getSelectedPost();
-        state.posts = PostStore.getSelectedPostThread();
         state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
 
         this.state = state;
@@ -59,17 +57,11 @@ export default class RhsThread extends React.Component {
         PreferenceStore.addChangeListener(this.forceUpdateInfo);
         UserStore.addChangeListener(this.onUserChange);
 
-        this.resize();
+        this.scrollToBottom();
         window.addEventListener('resize', this.handleResize);
 
         this.mounted = true;
     }
-    componentDidUpdate() {
-        if ($('.post-right__scroll')[0]) {
-            $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight);
-        }
-        this.resize();
-    }
     componentWillUnmount() {
         PostStore.removeSelectedPostChangeListener(this.onPostChange);
         PostStore.removeChangeListener(this.onPostChange);
@@ -80,8 +72,22 @@ export default class RhsThread extends React.Component {
 
         this.mounted = false;
     }
+    componentDidUpdate(prevProps, prevState) {
+        const prevPostsArray = prevState.postsArray || [];
+        const curPostsArray = this.state.postsArray || [];
+
+        if (prevPostsArray.length >= curPostsArray.length) {
+            return;
+        }
+
+        const curLastPost = curPostsArray[curPostsArray.length - 1];
+
+        if (curLastPost.user_id === UserStore.getCurrentId()) {
+            this.scrollToBottom();
+        }
+    }
     shouldComponentUpdate(nextProps, nextState) {
-        if (!Utils.areObjectsEqual(nextState.posts, this.state.posts)) {
+        if (!Utils.areObjectsEqual(nextState.postsArray, this.state.postsArray)) {
             return true;
         }
 
@@ -112,30 +118,14 @@ export default class RhsThread extends React.Component {
     }
     onPostChange() {
         if (this.mounted) {
-            const selected = PostStore.getSelectedPost();
-            const posts = PostStore.getSelectedPostThread();
-            this.setState({posts, selected});
+            this.setState(this.getPosts());
         }
     }
-    onUserChange() {
-        const profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
-        this.setState({profiles});
-    }
-    resize() {
-        $('.post-right__scroll').parent().scrollTop(100000);
-    }
-    render() {
-        const posts = this.state.posts;
-        const selected = this.state.selected;
-        const profiles = this.state.profiles || {};
+    getPosts() {
+        const selected = PostStore.getSelectedPost();
+        const posts = PostStore.getSelectedPostThread();
 
-        if (posts == null || selected == null) {
-            return (
-                <div></div>
-            );
-        }
-
-        var postsArray = [];
+        const postsArray = [];
 
         for (const id in posts) {
             if (posts.hasOwnProperty(id)) {
@@ -171,6 +161,28 @@ export default class RhsThread extends React.Component {
             return 0;
         });
 
+        return {postsArray, selected};
+    }
+    onUserChange() {
+        const profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
+        this.setState({profiles});
+    }
+    scrollToBottom() {
+        if ($('.post-right__scroll')[0]) {
+            $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight);
+        }
+    }
+    render() {
+        const postsArray = this.state.postsArray;
+        const selected = this.state.selected;
+        const profiles = this.state.profiles || {};
+
+        if (postsArray == null || selected == null) {
+            return (
+                <div></div>
+            );
+        }
+
         var currentId = UserStore.getCurrentId();
         var searchForm;
         if (currentId != null) {