From 50713ad0595c5151c8c56b5f1b9b8111246dea75 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Tue, 4 Jul 2023 15:55:32 +0300 Subject: [PATCH 1/3] Add callback for attachment carousel change in AttachmentModal - Added a new prop `onCarouselAttachmentChange` to `AttachmentModal` component that is called whenever the carousel attachment changes. - This new prop is a function that is called with the current attachment object as its argument. - Also, a corresponding function is passed in `ReportAttachments` to navigate to the respective route for each attachment whenever the carousel attachment changes. --- src/components/AttachmentModal.js | 9 ++++++++- src/pages/home/report/ReportAttachments.js | 5 +++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 9e699bfe1ae3..4011887dc3f7 100755 --- a/src/components/AttachmentModal.js +++ b/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,6 +84,7 @@ const defaultProps = { report: {}, onModalShow: () => {}, onModalHide: () => {}, + onCarouselAttachmentChange: () => {}, }; function AttachmentModal(props) { @@ -102,6 +106,8 @@ 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 @@ -109,7 +115,8 @@ function AttachmentModal(props) { const onNavigate = useCallback((attachment) => { setSource(attachment.source); setFile(attachment.file); - }, []); + onCarouselAttachmentChange(attachment); + }, [onCarouselAttachmentChange]); /** * If our attachment is a PDF, return the unswipeable Modal type. diff --git a/src/pages/home/report/ReportAttachments.js b/src/pages/home/report/ReportAttachments.js index 38e7781aedf5..c8b5dd1ae685 100644 --- a/src/pages/home/report/ReportAttachments.js +++ b/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); + }} /> ); } From badd84e2d8cd93b72d99fb5b1d49f6c36835fe21 Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Tue, 4 Jul 2023 16:34:33 +0300 Subject: [PATCH 2/3] Fix: Update auth token requirement state on attachment carousel change Details: - Modified the `onNavigate` function in `AttachmentModal` component to set the state of `isAuthTokenRequired` depending on the attachment navigated to. - This change allows the component to correctly update whether an auth token is required or not for each attachment in the carousel. --- src/components/AttachmentModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 4011887dc3f7..714e0d1347ea 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -91,7 +91,7 @@ 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); @@ -115,6 +115,7 @@ function AttachmentModal(props) { const onNavigate = useCallback((attachment) => { setSource(attachment.source); setFile(attachment.file); + setIsAuthTokenRequired(attachment.isAuthTokenRequired); onCarouselAttachmentChange(attachment); }, [onCarouselAttachmentChange]); From 806734f90802720cae8833f4f68d47e4b781d66d Mon Sep 17 00:00:00 2001 From: Peter Velkov Date: Tue, 4 Jul 2023 17:37:48 +0300 Subject: [PATCH 3/3] Code style: reformat with prettier --- src/components/AttachmentModal.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 714e0d1347ea..d6be7e49bdd4 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -112,12 +112,15 @@ function AttachmentModal(props) { * 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); - setIsAuthTokenRequired(attachment.isAuthTokenRequired); - onCarouselAttachmentChange(attachment); - }, [onCarouselAttachmentChange]); + 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.