From fddb0cf2fba350dea6d75acac3cba5abff7a449c Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 8 Aug 2019 15:50:37 -0400
Subject: [PATCH] MM-17562 scroll to new message line indicator on
 componentDidUpdate (#3074)

* MM-17562 scroll to new message line indicator on componentDidUpdate

* feedback review

* Cancel animation frame requests
---
 app/components/post_list/post_list.js | 59 ++++++++++++++++-----------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index c2209ec04..b1e69f432 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -100,6 +100,7 @@ export default class PostList extends PureComponent {
         if (this.props.channelId !== nextProps.channelId) {
             this.contentOffsetY = 0;
             this.hasDoneInitialScroll = false;
+            this.setState({contentHeight: 0});
         }
     }
 
@@ -115,10 +116,22 @@ export default class PostList extends PureComponent {
             this.scrollToBottom();
             this.shouldScrollToBottom = false;
         }
+
+        if (!this.hasDoneInitialScroll && this.props.initialIndex > 0 && this.state.contentHeight) {
+            this.scrollToInitialIndexIfNeeded(this.props.initialIndex);
+        }
     }
 
     componentWillUnmount() {
         EventEmitter.off('scroll-to-bottom', this.handleSetScrollToBottom);
+
+        if (this.animationFrameIndexFailed) {
+            cancelAnimationFrame(this.animationFrameIndexFailed);
+        }
+
+        if (this.animationFrameInitialIndex) {
+            cancelAnimationFrame(this.animationFrameInitialIndex);
+        }
     }
 
     handleClosePermalink = () => {
@@ -128,12 +141,12 @@ export default class PostList extends PureComponent {
     };
 
     handleContentSizeChange = (contentWidth, contentHeight) => {
-        this.scrollToInitialIndexIfNeeded(contentWidth, contentHeight);
-
-        if (this.state.postListHeight && contentHeight < this.state.postListHeight && this.props.extraData) {
-            // We still have less than 1 screen of posts loaded with more to get, so load more
-            this.props.onLoadMoreUp();
-        }
+        this.setState({contentHeight}, () => {
+            if (this.state.postListHeight && contentHeight < this.state.postListHeight && this.props.extraData) {
+                // We still have less than 1 screen of posts loaded with more to get, so load more
+                this.props.onLoadMoreUp();
+            }
+        });
     };
 
     handleDeepLink = (url) => {
@@ -201,8 +214,12 @@ export default class PostList extends PureComponent {
     };
 
     handleScrollToIndexFailed = () => {
-        this.hasDoneInitialScroll = false;
-        this.scrollToInitialIndexIfNeeded(1, 1);
+        this.animationFrameIndexFailed = requestAnimationFrame(() => {
+            if (this.props.initialIndex > 0 && this.state.contentHeight > 0) {
+                this.hasDoneInitialScroll = false;
+                this.scrollToInitialIndexIfNeeded(this.props.initialIndex);
+            }
+        });
     };
 
     handleSetScrollToBottom = () => {
@@ -284,23 +301,17 @@ export default class PostList extends PureComponent {
         }, 250);
     };
 
-    scrollToInitialIndexIfNeeded = (width, height) => {
-        if (
-            width > 0 &&
-            height > 0 &&
-            !this.hasDoneInitialScroll
-        ) {
-            requestAnimationFrame(() => {
-                if (this.props.initialIndex > 0 && this.flatListRef?.current) {
-                    this.flatListRef.current.scrollToIndex({
-                        animated: false,
-                        index: this.props.initialIndex,
-                        viewOffset: 0,
-                        viewPosition: 1, // 0 is at bottom
-                    });
-                }
-            });
+    scrollToInitialIndexIfNeeded = (index) => {
+        if (!this.hasDoneInitialScroll && this.flatListRef?.current) {
             this.hasDoneInitialScroll = true;
+            this.animationFrameInitialIndex = requestAnimationFrame(() => {
+                this.flatListRef.current.scrollToIndex({
+                    animated: false,
+                    index,
+                    viewOffset: 0,
+                    viewPosition: 1, // 0 is at bottom
+                });
+            });
         }
     };