Improve Attachment Carousel State Management in AttachmentModal and ReportAttachments

src/components/AttachmentModal.js

@@ -46,6 +46,9 @@ const propTypes = {
     /** Optional callback to fire when we want to do something after modal hide. */
     onModalHide: PropTypes.func,
 
+    /** Optional callback to fire when we want to do something after attachment carousel changes. */
+    onCarouselAttachmentChange: PropTypes.func,
+
     /** Optional original filename when uploading */
     originalFileName: PropTypes.string,
 
@@ -81,13 +84,14 @@ const defaultProps = {
     report: {},
     onModalShow: () => {},
     onModalHide: () => {},
+    onCarouselAttachmentChange: () => {},
 };
 
 function AttachmentModal(props) {
     const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen);
     const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
-    const [isAuthTokenRequired] = useState(props.isAuthTokenRequired);
+    const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState(null);
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null);
     const [source, setSource] = useState(props.source);
@@ -102,14 +106,21 @@ function AttachmentModal(props) {
             : undefined,
     );
 
+    const onCarouselAttachmentChange = props.onCarouselAttachmentChange;
+
     /**
      * Keeps the attachment source in sync with the attachment displayed currently in the carousel.
      * @param {{ source: String, isAuthTokenRequired: Boolean, file: { name: string } }} attachment
      */
-    const onNavigate = useCallback((attachment) => {
-        setSource(attachment.source);
-        setFile(attachment.file);
-    }, []);
+    const onNavigate = useCallback(
+        (attachment) => {
+            setSource(attachment.source);
+            setFile(attachment.file);
+            setIsAuthTokenRequired(attachment.isAuthTokenRequired);
+            onCarouselAttachmentChange(attachment);
+        },
+        [onCarouselAttachmentChange],
+    );
 
     /**
      * If our attachment is a PDF, return the unswipeable Modal type.

src/pages/home/report/ReportAttachments.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import AttachmentModal from '../../../components/AttachmentModal';
 import Navigation from '../../../libs/Navigation/Navigation';
 import * as ReportUtils from '../../../libs/ReportUtils';
+import ROUTES from '../../../ROUTES';
 
 const propTypes = {
     /** Navigation route context info provided by react navigation */
@@ -30,6 +31,10 @@ function ReportAttachments(props) {
             report={report}
             source={source}
             onModalHide={() => Navigation.dismissModal(reportID)}
+            onCarouselAttachmentChange={(attachment) => {
+                const route = ROUTES.getReportAttachmentRoute(reportID, attachment.source);
+                Navigation.navigate(route);
+            }}
         />
     );
 }