diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 6f02e4b1c8fd..a4841106440f 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -50,7 +50,6 @@ import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import HeaderView from './HeaderView'; -import getInitialPaginationSize from './report/getInitialPaginationSize'; import ReportActionsView from './report/ReportActionsView'; import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; @@ -288,18 +287,10 @@ function ReportScreen({ const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}]; const isEmptyChat = useMemo(() => ReportUtils.isEmptyReport(report), [report]); const isOptimisticDelete = report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED; - const indexOfLinkedMessage = useMemo( - (): number => sortedAllReportActions.findIndex((obj) => String(obj.reportActionID) === String(reportActionIDFromRoute)), + const isLinkedMessageAvailable = useMemo( + (): boolean => sortedAllReportActions.findIndex((obj) => String(obj.reportActionID) === String(reportActionIDFromRoute)) > -1, [sortedAllReportActions, reportActionIDFromRoute], ); - const doesCreatedActionExists = ReportActionsUtils.isCreatedAction(reportActions.at(-1)); - const isLinkedMessageAvailable = useMemo(() => indexOfLinkedMessage > -1, [indexOfLinkedMessage]); - const paginationSize = getInitialPaginationSize; - - // The linked report actions should have at least minimum amount (15) messages (count as 1 page) above it, to fill the screen. - // If it is too much (same as web pagination size/50) and there is no cached messages on the report, - // the OpenReport will be called each time user scroll up report a bit, click on reportpreview then go back - const isLinkedMessagePageReady = isLinkedMessageAvailable && (sortedAllReportActions.length - indexOfLinkedMessage > 15 || doesCreatedActionExists); // If there's a non-404 error for the report we should show it instead of blocking the screen const hasHelpfulErrors = Object.keys(report?.errorFields ?? {}).some((key) => key !== 'notFound'); @@ -391,11 +382,13 @@ function ReportScreen({ const isLoading = isLoadingApp ?? (!reportIDFromRoute || (!isSidebarLoaded && !isReportOpenInRHP) || PersonalDetailsUtils.isPersonalDetailsEmpty()); const shouldShowSkeleton = - (isLinkingToMessage && !isLinkedMessagePageReady) || - !isCurrentReportLoadedFromOnyx || - (reportActions.length < paginationSize && !doesCreatedActionExists && !!reportMetadata?.isLoadingInitialReportActions) || - isLoading; - + !isLinkedMessageAvailable && + (isLinkingToMessage || + !isCurrentReportLoadedFromOnyx || + (reportActions.length === 0 && !!reportMetadata?.isLoadingInitialReportActions) || + isLoading || + (!!reportActionIDFromRoute && reportMetadata?.isLoadingInitialReportActions)); + const shouldShowReportActionList = isCurrentReportLoadedFromOnyx && !isLoading; const currentReportIDFormRoute = route.params?.reportID; // eslint-disable-next-line rulesdir/no-negated-variables @@ -520,18 +513,6 @@ function ReportScreen({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [isLoadingReportOnyx]); - useEffect(() => { - if (isLoadingReportOnyx || !reportActionIDFromRoute || isLinkedMessagePageReady) { - return; - } - - // This function is triggered when a user clicks on a link to navigate to a report. - // For each link click, we retrieve the report data again, even though it may already be cached. - // There should be only one openReport execution per page start or navigating - fetchReportIfNeeded(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [route, isLinkedMessagePageReady]); - // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates useEffect(() => { if (!shouldUseNarrowLayout || !isFocused || prevIsFocused || !ReportUtils.isChatThread(report) || report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) { @@ -764,7 +745,7 @@ function ReportScreen({ style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]} onLayout={onListLayout} > - {!shouldShowSkeleton && ( + {shouldShowReportActionList && ( reportActions?.at(-1), [reportActions]); const hasCreatedAction = oldestReportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED; + useEffect(() => { + if (!reportActionID || indexOfLinkedAction > -1) { + return; + } + + // This function is triggered when a user clicks on a link to navigate to a report. + // For each link click, we retrieve the report data again, even though it may already be cached. + // There should be only one openReport execution per page start or navigating + Report.openReport(reportID, reportActionID); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [route, indexOfLinkedAction]); + useEffect(() => { const wasLoginChangedDetected = prevAuthTokenType === CONST.AUTH_TOKEN_TYPES.ANONYMOUS && !session?.authTokenType; if (wasLoginChangedDetected && didUserLogInDuringSession() && isUserCreatedPolicyRoom(report)) {