Refactor OpenReport API call for Report GetHistory

src/ONYXKEYS.js

@@ -96,8 +96,6 @@ export default {
         POLICY: 'policy_',
         REPORTS_WITH_DRAFT: 'reportWithDraft_',
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
-        IS_LOADING_INITIAL_REPORT_ACTIONS: 'isLoadingInitialReportActions_',
-        IS_LOADING_MORE_REPORT_ACTIONS: 'isLoadingMoreReportActions_',
         POLICY_MEMBER_LIST: 'policyMemberList_',
     },
 

src/libs/actions/Report.js

@@ -625,15 +625,14 @@ function fetchOrCreateChatReport(participants, shouldNavigate = true) {
 }
 
 /**
- * Get the actions of a report
+ * Get the initial actions of a report
  *
  * @param {Number} reportID
- * @returns {Promise}
  */
-function fetchActions(reportID) {
+function fetchInitialActions(reportID) {
     const reportActionsOffset = -1;
 
-    return DeprecatedAPI.Report_GetHistory({
+    DeprecatedAPI.Report_GetHistory({
         reportID,
         reportActionsOffset,
         reportActionsLimit: CONST.REPORT.ACTIONS.LIMIT,
@@ -644,17 +643,6 @@ function fetchActions(reportID) {
         });
 }
 
-/**
- * Get the initial actions of a report
- *
- * @param {Number} reportID
- */
-function fetchInitialActions(reportID) {
-    Onyx.set(`${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${reportID}`, true);
-    fetchActions(reportID)
-        .finally(() => Onyx.set(`${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${reportID}`, false));
-}
-
 /**
  * Get all of our reports
  *
@@ -989,22 +977,34 @@ function deleteReportComment(reportID, reportAction) {
  * @param {Number} reportID
  */
 function openReport(reportID) {
-    const sequenceNumber = getMaxSequenceNumber(reportID);
     API.write('OpenReport',
         {
             reportID,
-            sequenceNumber,
         },
         {
             optimisticData: [{
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
                 key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
                 value: {
-                    lastReadSequenceNumber: sequenceNumber,
+                    isLoadingReportActions: true,
                     lastVisitedTimestamp: Date.now(),
                     unreadActionCount: 0,
                 },
             }],
+            successData: [{
+                onyxMethod: CONST.ONYX.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                value: {
+                    isLoadingReportActions: false,
+                },
+            }],
+            failureData: [{
+                onyxMethod: CONST.ONYX.METHOD.MERGE,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                value: {
+                    isLoadingReportActions: false,
+                },
+            }],
         });
 }
 
@@ -1024,18 +1024,24 @@ function readOldestAction(reportID, oldestActionSequenceNumber) {
         {
             optimisticData: [{
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
-                value: true,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                value: {
+                    isLoadingMoreReportActions: true,
+                },
             }],
             successData: [{
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
-                value: false,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                value: {
+                    isLoadingMoreReportActions: false,
+                },
             }],
             failureData: [{
                 onyxMethod: CONST.ONYX.METHOD.MERGE,
-                key: `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
-                value: false,
+                key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+                value: {
+                    isLoadingMoreReportActions: false,
+                },
             }],
         });
 }

src/pages/home/ReportScreen.js

@@ -60,6 +60,9 @@ const propTypes = {
 
         /** Whether there is an outstanding amount in IOU */
         hasOutstandingIOU: PropTypes.bool,
+
+        /** Flag to check if the report actions data are loading */
+        isLoadingReportActions: PropTypes.bool,
     }),
 
     /** Array of report actions for this report */
@@ -71,9 +74,6 @@ const propTypes = {
     /** Beta features list */
     betas: PropTypes.arrayOf(PropTypes.string),
 
-    /** Flag to check if the initial report actions data are loading */
-    isLoadingInitialReportActions: PropTypes.bool,
-
     /** The policies which the user has access to */
     policies: PropTypes.objectOf(PropTypes.shape({
         /** The policy name */
@@ -99,10 +99,10 @@ const defaultProps = {
         unreadActionCount: 0,
         maxSequenceNumber: 0,
         hasOutstandingIOU: false,
+        isLoadingReportActions: false,
     },
     isComposerFullSize: false,
     betas: [],
-    isLoadingInitialReportActions: false,
     policies: {},
 };
 
@@ -146,7 +146,6 @@ class ReportScreen extends React.Component {
     }
 
     componentWillUnmount() {
-        clearTimeout(this.loadingTimerId);
         this.removeViewportResizeListener();
     }
 
@@ -163,11 +162,14 @@ class ReportScreen extends React.Component {
 
     /**
      * When reports change there's a brief time content is not ready to be displayed
+     * It Should show the loader if it's the first time we are opening the report
      *
      * @returns {Boolean}
      */
     shouldShowLoader() {
-        return !getReportID(this.props.route) || (_.isEmpty(this.props.reportActions) && this.props.isLoadingInitialReportActions);
+        // This means there are no reportActions at all to display, but it is still in the process of loading the next set of actions.
+        const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions;
+        return !getReportID(this.props.route) || isLoadingInitialReportActions;
     }
 
     /**
@@ -303,10 +305,6 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
-        isLoadingInitialReportActions: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.IS_LOADING_INITIAL_REPORT_ACTIONS}${getReportID(route)}`,
-            initWithStoredValues: false,
-        },
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },

src/pages/home/report/ReportActionsView.js

@@ -3,7 +3,6 @@ import {
     Keyboard,
     AppState,
 } from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
@@ -22,7 +21,6 @@ import ReportActionComposeFocusManager from '../../../libs/ReportActionComposeFo
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import PopoverReportActionContextMenu from './ContextMenu/PopoverReportActionContextMenu';
 import Performance from '../../../libs/Performance';
-import ONYXKEYS from '../../../ONYXKEYS';
 import {withNetwork} from '../../../components/OnyxProvider';
 import * as EmojiPickerAction from '../../../libs/actions/EmojiPickerAction';
 import FloatingMessageCounter from './FloatingMessageCounter';
@@ -51,6 +49,9 @@ const propTypes = {
 
         /** Whether there is an outstanding amount in IOU */
         hasOutstandingIOU: PropTypes.bool,
+
+        /** Are we loading more report actions? */
+        isLoadingMoreReportActions: PropTypes.bool,
     }),
 
     /** Array of report actions for this report */
@@ -65,12 +66,6 @@ const propTypes = {
     /** Whether the composer is full size */
     isComposerFullSize: PropTypes.bool.isRequired,
 
-    /** 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,
 
@@ -84,11 +79,10 @@ const defaultProps = {
         unreadActionCount: 0,
         maxSequenceNumber: 0,
         hasOutstandingIOU: false,
+        isLoadingMoreReportActions: false,
     },
     reportActions: {},
     session: {},
-    isLoadingMoreReportActions: false,
-    isLoadingReportData: false,
 };
 
 class ReportActionsView extends React.Component {
@@ -116,7 +110,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 +134,7 @@ class ReportActionsView extends React.Component {
             ReportScrollManager.scrollToBottom();
         });
 
-        if (!this.props.isLoadingReportData) {
-            this.updateNewMarkerAndMarkReadOnce();
-        }
-
-        this.fetchData();
+        Report.openReport(this.props.reportID);
     }
 
     shouldComponentUpdate(nextProps, nextState) {
@@ -164,11 +153,7 @@ class ReportActionsView extends React.Component {
             return true;
         }
 
-        if (nextProps.isLoadingMoreReportActions !== this.props.isLoadingMoreReportActions) {
-            return true;
-        }
-
-        if (!nextProps.isLoadingReportData && this.props.isLoadingReportData) {
+        if (nextProps.report.isLoadingMoreReportActions !== this.props.report.isLoadingMoreReportActions) {
             return true;
         }
 
@@ -203,14 +188,9 @@ class ReportActionsView extends React.Component {
         if (lodashGet(prevProps.network, 'isOffline') && !lodashGet(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.
@@ -284,7 +264,7 @@ class ReportActionsView extends React.Component {
      */
     loadMoreChats() {
         // Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
-        if (this.props.isLoadingMoreReportActions) {
+        if (this.props.report.isLoadingMoreReportActions) {
             return;
         }
 
@@ -350,18 +330,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
      */
@@ -431,7 +399,7 @@ class ReportActionsView extends React.Component {
                             onLayout={this.recordTimeToMeasureItemLayout}
                             sortedReportActions={this.sortedReportActions}
                             mostRecentIOUReportSequenceNumber={this.mostRecentIOUReportSequenceNumber}
-                            isLoadingMoreReportActions={this.props.isLoadingMoreReportActions}
+                            isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
                             loadMoreChats={this.loadMoreChats}
                         />
                         <PopoverReportActionContextMenu ref={ReportActionContextMenu.contextMenuRef} />
@@ -453,13 +421,4 @@ export default compose(
     withDrawerState,
     withLocalize,
     withNetwork(),
-    withOnyx({
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
-        isLoadingMoreReportActions: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.IS_LOADING_MORE_REPORT_ACTIONS}${reportID}`,
-            initWithStoredValues: false,
-        },
-    }),
 )(ReportActionsView);