Fix infinite loader when using attachments deeplink

src/components/AttachmentModal.js

@@ -338,7 +338,7 @@ function AttachmentModal(props) {
                     onCloseButtonPress={closeModal}
                 />
                 <View style={styles.imageModalImageCenterContainer}>
-                    {!_.isEmpty(props.report) ? (
+                    {!_.isEmpty(props.report) && !props.report.isLoadingReportActions ? (
                         <AttachmentCarousel
                             report={props.report}
                             onNavigate={onNavigate}

src/components/Attachments/AttachmentCarousel/extractAttachmentsFromReport.js

@@ -13,6 +13,18 @@ import Navigation from '../../../libs/Navigation/Navigation';
  * @returns {{attachments: Array, initialPage: Number, initialItem: Object, initialActiveSource: String}}
  */
 function extractAttachmentsFromReport(report, reportActions, source) {
+    // Even an empty chat will have the 'created' report action, if its not there
+    // then we are coming from a deep link and actions are not yet loaded. We should
+    // wait until actions load.
+    if (_.isEmpty(reportActions)) {
+        return {
+            attachments: [],
+            initialPage: 0,
+            initialItem: undefined,
+            initialActiveSource: null,
+        };
+    }
+
     const actions = [ReportActionsUtils.getParentReportAction(report), ...ReportActionsUtils.getSortedReportActions(_.values(reportActions))];
     let attachments = [];
 
@@ -44,7 +56,7 @@ function extractAttachmentsFromReport(report, reportActions, source) {
 
     attachments = attachments.reverse();
 
-    const initialPage = _.findIndex(attachments, (a) => a.source === source);
+    const initialPage = _.findIndex(attachments, (a) => a.source.includes(source));
     if (initialPage === -1) {
         Navigation.dismissModal();
         return {

src/libs/ReportActionsUtils.js

@@ -486,6 +486,15 @@ function getReportAction(reportID, reportActionID) {
     return lodashGet(allReportActions, [reportID, reportActionID], {});
 }
 
+/**
+ *
+ * @param {String} reportID
+ * @returns {Object}
+ */
+function getReportActions(reportID) {
+    return lodashGet(allReportActions, [reportID], {});
+}
+
 /**
  * @returns {string}
  */
@@ -593,4 +602,5 @@ export {
     isWhisperAction,
     isPendingRemove,
     getReportAction,
+    getReportActions,
 };

src/pages/home/report/ReportAttachments.js

@@ -1,10 +1,15 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import lodashGet from 'lodash/get';
 import _ from 'underscore';
 import PropTypes from 'prop-types';
+import {withOnyx} from 'react-native-onyx';
 import AttachmentModal from '../../../components/AttachmentModal';
 import Navigation from '../../../libs/Navigation/Navigation';
-import * as ReportUtils from '../../../libs/ReportUtils';
+import * as Report from '../../../libs/actions/Report';
+import * as ReportActionUtils from '../../../libs/ReportActionsUtils';
 import ROUTES from '../../../ROUTES';
+import ONYXKEYS from '../../../ONYXKEYS';
+import reportPropTypes from '../../reportPropTypes';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -17,18 +22,61 @@ const propTypes = {
             source: PropTypes.string.isRequired,
         }).isRequired,
     }).isRequired,
+
+    /** The report that has this attachment */
+    report: reportPropTypes,
+};
+
+const defaultProps = {
+    report: {},
 };
 
+/**
+ * Get the currently viewed report ID as number
+ *
+ * @param {Object} route
+ * @param {Object} route.params
+ * @param {String} route.params.reportID
+ * @returns {String}
+ */
+function getReportID(route) {
+    return String(lodashGet(route, 'params.reportID', null));
+}
+
 function ReportAttachments(props) {
     const reportID = _.get(props, ['route', 'params', 'reportID']);
-    const report = ReportUtils.getReport(reportID);
     const source = decodeURI(_.get(props, ['route', 'params', 'source']));
+    const [initialReport, setInitialReport] = useState(props.report);
+
+    useEffect(() => {
+        if (!props.report.reportID || reportID === props.report.reportID) return;
+        setInitialReport(props.report);
+    }, [reportID, props.report]);
+
+    /** This effects handles 2x cases when report attachments are opened with deep link */
+    useEffect(() => {
+        // Case 1 - if we are logged out and use the deep link for attachments and then login, then
+        // the report will not have reportID yet, and we wouldn't have loaded report and report actions
+        // data yet. call openReport to get both report and report actions data
+        if (!initialReport.reportID) {
+            Report.openReport(reportID);
+            return;
+        }
+
+        // Case 2 - if we are already logged in and the report actions are not already loading and
+        // report has no report actions (even an empty chat will have the 'created' report action),
+        // then we are on a page other than report screen. Now call openReport to get report actions
+        // since we dont have them in onyx.
+        const reportActions = ReportActionUtils.getReportActions(initialReport.reportID);
+        if (initialReport.isLoadingReportActions || !_.isEmpty(reportActions)) return;
+        Report.openReport(reportID);
+    }, [initialReport, reportID]);
 
     return (
         <AttachmentModal
             allowDownload
             defaultOpen
-            report={report}
+            report={props.report}
             source={source}
             onModalHide={() => Navigation.dismissModal(reportID)}
             onCarouselAttachmentChange={(attachment) => {
@@ -40,6 +88,11 @@ function ReportAttachments(props) {
 }
 
 ReportAttachments.propTypes = propTypes;
+ReportAttachments.defaultProps = defaultProps;
 ReportAttachments.displayName = 'ReportAttachments';
 
-export default ReportAttachments;
+export default withOnyx({
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`,
+    },
+})(ReportAttachments);