diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 3505815c6778..419bc2917c1e 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -311,8 +311,12 @@ const ROUTES = { }, ATTACHMENTS: { route: 'attachment', - getRoute: (reportID: string, type: ValueOf, url: string, accountID?: number) => - `attachment?source=${encodeURIComponent(url)}&type=${type}${reportID ? `&reportID=${reportID}` : ''}${accountID ? `&accountID=${accountID}` : ''}` as const, + getRoute: (reportID: string, type: ValueOf, url: string, accountID?: number, isAuthTokenRequired?: boolean) => { + const reportParam = reportID ? `&reportID=${reportID}` : ''; + const accountParam = accountID ? `&accountID=${accountID}` : ''; + const authTokenParam = isAuthTokenRequired ? '&isAuthTokenRequired=true' : ''; + return `attachment?source=${encodeURIComponent(url)}&type=${type}${reportParam}${accountParam}${authTokenParam}` as const; + }, }, REPORT_PARTICIPANTS: { route: 'r/:reportID/participants', diff --git a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx index bbf7dfcb0c6a..2d52d26f9af6 100644 --- a/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx +++ b/src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx @@ -1,5 +1,5 @@ import React, {memo} from 'react'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import type {CustomRendererProps, TBlock} from 'react-native-render-html'; import {AttachmentContext} from '@components/AttachmentContext'; @@ -90,7 +90,7 @@ function ImageRenderer({tnode}: ImageRendererProps) { return; } - const route = ROUTES.ATTACHMENTS?.getRoute(reportID ?? '-1', type, source, accountID); + const route = ROUTES.ATTACHMENTS?.getRoute(reportID ?? '-1', type, source, accountID, isAttachmentOrReceipt); Navigation.navigate(route); }} onLongPress={(event) => { @@ -114,13 +114,20 @@ function ImageRenderer({tnode}: ImageRendererProps) { ImageRenderer.displayName = 'ImageRenderer'; -export default withOnyx({ - user: { - key: ONYXKEYS.USER, - }, -})( - memo( - ImageRenderer, - (prevProps, nextProps) => prevProps.tnode.attributes === nextProps.tnode.attributes && prevProps.user?.shouldUseStagingServer === nextProps.user?.shouldUseStagingServer, - ), +const ImageRendererMemorize = memo( + ImageRenderer, + (prevProps, nextProps) => prevProps.tnode.attributes === nextProps.tnode.attributes && prevProps.user?.shouldUseStagingServer === nextProps.user?.shouldUseStagingServer, ); + +function ImageRendererWrapper(props: CustomRendererProps) { + const [user] = useOnyx(ONYXKEYS.USER); + return ( + + ); +} + +export default ImageRendererWrapper; diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 5496a1f6d39f..c48786ca1428 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -1476,6 +1476,7 @@ type AuthScreensParamList = CentralPaneScreensParamList & source: string; type: ValueOf; accountID: string; + isAuthTokenRequired?: string; }; [SCREENS.PROFILE_AVATAR]: { accountID: string; diff --git a/src/pages/home/report/ReportAttachments.tsx b/src/pages/home/report/ReportAttachments.tsx index 1e16cfdddf4f..d30d8e9aabc1 100644 --- a/src/pages/home/report/ReportAttachments.tsx +++ b/src/pages/home/report/ReportAttachments.tsx @@ -17,6 +17,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) { const reportID = route.params.reportID; const type = route.params.type; const accountID = route.params.accountID; + const isAuthTokenRequired = route.params.isAuthTokenRequired; const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID || -1}`); const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); @@ -46,7 +47,7 @@ function ReportAttachments({route}: ReportAttachmentsProps) { }} onCarouselAttachmentChange={onCarouselAttachmentChange} shouldShowNotFoundPage={!isLoadingApp && type !== CONST.ATTACHMENT_TYPE.SEARCH && !report?.reportID} - isAuthTokenRequired={type === CONST.ATTACHMENT_TYPE.SEARCH} + isAuthTokenRequired={!!isAuthTokenRequired} /> ); }