Merge pull request Expensify#94149 from callstack-internal/decompose/ral-10

rlinoz · web-flow · commit 6b171d10dd85 · 2026-06-30T09:27:40.000-03:00
Decompose ReportActionsList: 10
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -5925,20 +5925,13 @@ const CONST = {
     DOT_INDICATOR_TEST_ID: 'DotIndicator',
     ANIMATED_COLLAPSIBLE_CONTENT_TEST_ID: 'animated-collapsible-content',
 
-    CHAT_HEADER_LOADER_HEIGHT: 36,
-
     HORIZONTAL_SPACER: {
         DEFAULT_BORDER_BOTTOM_WIDTH: 1,
         DEFAULT_MARGIN_VERTICAL: 8,
         HIDDEN_MARGIN_VERTICAL: 4,
         HIDDEN_BORDER_BOTTOM_WIDTH: 0,
     },
 
-    LIST_COMPONENTS: {
-        HEADER: 'header',
-        FOOTER: 'footer',
-    },
-
     MISSING_TRANSLATION: 'MISSING TRANSLATION',
 
     /**
@@ -7942,7 +7935,6 @@ const CONST = {
         },
         REPORT: {
             FLOATING_MESSAGE_COUNTER: 'Report-FloatingMessageCounter',
-            LIST_BOUNDARY_LOADER_RETRY: 'Report-ListBoundaryLoaderRetry',
             SEND_BUTTON: 'Report-SendButton',
             ATTACHMENT_PICKER_CREATE_BUTTON: 'Report-AttachmentPickerCreateButton',
             ATTACHMENT_PICKER_EXPAND_BUTTON: 'Report-AttachmentPickerExpandButton',
diff --git a/src/hooks/useMarkAsRead.ts b/src/hooks/useMarkAsRead.ts
@@ -1,5 +1,5 @@
 import {useIsFocused, useRoute} from '@react-navigation/native';
-import {useEffect, useRef, useState} from 'react';
+import {useEffect, useEffectEvent, useRef, useState} from 'react';
 import {DeviceEventEmitter} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import DateUtils from '@libs/DateUtils';
@@ -92,7 +92,7 @@ function useMarkAsRead({reportID, report, transactionThreadReport, sortedVisible
 
     const didMarkOnReportChangeRef = useRef(false);
 
-    useEffect(() => {
+    const handleReportChangeMarkAsRead = useEffectEvent(() => {
         didMarkOnReportChangeRef.current = false;
         if (reportID !== prevReportID) {
             return;
@@ -115,11 +115,14 @@ function useMarkAsRead({reportID, report, transactionThreadReport, sortedVisible
         }
 
         readActionSkippedRef.current = true;
-        // This effect should only run when the newest visible action changes, otherwise every action/report object update can prematurely consume unread state.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [report?.lastVisibleActionCreated, transactionThreadReport?.lastVisibleActionCreated, reportID, isVisible, isReportActionsLoaded]);
+    });
 
+    // Only re-run when the newest visible action changes, otherwise every action/report object update can prematurely consume unread state.
     useEffect(() => {
+        handleReportChangeMarkAsRead();
+    }, [report?.lastVisibleActionCreated, transactionThreadReport?.lastVisibleActionCreated, reportID, isVisible, isReportActionsLoaded]);
+
+    const handleAppVisibilityMarkAsRead = useEffectEvent(() => {
         if (didMarkOnReportChangeRef.current) {
             didMarkOnReportChangeRef.current = false;
             return;
@@ -153,8 +156,11 @@ function useMarkAsRead({reportID, report, transactionThreadReport, sortedVisible
 
         readNewestAction(reportID, true);
         userActiveSince.current = DateUtils.getDBTime();
-        // This effect should only run when app visibility/focus changes; the helper reads the latest report/action values without making every action update mark the report as read.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+
+    // Only re-run when app visibility/focus changes, so action updates don't keep marking the report as read.
+    useEffect(() => {
+        handleAppVisibilityMarkAsRead();
     }, [isVisible, isFocused]);
 
     const markNewestActionAsRead = () => {
diff --git a/src/hooks/useReportActionsScroll.ts b/src/hooks/useReportActionsScroll.ts
@@ -1,5 +1,5 @@
 import {useRoute} from '@react-navigation/native';
-import {useContext, useEffect, useState} from 'react';
+import {useContext, useEffect, useEffectEvent, useState} from 'react';
 import type {NativeScrollEvent, NativeSyntheticEvent, ViewToken} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/FlatList/hooks/useFlatListScrollKey';
@@ -228,12 +228,12 @@ function useReportActionsScroll({
         });
     }, [draftAutoScrollKey, hasNewestReportAction, previousDraftAutoScrollKey, reportScrollManager, scrollOffsetRef, setIsFloatingMessageCounterVisible]);
 
-    useEffect(() => {
+    const scheduleInitialScrollToBottom = useEffectEvent(() => {
         if (initialScrollKey) {
-            return;
+            return undefined;
         }
 
-        const handle = TransitionTracker.runAfterTransitions({
+        return TransitionTracker.runAfterTransitions({
             callback: () => {
                 if (shouldFocusToTopOnMount) {
                     return;
@@ -243,9 +243,12 @@ function useReportActionsScroll({
             },
             waitForUpcomingTransition: true,
         });
-        return () => handle.cancel();
-        // The initial scroll-to-bottom must be scheduled exactly once, on mount; re-running it as deps change would yank the user back down while they read history.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+
+    // The initial scroll-to-bottom must be scheduled exactly once, on mount; re-running it as deps change would yank the user back down while they read history.
+    useEffect(() => {
+        const handle = scheduleInitialScrollToBottom();
+        return () => handle?.cancel();
     }, []);
 
     // Fixes Safari-specific issue where the whisper option is not highlighted correctly on hover after adding new transaction.
@@ -281,18 +284,18 @@ function useReportActionsScroll({
     const lastIOUActionWithError = sortedVisibleReportActions.find((action) => action.errors);
     const prevLastIOUActionWithError = usePrevious(lastIOUActionWithError);
 
-    useEffect(() => {
-        if (lastIOUActionWithError?.reportActionID === prevLastIOUActionWithError?.reportActionID) {
-            return;
+    // Scroll to the bottom when a new errored action appears, so the user sees the failed money request. Re-checked
+    // only when a new action arrives (keyed on lastAction), so loading older history never yanks a user who has
+    // scrolled up. The !lastIOUActionWithError guard keeps a cleared error (retry succeeded / dismissed) from scrolling.
+    const scheduleScrollToNewError = useEffectEvent(() => {
+        if (!lastIOUActionWithError || lastIOUActionWithError.reportActionID === prevLastIOUActionWithError?.reportActionID) {
+            return undefined;
         }
-        const handle = TransitionTracker.runAfterTransitions({
-            callback: () => {
-                reportScrollManager.scrollToBottom();
-            },
-        });
-        return () => handle.cancel();
-        // Intentionally keyed to lastAction (not the error object) so the scroll re-evaluates once per new action; the reportActionID comparison above guards actual re-runs.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        return TransitionTracker.runAfterTransitions({callback: () => reportScrollManager.scrollToBottom()});
+    });
+    useEffect(() => {
+        const handle = scheduleScrollToNewError();
+        return () => handle?.cancel();
     }, [lastAction]);
 
     const scrollToBottomAndMarkReportAsRead = () => {
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -9356,10 +9356,6 @@ Fügen Sie weitere Ausgabelimits hinzu, um den Cashflow Ihres Unternehmens zu sc
         takeMeToExpensifyClassic: 'Bring mich zu Expensify Classic',
         goBackJustOnce: 'Nur dieses Mal zurück',
     },
-    listBoundary: {
-        errorMessage: 'Beim Laden weiterer Nachrichten ist ein Fehler aufgetreten',
-        tryAgain: 'Erneut versuchen',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'hat eine Quittung mit dieser Transaktion abgeglichen',
     },
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -9437,10 +9437,6 @@ const translations = {
         takeMeToExpensifyClassic: 'Take me to Expensify Classic',
         goBackJustOnce: 'Go back just once',
     },
-    listBoundary: {
-        errorMessage: 'An error occurred while loading more messages',
-        tryAgain: 'Try again',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'matched a receipt to this transaction',
     },
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -9516,10 +9516,6 @@ ${amount} para ${merchant} - ${date}`,
         takeMeToExpensifyClassic: 'Llévame a Expensify Classic',
         goBackJustOnce: 'Volver solo esta vez',
     },
-    listBoundary: {
-        errorMessage: 'Se ha producido un error al cargar más mensajes',
-        tryAgain: 'Inténtalo de nuevo',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'encontró un recibo para esta transacción',
     },
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -9390,10 +9390,6 @@ Ajoutez davantage de règles de dépenses pour protéger la trésorerie de l’e
         takeMeToExpensifyClassic: 'M’emmener vers Expensify Classic',
         goBackJustOnce: 'Revenir une seule fois',
     },
-    listBoundary: {
-        errorMessage: 'Une erreur est survenue lors du chargement de messages supplémentaires',
-        tryAgain: 'Réessayer',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'a fait correspondre un reçu à cette transaction',
     },
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -9346,10 +9346,6 @@ Aggiungi altre regole di spesa per proteggere il flusso di cassa aziendale.`,
         takeMeToExpensifyClassic: 'Portami a Expensify Classic',
         goBackJustOnce: 'Torna solo per questa volta',
     },
-    listBoundary: {
-        errorMessage: 'Si è verificato un errore durante il caricamento di altri messaggi',
-        tryAgain: 'Riprova',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'ha associato una ricevuta a questa transazione',
     },
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -9226,10 +9226,6 @@ ${reportName}`,
         takeMeToExpensifyClassic: 'Expensify Classic に移動',
         goBackJustOnce: '一度だけ戻る',
     },
-    listBoundary: {
-        errorMessage: 'さらにメッセージを読み込む際にエラーが発生しました',
-        tryAgain: '再試行',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'この取引にレシートを照合しました',
     },
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -9315,10 +9315,6 @@ er bestedingsregels toe om de kasstroom van het bedrijf te beschermen.`,
         takeMeToExpensifyClassic: 'Breng me naar Expensify Classic',
         goBackJustOnce: 'Eenmalig teruggaan',
     },
-    listBoundary: {
-        errorMessage: 'Er is een fout opgetreden bij het laden van meer berichten',
-        tryAgain: 'Probeer het opnieuw',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'heeft een bonnetje aan deze transactie gekoppeld',
     },
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -9299,10 +9299,6 @@ Dodaj więcej zasad wydatków, żeby chronić płynność finansową firmy.`,
         takeMeToExpensifyClassic: 'Przejdź do Expensify Classic',
         goBackJustOnce: 'Wróć tylko raz',
     },
-    listBoundary: {
-        errorMessage: 'Wystąpił błąd podczas wczytywania kolejnych wiadomości',
-        tryAgain: 'Spróbuj ponownie',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'dopasowano paragon do tej transakcji',
     },
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -9302,10 +9302,6 @@ Adicione mais regras de gasto para proteger o fluxo de caixa da empresa.`,
         takeMeToExpensifyClassic: 'Leve-me para o Expensify Classic',
         goBackJustOnce: 'Voltar apenas desta vez',
     },
-    listBoundary: {
-        errorMessage: 'Ocorreu um erro ao carregar mais mensagens',
-        tryAgain: 'Tentar novamente',
-    },
     systemMessage: {
         mergedWithCashTransaction: 'correspondeu um recibo a esta transação',
     },
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -9050,10 +9050,6 @@ ${reportName}`,
         takeMeToExpensifyClassic: '带我前往 Expensify 经典版',
         goBackJustOnce: '仅此一次返回',
     },
-    listBoundary: {
-        errorMessage: '加载更多消息时出错',
-        tryAgain: '重试',
-    },
     systemMessage: {
         mergedWithCashTransaction: '已将一张收据匹配到此交易',
     },
diff --git a/src/pages/home/report/ConciergeThinkingMessage.tsx b/src/pages/home/report/ConciergeThinkingMessage.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import Animated, {Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import Icon from '@components/Icon';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -25,22 +24,20 @@ import ReportActionItemMessageHeaderSender from '@pages/inbox/report/ReportActio
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Report} from '@src/types/onyx';
 
 type ConciergeThinkingMessageProps = {
     /** The report for this thinking message */
-    report: OnyxEntry<Report>;
+    reportID: string;
 };
 
 /**
  * Renders one thinking bubble per agent the room is actively processing for (Concierge and/or
  * custom agents). The candidate set comes from the per-agent processing-indicator NVP, so each
  * bubble is attributed to the agent the server actually named — not a guessed persona.
  */
-function ConciergeThinkingMessage({report}: ConciergeThinkingMessageProps) {
+function ConciergeThinkingMessage({reportID}: ConciergeThinkingMessageProps) {
     const {candidateAgentIDs} = useAgentZeroStatus();
-    const shouldSuppress = useShouldSuppressConciergeIndicators(report?.reportID);
-    const reportID = report?.reportID;
+    const shouldSuppress = useShouldSuppressConciergeIndicators(reportID);
 
     if (shouldSuppress || !reportID || candidateAgentIDs.length === 0) {
         return null;
diff --git a/src/pages/inbox/report/ListBoundaryLoader.tsx b/src/pages/inbox/report/ListBoundaryLoader.tsx
diff --git a/src/pages/inbox/report/ReportActionsList.tsx b/src/pages/inbox/report/ReportActionsList.tsx
diff --git a/src/pages/inbox/report/ReportActionsListHeader.tsx b/src/pages/inbox/report/ReportActionsListHeader.tsx
diff --git a/src/styles/index.ts b/src/styles/index.ts
diff --git a/tests/unit/ConciergeThinkingMessageAvatarTest.tsx b/tests/unit/ConciergeThinkingMessageAvatarTest.tsx
diff --git a/tests/unit/ReportActionsListHeaderTest.tsx b/tests/unit/ReportActionsListHeaderTest.tsx
diff --git a/tests/unit/useReportActionsScrollTest.tsx b/tests/unit/useReportActionsScrollTest.tsx
