use attachmentmodal in reportActionItemImage

MrMuzyk · Sep 5, 2023 · 356f371 · 356f371
1 parent eb50cd0
commit 356f371
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -73,6 +73,9 @@ const propTypes = {
     /** The report that has this attachment */
     report: reportPropTypes,
 
+    /** Whether the attachment is a receipt image */
+    isReceipt: PropTypes.bool,
+
     ...withLocalizePropTypes,
 
     ...windowDimensionsPropTypes,
@@ -95,14 +98,14 @@ const defaultProps = {
     onModalHide: () => {},
     onCarouselAttachmentChange: () => {},
     isWorkspaceAvatar: false,
+    isReceipt: false,
 };
 
 function AttachmentModal(props) {
     const [isModalOpen, setIsModalOpen] = useState(props.defaultOpen);
     const [shouldLoadAttachment, setShouldLoadAttachment] = useState(false);
     const [isAttachmentInvalid, setIsAttachmentInvalid] = useState(false);
     const [isAuthTokenRequired, setIsAuthTokenRequired] = useState(props.isAuthTokenRequired);
-    const [isAttachmentReceipt, setIsAttachmentReceipt] = useState(false);
     const [attachmentInvalidReasonTitle, setAttachmentInvalidReasonTitle] = useState('');
     const [attachmentInvalidReason, setAttachmentInvalidReason] = useState(null);
     const [source, setSource] = useState(props.source);
@@ -111,7 +114,6 @@ function AttachmentModal(props) {
     const [confirmButtonFadeAnimation] = useState(new Animated.Value(1));
     const [shouldShowDownloadButton, setShouldShowDownloadButton] = React.useState(true);
     const {windowWidth} = useWindowDimensions();
-    const [isEditingReceipt, setIsEditingReceipt] = useState(false);
 
     const [file, setFile] = useState(
         props.originalFileName
@@ -126,13 +128,12 @@ 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 }, isReceipt: Boolean }} attachment
+     * @param {{ source: String, isAuthTokenRequired: Boolean, file: { name: string } }} attachment
      */
     const onNavigate = useCallback(
         (attachment) => {
             setSource(attachment.source);
             setFile(attachment.file);
-            setIsAttachmentReceipt(attachment.isReceipt);
             setIsAuthTokenRequired(attachment.isAuthTokenRequired);
             onCarouselAttachmentChange(attachment);
         },
@@ -344,15 +345,15 @@ function AttachmentModal(props) {
             >
                 {props.isSmallScreenWidth && <HeaderGap />}
                 <HeaderWithBackButton
-                    title={props.headerTitle || translate(isAttachmentReceipt ? 'common.receipt' : 'common.attachment')}
+                    title={props.headerTitle || translate('common.attachment')}
                     shouldShowBorderBottom
-                    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !isAttachmentReceipt}
+                    shouldShowDownloadButton={props.allowDownload && shouldShowDownloadButton && !props.isReceipt}
                     onDownloadButtonPress={() => downloadAttachment(source)}
                     shouldShowCloseButton={!props.isSmallScreenWidth}
                     shouldShowBackButton={props.isSmallScreenWidth}
                     onBackButtonPress={closeModal}
                     onCloseButtonPress={closeModal}
-                    shouldShowThreeDotsButton={isAttachmentReceipt}
+                    shouldShowThreeDotsButton={props.isReceipt}
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
                     threeDotsMenuItems={[
                         {

diff --git a/src/components/ReportActionItem/ReportActionItemImage.js b/src/components/ReportActionItem/ReportActionItemImage.js
@@ -4,12 +4,10 @@ import styles from '../../styles/styles';
 import Image from '../Image';
 import ThumbnailImage from '../ThumbnailImage';
 import tryResolveUrlFromApiRoot from '../../libs/tryResolveUrlFromApiRoot';
-import ROUTES from '../../ROUTES';
 import CONST from '../../CONST';
-import {ShowContextMenuContext} from '../ShowContextMenuContext';
-import Navigation from '../../libs/Navigation/Navigation';
 import PressableWithoutFocus from '../Pressable/PressableWithoutFocus';
 import useLocalize from '../../hooks/useLocalize';
+import AttachmentModal from '../AttachmentModal';
 
 const propTypes = {
     /** thumbnail URI for the image */
@@ -50,21 +48,25 @@ function ReportActionItemImage({thumbnail, image, enablePreviewModal}) {
 
         if (enablePreviewModal) {
             return (
-                <ShowContextMenuContext.Consumer>
-                    {({report}) => (
-                        <PressableWithoutFocus
-                            style={[styles.noOutline, styles.w100, styles.h100]}
-                            onPress={() => {
-                                const route = ROUTES.getReportAttachmentRoute(report.reportID, imageSource);
-                                Navigation.navigate(route);
-                            }}
-                            accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
-                            accessibilityLabel={translate('accessibilityHints.viewAttachment')}
-                        >
-                            {thumbnailComponent}
-                        </PressableWithoutFocus>
-                    )}
-                </ShowContextMenuContext.Consumer>
+                <>
+                    <AttachmentModal
+                        headerTitle={translate('common.receipt')}
+                        source={imageSource}
+                        isAuthTokenRequired
+                        isReceipt
+                    >
+                        {({show}) => (
+                            <PressableWithoutFocus
+                                style={[styles.noOutline, styles.w100, styles.h100]}
+                                onPress={show}
+                                accessibilityRole={CONST.ACCESSIBILITY_ROLE.IMAGEBUTTON}
+                                accessibilityLabel={translate('accessibilityHints.viewAttachment')}
+                            >
+                                {thumbnailComponent}
+                            </PressableWithoutFocus>
+                        )}
+                    </AttachmentModal>
+                </>
             );
         }
         return thumbnailComponent;