Skip to content

Commit

Permalink
Merge pull request #49832 from wildan-m/wildan/fix/48173-dismiss-when…
Browse files Browse the repository at this point in the history 
…-no-attachment-with-same-page-index

Fix Opened offline attachment directed to conversation page on online
  • Loading branch information
@rlinoz
rlinoz authored Oct 3, 2024
2 parents 9e72084 + 33cd212 commit 90fc8fb
Show file tree
Hide file tree
Showing 3 changed files with 54 additions and 64 deletions.
51 changes: 25 additions & 26 deletions src/components/Attachments/AttachmentCarousel/index.native.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -15,47 +15,55 @@ 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();
const [activeSource, setActiveSource] = useState<AttachmentSource>(source);

const compareImage = useCallback((attachment: Attachment) => attachment.source === source, [source]);

useEffect(() => {
const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
let targetAttachments: Attachment[] = [];
let newAttachments: Attachment[] = [];
if (type === CONST.ATTACHMENT_TYPE.NOTE && accountID) {
targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
} else {
targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions});
}

const initialPage = targetAttachments.findIndex(compareImage);
let newIndex = newAttachments.findIndex(compareImage);
const index = attachments.findIndex(compareImage);

// If newAttachments includes an attachment with the same index, update newIndex to that index.
// Previously, uploading an attachment offline would dismiss the modal when the image was previewed and the connection was restored.
// Now, instead of dismissing the modal, we replace it with the new attachment that has the same index.
if (newIndex === -1 && index !== -1 && newAttachments.at(index)) {
newIndex = index;
}

// 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 (newIndex === -1 && index !== -1 && attachments.at(index)) {
Navigation.dismissModal();
} else {
setPage(initialPage);
setAttachments(targetAttachments);
setPage(newIndex);
setAttachments(newAttachments);

// Update the download button visibility in the parent modal
if (setDownloadButtonVisibility) {
setDownloadButtonVisibility(initialPage !== -1);
setDownloadButtonVisibility(newIndex !== -1);
}

const attachment = targetAttachments.at(initialPage);

const attachment = newAttachments.at(newIndex);
// Update the parent modal's state with the source and name from the mapped attachments
if (initialPage !== -1 && attachment !== undefined && onNavigate) {
if (newIndex !== -1 && attachment !== undefined && onNavigate) {
onNavigate(attachment);
}
}
Expand Down Expand Up @@ -148,13 +156,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;
52 changes: 26 additions & 26 deletions src/components/Attachments/AttachmentCarousel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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';

Expand All @@ -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();
Expand All @@ -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);
Expand All @@ -73,38 +74,46 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,

useEffect(() => {
const parentReportAction = report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : undefined;
let targetAttachments: Attachment[] = [];
let newAttachments: Attachment[] = [];
if (type === CONST.ATTACHMENT_TYPE.NOTE && accountID) {
targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.NOTE, {privateNotes: report.privateNotes, accountID});
} else {
targetAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions: reportActions ?? undefined});
newAttachments = extractAttachments(CONST.ATTACHMENT_TYPE.REPORT, {parentReportAction, reportActions: reportActions ?? undefined});
}

if (isEqual(attachments, targetAttachments)) {
if (isEqual(attachments, newAttachments)) {
if (attachments.length === 0) {
setPage(-1);
setDownloadButtonVisibility?.(false);
}
return;
}

const initialPage = targetAttachments.findIndex(compareImage);
let newIndex = newAttachments.findIndex(compareImage);
const index = attachments.findIndex(compareImage);

// If newAttachments includes an attachment with the same index, update newIndex to that index.
// Previously, uploading an attachment offline would dismiss the modal when the image was previewed and the connection was restored.
// Now, instead of dismissing the modal, we replace it with the new attachment that has the same index.
if (newIndex === -1 && index !== -1 && newAttachments.at(index)) {
newIndex = index;
}

// 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 (newIndex === -1 && index !== -1 && attachments.at(index)) {
Navigation.dismissModal();
} else {
setPage(initialPage);
setAttachments(targetAttachments);
setPage(newIndex);
setAttachments(newAttachments);

// Update the download button visibility in the parent modal
if (setDownloadButtonVisibility) {
setDownloadButtonVisibility(initialPage !== -1);
setDownloadButtonVisibility(newIndex !== -1);
}

const attachment = targetAttachments.at(initialPage);
const attachment = newAttachments.at(newIndex);
// Update the parent modal's state with the source and name from the mapped attachments
if (initialPage !== -1 && attachment !== undefined && onNavigate) {
if (newIndex !== -1 && attachment !== undefined && onNavigate) {
onNavigate(attachment);
}
}
Expand Down Expand Up @@ -307,13 +316,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;
15 changes: 3 additions & 12 deletions src/components/Attachments/AttachmentCarousel/types.ts
View file
Original file line number Diff line number Diff line change
@@ -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;

Expand All @@ -40,4 +31,4 @@ type AttachmentCarouselProps = AttachmentCaraouselOnyxProps & {
onClose: () => void;
};

export type {AttachmentCarouselProps, UpdatePageProps, AttachmentCaraouselOnyxProps};
export type {AttachmentCarouselProps, UpdatePageProps};

0 comments on commit 90fc8fb

Please sign in to comment.