Fix Opened offline attachment directed to conversation page on online

src/components/Attachments/AttachmentCarousel/index.native.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Keyboard, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
@@ -15,13 +15,15 @@ import CarouselButtons from './CarouselButtons';
 import extractAttachments from './extractAttachments';
 import type {AttachmentCarouselPagerHandle} from './Pager';
 import AttachmentCarouselPager from './Pager';
-import type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps} from './types';
+import type {AttachmentCarouselProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, onClose, type, accountID}: AttachmentCarouselProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const pagerRef = useRef<AttachmentCarouselPagerHandle>(null);
+    const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`, {canEvict: false});
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false});
     const [page, setPage] = useState<number>();
     const [attachments, setAttachments] = useState<Attachment[]>([]);
     const {shouldShowArrows, setShouldShowArrows, autoHideArrows, cancelAutoHideArrows} = useCarouselArrows();
@@ -38,23 +40,28 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
         }
 
-        const initialPage = targetAttachments.findIndex(compareImage);
+        let attachmentIndex = targetAttachments.findIndex(compareImage);
+        const prevAttachmentIndex = attachments.findIndex(compareImage);
 
-        // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && attachments.find(compareImage)) {
+        // If no matching attachment with the same index, dismiss the modal
+        if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
+            attachmentIndex = prevAttachmentIndex;
+        }
+
+        if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
             Navigation.dismissModal();
         } else {
-            setPage(initialPage);
+            setPage(attachmentIndex);
             setAttachments(targetAttachments);
 
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
-                setDownloadButtonVisibility(initialPage !== -1);
+                setDownloadButtonVisibility(attachmentIndex !== -1);
             }
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (targetAttachments[initialPage] !== undefined && onNavigate) {
-                onNavigate(targetAttachments[initialPage]);
+            if (targetAttachments[attachmentIndex] !== undefined && onNavigate) {
+                onNavigate(targetAttachments[attachmentIndex]);
             }
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
@@ -144,13 +151,4 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
-export default withOnyx<AttachmentCarouselProps, AttachmentCaraouselOnyxProps>({
-    parentReportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
-        canEvict: false,
-    },
-    reportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-        canEvict: false,
-    },
-})(AttachmentCarousel);
+export default AttachmentCarousel;

src/components/Attachments/AttachmentCarousel/index.tsx

@@ -5,7 +5,7 @@ import type {ListRenderItemInfo} from 'react-native';
 import {Keyboard, PixelRatio, View} from 'react-native';
 import type {GestureType} from 'react-native-gesture-handler';
 import {Gesture, GestureDetector} from 'react-native-gesture-handler';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import Animated, {scrollTo, useAnimatedRef, useSharedValue} from 'react-native-reanimated';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import BlockingView from '@components/BlockingViews/BlockingView';
@@ -26,7 +26,7 @@ import CarouselButtons from './CarouselButtons';
 import CarouselItem from './CarouselItem';
 import extractAttachments from './extractAttachments';
 import AttachmentCarouselPagerContext from './Pager/AttachmentCarouselPagerContext';
-import type {AttachmentCaraouselOnyxProps, AttachmentCarouselProps, UpdatePageProps} from './types';
+import type {AttachmentCarouselProps, UpdatePageProps} from './types';
 import useCarouselArrows from './useCarouselArrows';
 import useCarouselContextEvents from './useCarouselContextEvents';
 
@@ -38,7 +38,7 @@ const viewabilityConfig = {
 
 const MIN_FLING_VELOCITY = 500;
 
-function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
+function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose}: AttachmentCarouselProps) {
     const theme = useTheme();
     const {translate} = useLocalize();
     const {windowWidth} = useWindowDimensions();
@@ -48,7 +48,8 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
     const scrollRef = useAnimatedRef<Animated.FlatList<ListRenderItemInfo<Attachment>>>();
     const nope = useSharedValue(false);
     const pagerRef = useRef<GestureType>(null);
-
+    const [parentReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`, {canEvict: false});
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`, {canEvict: false});
     const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();
 
     const modalStyles = styles.centeredModalStyles(shouldUseNarrowLayout, true);
@@ -88,23 +89,28 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
             return;
         }
 
-        const initialPage = targetAttachments.findIndex(compareImage);
+        let attachmentIndex = targetAttachments.findIndex(compareImage);
+        const prevAttachmentIndex = attachments.findIndex(compareImage);
+
+        // If no matching attachment with the same index, dismiss the modal
+        if (!targetAttachments[attachmentIndex] && targetAttachments[prevAttachmentIndex]) {
+            attachmentIndex = prevAttachmentIndex;
+        }
 
-        // Dismiss the modal when deleting an attachment during its display in preview.
-        if (initialPage === -1 && attachments.find(compareImage)) {
+        if (!targetAttachments[attachmentIndex] && attachments[prevAttachmentIndex]) {
             Navigation.dismissModal();
         } else {
-            setPage(initialPage);
+            setPage(attachmentIndex);
             setAttachments(targetAttachments);
 
             // Update the download button visibility in the parent modal
             if (setDownloadButtonVisibility) {
-                setDownloadButtonVisibility(initialPage !== -1);
+                setDownloadButtonVisibility(attachmentIndex !== -1);
             }
 
             // Update the parent modal's state with the source and name from the mapped attachments
-            if (targetAttachments[initialPage] !== undefined && onNavigate) {
-                onNavigate(targetAttachments[initialPage]);
+            if (targetAttachments[attachmentIndex] !== undefined && onNavigate) {
+                onNavigate(targetAttachments[attachmentIndex]);
             }
         }
     }, [report.privateNotes, reportActions, parentReportActions, compareImage, report.parentReportActionID, attachments, setDownloadButtonVisibility, onNavigate, accountID, type]);
@@ -306,13 +312,4 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
 
 AttachmentCarousel.displayName = 'AttachmentCarousel';
 
-export default withOnyx<AttachmentCarouselProps, AttachmentCaraouselOnyxProps>({
-    parentReportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID}`,
-        canEvict: false,
-    },
-    reportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
-        canEvict: false,
-    },
-})(AttachmentCarousel);
+export default AttachmentCarousel;

src/components/Attachments/AttachmentCarousel/types.ts

@@ -1,23 +1,14 @@
 import type {ViewToken} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import type {Attachment, AttachmentSource} from '@components/Attachments/types';
 import type CONST from '@src/CONST';
-import type {Report, ReportActions} from '@src/types/onyx';
+import type {Report} from '@src/types/onyx';
 
 type UpdatePageProps = {
     viewableItems: ViewToken[];
 };
 
-type AttachmentCaraouselOnyxProps = {
-    /** Object of report actions for this report */
-    reportActions: OnyxEntry<ReportActions>;
-
-    /** The report actions of the parent report */
-    parentReportActions: OnyxEntry<ReportActions>;
-};
-
-type AttachmentCarouselProps = AttachmentCaraouselOnyxProps & {
+type AttachmentCarouselProps = {
     /** Source is used to determine the starting index in the array of attachments */
     source: AttachmentSource;
 
@@ -40,4 +31,4 @@ type AttachmentCarouselProps = AttachmentCaraouselOnyxProps & {
     onClose: () => void;
 };
 
-export type {AttachmentCarouselProps, UpdatePageProps, AttachmentCaraouselOnyxProps};
+export type {AttachmentCarouselProps, UpdatePageProps};