Refactor OpenReport API call for Report GetHistory

src/ONYXKEYS.js

@@ -101,6 +101,7 @@ export default {
         REPORTS_WITH_DRAFT: 'reportWithDraft_',
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
         IS_LOADING_INITIAL_REPORT_ACTIONS: 'isLoadingInitialReportActions_',
+        IS_LOADING_REPORT_ACTIONS: 'isLoadingReportActions_',
         IS_LOADING_MORE_REPORT_ACTIONS: 'isLoadingMoreReportActions_',
         POLICY_MEMBER_LIST: 'policyMemberList_',
     },

src/libs/actions/Report.js

@@ -1049,21 +1049,35 @@ function deleteReportComment(reportID, reportAction) {
  * @param {Number} reportID
  */
 function openReport(reportID) {
-    const sequenceNumber = getMaxSequenceNumber(reportID);
-    API.write('OpenReport',
+    API.read('OpenReport',
         {
             reportID,
-            sequenceNumber,
         },
         {
-            optimisticData: [{
-                onyxMethod: CONST.ONYX.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-                value: {
-                    lastReadSequenceNumber: sequenceNumber,
-                    lastVisitedTimestamp: Date.now(),
-                    unreadActionCount: 0,
+            optimisticData: [
+                {
+                    onyxMethod: CONST.ONYX.METHOD.MERGE,
+                    key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`,
+                    value: true,
                 },
+                {
+                    onyxMethod: CONST.ONYX.METHOD.MERGE,
+                    key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                    value: {
+                        lastVisitedTimestamp: Date.now(),
+                        unreadActionCount: 0,
+                    },
+                },
+            ],
+            successData: [{
+                onyxMethod: CONST.ONYX.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`,
+                value: false,
+            }],
+            failureData: [{
+                onyxMethod: CONST.ONYX.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${reportID}`,
+                value: false,
             }],
         });
 }

src/pages/home/ReportScreen.js

@@ -66,8 +66,8 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** Flag to check if the initial report actions data are loading */
-    isLoadingInitialReportActions: PropTypes.bool,
+    /** Flag to check if the report actions data are loading */
+    isLoadingReportActions: PropTypes.bool,
 
     /** The policies which the user has access to */
     policies: PropTypes.objectOf(PropTypes.shape({
@@ -92,7 +92,7 @@ const defaultProps = {
     },
     isComposerFullSize: false,
     betas: [],
-    isLoadingInitialReportActions: false,
+    isLoadingReportActions: false,
 };
 
 /**
@@ -136,10 +136,10 @@ class ReportScreen extends React.Component {
     }
 
     componentWillUnmount() {
-        clearTimeout(this.loadingTimerId);
-        if (window.visualViewport) {
-            window.visualViewport.removeEventListener('resize', this.viewportOffsetTop);
+        if (!window.visualViewport) {
+            return;
         }
+        window.visualViewport.removeEventListener('resize', this.viewportOffsetTop);
     }
 
     /**
@@ -163,7 +163,8 @@ class ReportScreen extends React.Component {
      * @returns {Boolean}
      */
     shouldShowLoader() {
-        return !getReportID(this.props.route) || (_.isEmpty(this.props.reportActions) && this.props.isLoadingInitialReportActions);
+        const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.isLoadingReportActions;
+        return !getReportID(this.props.route) || isLoadingInitialReportActions;
     }
 
     /**
@@ -285,8 +286,8 @@ export default withOnyx({
     betas: {
         key: ONYXKEYS.BETAS,
     },
-    isLoadingInitialReportActions: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${getReportID(route)}`,
+    isLoadingReportActions: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.IS_LOADING_REPORT_ACTIONS}${getReportID(route)}`,
         initWithStoredValues: false,
     },
     policies: {

src/pages/home/report/ReportActionsView.js

@@ -68,9 +68,6 @@ const propTypes = {
     /** Are we loading more report actions? */
     isLoadingMoreReportActions: PropTypes.bool,
 
-    /** Are we waiting for more report data? */
-    isLoadingReportData: PropTypes.bool,
-
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
@@ -88,7 +85,6 @@ const defaultProps = {
     reportActions: {},
     session: {},
     isLoadingMoreReportActions: false,
-    isLoadingReportData: false,
 };
 
 class ReportActionsView extends React.Component {
@@ -116,7 +112,6 @@ class ReportActionsView extends React.Component {
         this.loadMoreChats = this.loadMoreChats.bind(this);
         this.recordTimeToMeasureItemLayout = this.recordTimeToMeasureItemLayout.bind(this);
         this.scrollToBottomAndMarkReportAsRead = this.scrollToBottomAndMarkReportAsRead.bind(this);
-        this.updateNewMarkerAndMarkReadOnce = _.once(this.updateNewMarkerAndMarkRead.bind(this));
     }
 
     componentDidMount() {
@@ -141,11 +136,7 @@ class ReportActionsView extends React.Component {
             ReportScrollManager.scrollToBottom();
         });
 
-        if (!this.props.isLoadingReportData) {
-            this.updateNewMarkerAndMarkReadOnce();
-        }
-
-        this.fetchData();
+        Report.openReport(this.props.reportID);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -168,10 +159,6 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        if (!nextProps.isLoadingReportData && this.props.isLoadingReportData) {
-            return true;
-        }
-
         if (nextState.isFloatingMessageCounterVisible !== this.state.isFloatingMessageCounterVisible) {
             return true;
         }
@@ -203,14 +190,9 @@ class ReportActionsView extends React.Component {
         if (prevProps.network.isOffline && !this.props.network.isOffline) {
             if (this.getIsReportFullyVisible()) {
                 Report.openReport(this.props.reportID);
+            } else {
+                this.fetchData();
             }
-            this.fetchData();
-        }
-
-        // Update the last read action for the report currently in view when report data finishes loading.
-        // This report should now be up-to-date and since it is in view we mark it as read.
-        if (!this.props.isLoadingReportData && prevProps.isLoadingReportData) {
-            this.updateNewMarkerAndMarkReadOnce();
         }
 
         // The last sequenceNumber of the same report has changed.
@@ -350,18 +332,6 @@ class ReportActionsView extends React.Component {
         });
     }
 
-    /**
-     * Update NEW marker and mark report as read
-     */
-    updateNewMarkerAndMarkRead() {
-        this.updateNewMarkerPosition(this.props.report.unreadActionCount);
-
-        // Only mark as read if the report is fully visible
-        if (this.getIsReportFullyVisible()) {
-            Report.openReport(this.props.reportID);
-        }
-    }
-
     /**
      * Show the new floating message counter
      */
@@ -454,9 +424,6 @@ export default compose(
     withLocalize,
     withNetwork(),
     withOnyx({
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
         isLoadingMoreReportActions: {
             key: ({reportID}) => `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
             initWithStoredValues: false,