From 1a8998208745182e2331b793c5dcb134e7e668dc Mon Sep 17 00:00:00 2001
From: Stan Chan <stanchan@users.noreply.github.com>
Date: Tue, 6 Mar 2018 12:41:56 -0800
Subject: [PATCH] Fix scroll to new message (#1475)

---
 app/components/post_list/post_list.js | 32 +++++++++++++++++++--------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/app/components/post_list/post_list.js b/app/components/post_list/post_list.js
index 7e863d40f..4d8a9d657 100644
--- a/app/components/post_list/post_list.js
+++ b/app/components/post_list/post_list.js
@@ -21,8 +21,6 @@ import LoadMorePosts from './load_more_posts';
 import NewMessagesDivider from './new_messages_divider';
 import withLayout from './with_layout';
 
-const DateHeaderWithLayout = withLayout(DateHeader);
-const NewMessagesDividerWithLayout = withLayout(NewMessagesDivider);
 const PostWithLayout = withLayout(Post);
 
 const INITAL_BATCH_TO_RENDER = 15;
@@ -105,20 +103,36 @@ export default class PostList extends PureComponent {
     }
 
     getMeasurementOffset = (index) => {
-        const orderedKeys = Object.keys(this.itemMeasurements).sort().slice(0, index);
+        const orderedKeys = Object.keys(this.itemMeasurements).sort((a, b) => {
+            const numA = Number(a);
+            const numB = Number(b);
+
+            if (numA > numB) {
+                return 1;
+            } else if (numA < numB) {
+                return -1;
+            }
+
+            return 0;
+        }).slice(0, index);
+
         return orderedKeys.map((i) => this.itemMeasurements[i]).reduce((a, b) => a + b, 0);
     }
 
     scrollListToMessageOffset = () => {
         const index = this.moreNewMessages ? this.props.postIds.length - 1 : this.newMessagesIndex;
-        if (index !== -1) {
-            const offset = this.getMeasurementOffset(index);
 
+        if (index !== -1) {
+            let offset = this.getMeasurementOffset(index);
             const windowHeight = this.state.postListHeight;
-            if (index !== this.props.postIds.length - 1 && offset < windowHeight) {
-                return; // post is already in view, no need to scroll.
+
+            if (offset < windowHeight) {
+                return;
             }
 
+            const upperBound = offset + windowHeight;
+            offset = offset - ((upperBound - offset) / 2);
+
             InteractionManager.runAfterInteractions(() => {
                 if (this.refs.list) {
                     if (!this.moreNewMessages) {
@@ -189,7 +203,7 @@ export default class PostList extends PureComponent {
 
             this.itemMeasurements[index] = NEW_MESSAGES_HEIGHT;
             return (
-                <NewMessagesDividerWithLayout
+                <NewMessagesDivider
                     index={index}
                     theme={this.props.theme}
                     moreMessages={this.moreNewMessages}
@@ -213,7 +227,7 @@ export default class PostList extends PureComponent {
     renderDateHeader = (date, index) => {
         this.itemMeasurements[index] = DATE_HEADER_HEIGHT;
         return (
-            <DateHeaderWithLayout
+            <DateHeader
                 date={date}
                 index={index}
             />