Merge pull request Expensify#13230 from Expensify/revert-12124-fix/11…

…584-web-jump-to-unread-message Revert "fix: 11584 web jump to unread message"
JediWattson · Dec 8, 2022 · 5501ff5 · 5501ff5
2 parents 367119d + ba63606
commit 5501ff5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.js b/src/components/InvertedFlatList/BaseInvertedFlatList.js
@@ -93,6 +93,12 @@ class BaseInvertedFlatList extends Component {
     measureItemLayout(nativeEvent, index) {
         const computedHeight = nativeEvent.layout.height;
 
+        // We've already measured this item so we don't need to
+        // measure it again.
+        if (this.sizeMap[index]) {
+            return;
+        }
+
         const previousItem = this.sizeMap[index - 1] || {};
 
         // If there is no previousItem this can mean we haven't yet measured
@@ -135,7 +141,6 @@ class BaseInvertedFlatList extends Component {
                 {...this.props}
                 ref={this.props.innerRef}
                 renderItem={this.renderItem}
-                sizeMap={this.sizeMap}
 
                 // Native platforms do not need to measure items and work fine without this.
                 // Web requires that items be measured or else crazy things happen when scrolling.

diff --git a/src/libs/ReportScrollManager/index.js b/src/libs/ReportScrollManager/index.js
@@ -1,6 +1,4 @@
 import React from 'react';
-import _ from 'underscore';
-import lodashGet from 'lodash/get';
 
 // This ref is created using React.createRef here because this function is used by a component that doesn't have access
 // to the original ref.
@@ -17,17 +15,8 @@ function scrollToIndex(index, isEditing) {
     if (isEditing) {
         return;
     }
-    const sizeMap = lodashGet(flatListRef, 'current.props.sizeMap');
-    const scrollableNode = flatListRef.current.getScrollableNode();
-    const clientHeight = lodashGet(scrollableNode, 'clientHeight', 0);
-    const paddingTop = parseFloat(lodashGet(scrollableNode, 'childNodes[0].style.paddingTop', '0px'));
-    const sizeArray = _.map(_.values(sizeMap), s => s.length);
-    const currentOffset = _.reduce(sizeArray.slice(0, (index.index)), (acc, val) => acc + val);
-    const offset = (currentOffset + paddingTop + (index.viewOffset || 0)) - (clientHeight * (index.viewPosition || 0));
-    flatListRef.current.scrollToOffset({
-        animated: index.animated,
-        offset,
-    });
+
+    flatListRef.current.scrollToIndex(index);
 }
 
 /**

diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
@@ -80,7 +80,7 @@ class ReportActionsView extends React.Component {
         this.toggleFloatingMessageCounter = this.toggleFloatingMessageCounter.bind(this);
         this.loadMoreChats = this.loadMoreChats.bind(this);
         this.recordTimeToMeasureItemLayout = this.recordTimeToMeasureItemLayout.bind(this);
-        this.scrollToUnreadMsgAndMarkReportAsRead = this.scrollToUnreadMsgAndMarkReportAsRead.bind(this);
+        this.scrollToBottomAndMarkReportAsRead = this.scrollToBottomAndMarkReportAsRead.bind(this);
         this.openReportIfNecessary = this.openReportIfNecessary.bind(this);
     }
 
@@ -298,8 +298,8 @@ class ReportActionsView extends React.Component {
         Report.readOldestAction(this.props.report.reportID, oldestActionSequenceNumber);
     }
 
-    scrollToUnreadMsgAndMarkReportAsRead() {
-        ReportScrollManager.scrollToIndex({animated: true, index: this.props.report.maxSequenceNumber - this.state.newMarkerSequenceNumber}, false);
+    scrollToBottomAndMarkReportAsRead() {
+        ReportScrollManager.scrollToBottom();
         Report.readNewestAction(this.props.report.reportID);
     }
 
@@ -358,7 +358,7 @@ class ReportActionsView extends React.Component {
                     <>
                         <FloatingMessageCounter
                             isActive={this.state.isFloatingMessageCounterVisible && this.state.newMarkerSequenceNumber > 0}
-                            onClick={this.scrollToUnreadMsgAndMarkReportAsRead}
+                            onClick={this.scrollToBottomAndMarkReportAsRead}
                         />
                         <ReportActionsList
                             report={this.props.report}