From c4e7a622d23519909ec9d729d735c3035d86c932 Mon Sep 17 00:00:00 2001
From: Chris Duarte <csduarte@users.noreply.github.com>
Date: Wed, 7 Feb 2018 08:03:58 -0800
Subject: [PATCH] Fix onLayoutCalled issue and improve accuracy (#1401)

---
 app/components/post_list/post_list.js   | 28 ++++++++++---------------
 app/components/post_list/with_layout.js |  8 ++++++-
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 2337b89b0..391f3195a 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -26,6 +26,8 @@ const NewMessagesDividerWithLayout = withLayout(NewMessagesDivider);
 const PostWithLayout = withLayout(Post);
 
 const INITAL_BATCH_TO_RENDER = 15;
+const NEW_MESSAGES_HEIGHT = 28;
+const DATE_HEADER_HEIGHT = 28;
 
 export default class PostList extends PureComponent {
     static propTypes = {
@@ -80,14 +82,12 @@ export default class PostList extends PureComponent {
         if (this.props.channelId !== nextProps.channelId) {
             this.itemMeasurements = {};
             this.newMessageScrolledTo = false;
+            this.scrollToBottomOffset();
         }
     }
 
-    componentDidUpdate(prevProps) {
-        const initialPosts = !prevProps.postIds.length && prevProps.postIds !== this.props.postIds;
-        if ((prevProps.channelId !== this.props.channelId || initialPosts) && this.refs.list) {
-            this.scrollToBottomOffset();
-        } else if ((this.props.measureCellLayout || this.props.isSearchResult) && this.state.scrollToMessage) {
+    componentDidUpdate() {
+        if ((this.props.measureCellLayout || this.props.isSearchResult) && this.state.scrollToMessage) {
             this.scrollListToMessageOffset();
         }
     }
@@ -110,17 +110,13 @@ export default class PostList extends PureComponent {
     }
 
     scrollListToMessageOffset = () => {
-        const index = this.moreNewMessages ? this.props.postIds.length : this.newMessagesIndex;
+        const index = this.moreNewMessages ? this.props.postIds.length - 1 : this.newMessagesIndex;
         if (index !== -1) {
-            let offset = this.getMeasurementOffset(index);
+            const offset = this.getMeasurementOffset(index);
 
             const windowHeight = this.state.postListHeight;
-            if (index !== this.props.postIds.length - 1) {
-                if (offset < windowHeight) {
-                    return; // no need to scroll since item is in view
-                } else if (offset > windowHeight) {
-                    offset = (offset - (windowHeight / 2)) + this.itemMeasurements[index];
-                }
+            if (index !== this.props.postIds.length - 1 && offset < windowHeight) {
+                return; // post is already in view, no need to scroll.
             }
 
             InteractionManager.runAfterInteractions(() => {
@@ -191,13 +187,12 @@ export default class PostList extends PureComponent {
             // needs to be added to the index for the length check to be correct.
             this.moreNewMessages = this.props.postIds.length === index + 2;
 
+            this.itemMeasurements[index] = NEW_MESSAGES_HEIGHT;
             return (
                 <NewMessagesDividerWithLayout
                     index={index}
-                    onLayoutCalled={this.measureItem}
                     theme={this.props.theme}
                     moreMessages={this.moreNewMessages}
-                    shouldCallOnLayout={this.props.measureCellLayout && !this.newMessageScrolledTo}
                 />
             );
         } else if (item.indexOf(DATE_LINE) === 0) {
@@ -216,12 +211,11 @@ export default class PostList extends PureComponent {
     };
 
     renderDateHeader = (date, index) => {
+        this.itemMeasurements[index] = DATE_HEADER_HEIGHT;
         return (
             <DateHeaderWithLayout
                 date={date}
                 index={index}
-                onLayoutCalled={this.measureItem}
-                shouldCallOnLayout={this.props.measureCellLayout && !this.newMessageScrolledTo}
             />
         );
     };
diff --git a/app/components/post_list/with_layout.js b/app/components/post_list/with_layout.js
index 562ec6a90..149765bf1 100644
--- a/app/components/post_list/with_layout.js
+++ b/app/components/post_list/with_layout.js
@@ -5,14 +5,20 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 
+import {emptyFunction} from 'app/utils/general';
+
 function withLayout(WrappedComponent) {
     return class WithLayoutComponent extends PureComponent {
         static propTypes = {
             index: PropTypes.number.isRequired,
-            onLayoutCalled: PropTypes.func.isRequired,
+            onLayoutCalled: PropTypes.func,
             shouldCallOnLayout: PropTypes.bool
         };
 
+        static defaultProps = {
+            onLayoutCalled: emptyFunction
+        }
+
         onLayout = (event) => {
             const {height} = event.nativeEvent.layout;
             this.props.onLayoutCalled(this.props.index, height);