From db03580b9bd55cbdb8b013ec5c13ef7158abf532 Mon Sep 17 00:00:00 2001
From: FitseTLT <engfitsum@gmail.com>
Date: Fri, 4 Apr 2025 23:03:48 +0300
Subject: [PATCH] hide flagged attachment on attachment modal

---
 src/CONST.ts                                  |  1 +
 .../AttachmentCarousel/CarouselItem.tsx       |  3 +-
 .../AttachmentCarousel/extractAttachments.ts  |  7 ++-
 .../home/report/PureReportActionItem.tsx      |  2 +-
 .../home/report/ReportAttachmentsContext.tsx  |  2 +-
 tests/unit/CarouselItemTest.tsx               | 43 +++++++++++++++++++
 6 files changed, 53 insertions(+), 5 deletions(-)
 create mode 100644 tests/unit/CarouselItemTest.tsx

diff --git a/src/CONST.ts b/src/CONST.ts
index eb285d3a1bc2..108d89f5e8eb 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -1788,6 +1788,7 @@ const CONST = {
     YOUR_LOCATION_TEXT: 'Your Location',
 
     ATTACHMENT_MESSAGE_TEXT: '[Attachment]',
+    ATTACHMENT_REGEX: /<video |<img /,
     ATTACHMENT_SOURCE_ATTRIBUTE: 'data-expensify-source',
     ATTACHMENT_ID_ATTRIBUTE: 'data-attachment-id',
     ATTACHMENT_OPTIMISTIC_SOURCE_ATTRIBUTE: 'data-optimistic-src',
diff --git a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
index fbfdfddd64aa..695674c00475 100644
--- a/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
+++ b/src/components/Attachments/AttachmentCarousel/CarouselItem.tsx
@@ -34,13 +34,14 @@ function CarouselItem({item, onPress, isFocused, isModalHovered, reportID}: Caro
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {isAttachmentHidden} = useContext(ReportAttachmentsContext);
-    const [isHidden, setIsHidden] = useState(() => (item.reportActionID ? isAttachmentHidden(item.reportActionID) : item.hasBeenFlagged));
+    const [isHidden, setIsHidden] = useState(() => (item.reportActionID && isAttachmentHidden(item.reportActionID)) ?? item.hasBeenFlagged);
 
     const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
             small
             style={style}
             onPress={() => setIsHidden(!isHidden)}
+            testID="moderationButton"
         >
             <Text
                 style={[styles.buttonSmallText, styles.userSelectNone]}
diff --git a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
index 20565c065f33..536a54926181 100644
--- a/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
+++ b/src/components/Attachments/AttachmentCarousel/extractAttachments.ts
@@ -39,13 +39,14 @@ function extractAttachments(
 
                 const fileName = attribs[CONST.ATTACHMENT_ORIGINAL_FILENAME_ATTRIBUTE] || getFileName(`${source}`);
                 attachments.unshift({
+                    reportActionID: attribs['data-id'],
                     attachmentID: attribs[CONST.ATTACHMENT_ID_ATTRIBUTE],
                     source: tryResolveUrlFromApiRoot(attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE]),
                     isAuthTokenRequired: !!attribs[CONST.ATTACHMENT_SOURCE_ATTRIBUTE],
                     file: {name: fileName},
                     duration: Number(attribs[CONST.ATTACHMENT_DURATION_ATTRIBUTE]),
                     isReceipt: false,
-                    hasBeenFlagged: false,
+                    hasBeenFlagged: attribs['data-flagged'] === 'true',
                 });
                 return;
             }
@@ -114,7 +115,9 @@ function extractAttachments(
 
         const decision = getReportActionMessage(action)?.moderationDecision?.decision;
         const hasBeenFlagged = decision === CONST.MODERATION.MODERATOR_DECISION_PENDING_HIDE || decision === CONST.MODERATION.MODERATOR_DECISION_HIDDEN;
-        const html = getReportActionHtml(action).replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`);
+        const html = getReportActionHtml(action)
+            .replaceAll('/>', `data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}"/>`)
+            .replaceAll('<video ', `<video data-flagged="${hasBeenFlagged}" data-id="${action.reportActionID}" `);
         htmlParser.write(getHtmlWithAttachmentID(html, action.reportActionID));
     });
     htmlParser.end();
diff --git a/src/pages/home/report/PureReportActionItem.tsx b/src/pages/home/report/PureReportActionItem.tsx
index d5e68e78d927..94499c37e746 100644
--- a/src/pages/home/report/PureReportActionItem.tsx
+++ b/src/pages/home/report/PureReportActionItem.tsx
@@ -417,7 +417,7 @@ function PureReportActionItem({
         (isHiddenValue: boolean) => {
             setIsHidden(isHiddenValue);
             const message = Array.isArray(action.message) ? action.message?.at(-1) : action.message;
-            const isAttachment = isReportMessageAttachment(message);
+            const isAttachment = CONST.ATTACHMENT_REGEX.test(message?.html ?? '') || isReportMessageAttachment(message);
             if (!isAttachment) {
                 return;
             }
diff --git a/src/pages/home/report/ReportAttachmentsContext.tsx b/src/pages/home/report/ReportAttachmentsContext.tsx
index d118d4d8bee9..0077cc27ad38 100644
--- a/src/pages/home/report/ReportAttachmentsContext.tsx
+++ b/src/pages/home/report/ReportAttachmentsContext.tsx
@@ -20,7 +20,7 @@ function ReportAttachmentsProvider({children}: ChildrenProps) {
         // We only want to store the attachment visibility for the current report.
         // If the current report ID changes, clear the ref.
         hiddenAttachments.current = {};
-    }, [currentReportID]);
+    }, [currentReportID?.currentReportID]);
 
     const contextValue = useMemo(
         () => ({
diff --git a/tests/unit/CarouselItemTest.tsx b/tests/unit/CarouselItemTest.tsx
new file mode 100644
index 000000000000..d25407d08b78
--- /dev/null
+++ b/tests/unit/CarouselItemTest.tsx
@@ -0,0 +1,43 @@
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import CarouselItem from '@components/Attachments/AttachmentCarousel/CarouselItem';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxProvider from '@components/OnyxProvider';
+import {PlaybackContextProvider} from '@components/VideoPlayerContexts/PlaybackContext';
+import {translateLocal} from '@libs/Localize';
+import {ReportAttachmentsProvider} from '@pages/home/report/ReportAttachmentsContext';
+import ONYXKEYS from '@src/ONYXKEYS';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+
+describe('CarouselItem', () => {
+    beforeAll(() => {
+        Onyx.init({keys: ONYXKEYS});
+    });
+    it('should hide flagged attachments initially', async () => {
+        // Given a CarouselItem component with a valid attributes
+        render(
+            <OnyxProvider>
+                <LocaleContextProvider>
+                    <PlaybackContextProvider>
+                        <ReportAttachmentsProvider>
+                            <CarouselItem
+                                item={{
+                                    reportActionID: '1',
+                                    attachmentID: '1_1',
+                                    source: 'img.jpeg',
+                                    hasBeenFlagged: true,
+                                }}
+                                isFocused
+                            />
+                        </ReportAttachmentsProvider>
+                    </PlaybackContextProvider>
+                </LocaleContextProvider>
+            </OnyxProvider>,
+        );
+        await waitForBatchedUpdates();
+
+        // Then initially the attachment should be hidden so the reveal button should be displayed.
+        expect(screen.getByTestId('moderationButton')).toHaveTextContent(translateLocal('moderation.revealMessage'));
+    });
+});