Expensify · janicduplessis · Nov 6, 2024 · Nov 19, 2024 · Dec 7, 2024 · Dec 7, 2024
@@ -1,29  1,123 @@
-import type {ForwardedRef} from 'react';
-import React, {forwardRef, useMemo} from 'react';
-import type {FlatListProps, FlatList as RNFlatList, ScrollViewProps} from 'react-native';
 import type {ForwardedRef, MutableRefObject} from 'react';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {FlatListProps, ListRenderItem, ListRenderItemInfo, FlatList as RNFlatList, ScrollViewProps} from 'react-native';
 import FlatList from '@components/FlatList';
 import usePrevious from '@hooks/usePrevious';
 import getInitialPaginationSize from './getInitialPaginationSize';
 
-type BaseInvertedFlatListProps<T> = FlatListProps<T> & {
 // Adapted from https://github.com/facebook/react-native/blob/29a0d7c3b201318a873db0d1b62923f4ce720049/packages/virtualized-lists/Lists/VirtualizeUtils.js#L237
 function defaultKeyExtractor<T>(item: T | {key: string} | {id: string}, index: number): string {
     if (item != null) {
         if (typeof item === 'object' && 'key' in item) {
             return item.key;
         }
         if (typeof item === 'object' && 'id' in item) {
             return item.id;
         }
     }
     return String(index);
 }
 
 type BaseInvertedFlatListProps<T> = Omit<FlatListProps<T>, 'data' | 'renderItem' | 'initialScrollIndex'> & {
     shouldEnableAutoScrollToTopThreshold?: boolean;
     data: T[];
     renderItem: ListRenderItem<T>;
     initialScrollKey?: string | null;
 };
 
 const AUTOSCROLL_TO_TOP_THRESHOLD = 250;
 const RENDER_DELAY = 500;
 
 function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: ForwardedRef<RNFlatList>) {
-    const {shouldEnableAutoScrollToTopThreshold, ...rest} = props;
     const {shouldEnableAutoScrollToTopThreshold, initialScrollKey, data, onStartReached, renderItem, keyExtractor = defaultKeyExtractor, ...rest} = props;
     // `initialScrollIndex` doesn't work properly with FlatList, this uses an alternative approach to achieve the same effect.
     // What we do is start rendering the list from `initialScrollKey` and then whenever we reach the start we render more
     // previous items, until everything is rendered. We also progressively render new data that is added at the start of the
     // list to make sure `maintainVisibleContentPosition` works as expected.
     const [currentDataId, setCurrentDataId] = useState(() => {
         if (initialScrollKey) {
             return initialScrollKey;
         }
         const initialItem = data.at(0);
         return initialItem ? keyExtractor(initialItem, 0) : null;
     });
     const [isInitialData, setIsInitialData] = useState(true);
     const currentDataIndex = useMemo(() => data.findIndex((item, index) => keyExtractor(item, index) === currentDataId), [currentDataId, data, keyExtractor]);
     const displayedData = useMemo(() => {
         if (currentDataIndex === -1) {
             return [];
         }
         if (currentDataIndex === 0) {
             return data;
         }
         return data.slice(Math.max(0, currentDataIndex - (isInitialData ? 0 : getInitialPaginationSize)));
     }, [currentDataIndex, data, isInitialData]);
 
     const isLoadingData = data.length > displayedData.length;
     const wasLoadingData = usePrevious(isLoadingData);
     const dataIndexDifference = data.length - displayedData.length;
 
     // Queue up updates to the displayed data to avoid adding too many at once and cause jumps in the list.
     const queuedRenders = useRef<Array<{distanceFromStart: number}>>([]);
     const isRendering = useRef(false);
 
     const renderTimeout = useRef<NodeJS.Timeout>();
     useEffect(() => {
         return () => {
             clearTimeout(renderTimeout.current);
         };
     }, []);
 
     // Use a ref here to make sure we always operate on the latest state.
     const updateDisplayedDataRef = useRef() as MutableRefObject<() => void>;
     // eslint-disable-next-line react-compiler/react-compiler
     updateDisplayedDataRef.current = () => {
         const info = queuedRenders.current.shift();
         if (!info) {
             isRendering.current = false;
             return;
         }
         isRendering.current = true;
 
         if (!isLoadingData) {
             onStartReached?.(info);
         }
         setIsInitialData(false);
         const firstDisplayedItem = displayedData.at(0);
         setCurrentDataId(firstDisplayedItem ? keyExtractor(firstDisplayedItem, currentDataIndex) : '');
 
         renderTimeout.current = setTimeout(() => {
             updateDisplayedDataRef.current();
         }, RENDER_DELAY);
     };
 
     const handleStartReached = useCallback((info: {distanceFromStart: number}) => {
         queuedRenders.current.push(info);
         if (!isRendering.current) {
             updateDisplayedDataRef.current();
         }
     }, []);
 
     const handleRenderItem = useCallback(
         ({item, index, separators}: ListRenderItemInfo<T>) => {
             // Adjust the index passed here so it matches the original data.
             return renderItem({item, index: index   dataIndexDifference, separators});
         },
         [renderItem, dataIndexDifference],
     );
 
     const maintainVisibleContentPosition = useMemo(() => {
         const config: ScrollViewProps['maintainVisibleContentPosition'] = {
             // This needs to be 1 to avoid using loading views as anchors.
             minIndexForVisible: 1,
         };
 
-        if (shouldEnableAutoScrollToTopThreshold) {
         if (shouldEnableAutoScrollToTopThreshold && !isLoadingData && !wasLoadingData) {
             config.autoscrollToTopThreshold = AUTOSCROLL_TO_TOP_THRESHOLD;
         }
 
         return config;
-    }, [shouldEnableAutoScrollToTopThreshold]);
     }, [shouldEnableAutoScrollToTopThreshold, isLoadingData, wasLoadingData]);
 
     return (
         <FlatList
@@ -32,6  126,10 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
             ref={ref}
             maintainVisibleContentPosition={maintainVisibleContentPosition}
             inverted
             data={displayedData}
             onStartReached={handleStartReached}
             renderItem={handleRenderItem}
             keyExtractor={keyExtractor}
         />
     );
 }
@@ -41,3  139,5 @@ BaseInvertedFlatList.displayName = 'BaseInvertedFlatList';
 export default forwardRef(BaseInvertedFlatList);
 
 export {AUTOSCROLL_TO_TOP_THRESHOLD};
 
 export type {BaseInvertedFlatListProps};
@@ -1,10  1,11 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef} from 'react';
-import type {FlatList, FlatListProps} from 'react-native';
 import type {FlatList} from 'react-native';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import type {BaseInvertedFlatListProps} from './BaseInvertedFlatList';
 import CellRendererComponent from './CellRendererComponent';
 
-function BaseInvertedFlatListWithRef<T>(props: FlatListProps<T>, ref: ForwardedRef<FlatList>) {
 function BaseInvertedFlatListWithRef<T>(props: BaseInvertedFlatListProps<T>, ref: ForwardedRef<FlatList>) {
     return (
         <BaseInvertedFlatList
             // eslint-disable-next-line react/jsx-props-no-spreading

@@ -1,18  1,15 @@
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useEffect, useRef} from 'react';
-import type {FlatList, FlatListProps, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import type {FlatList, NativeScrollEvent, NativeSyntheticEvent} from 'react-native';
 import {DeviceEventEmitter} from 'react-native';
 import CONST from '@src/CONST';
 import BaseInvertedFlatList from './BaseInvertedFlatList';
 import type {BaseInvertedFlatListProps} from './BaseInvertedFlatList';
 import CellRendererComponent from './CellRendererComponent';
 
-type InvertedFlatListProps<T> = FlatListProps<T> & {
-    shouldEnableAutoScrollToTopThreshold?: boolean;
-};
-
 // This is adapted from https://codesandbox.io/s/react-native-dsyse
 // It's a HACK alert since FlatList has inverted scrolling on web
-function InvertedFlatList<T>({onScroll: onScrollProp = () => {}, ...props}: InvertedFlatListProps<T>, ref: ForwardedRef<FlatList>) {
 function InvertedFlatList<T>({onScroll: onScrollProp = () => {}, ...props}: BaseInvertedFlatListProps<T>, ref: ForwardedRef<FlatList>) {
     const lastScrollEvent = useRef<number | null>(null);
     const scrollEndTimeout = useRef<NodeJS.Timeout | null>(null);
     const updateInProgress = useRef<boolean>(false);

@@ -261,8  261,8 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     );
 
     const isPendingActionExist = !!reportActions.at(0)?.pendingAction;
-    const doesCreatedActionExists = useCallback(() => !!sortedAllReportActions?.findLast((action) => ReportActionsUtils.isCreatedAction(action)), [sortedAllReportActions]);
-    const isLinkedMessageAvailable = useMemo(() => indexOfLinkedMessage > -1, [indexOfLinkedMessage]);
     const doesCreatedActionExists = useCallback(() => !!reportActions?.findLast((action) => ReportActionsUtils.isCreatedAction(action)), [reportActions]);
     const isLinkedMessageAvailable = indexOfLinkedMessage > -1;
 
     // The linked report actions should have at least 15 messages (counting as 1 page) above them to fill the screen.
     // If the count is too high (equal to or exceeds the web pagination size / 50) and there are no cached messages in the report,

@@ -47,9  47,6 @@ type ReportActionsListProps = {
     /** The transaction thread report associated with the current report, if any */
     transactionThreadReport: OnyxEntry<OnyxTypes.Report>;
 
-    /** Array of report actions for the current report */
-    reportActions: OnyxTypes.ReportAction[];
-
     /** The report's parentReportAction */
     parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
 
@@ -132,7  129,6 @@ const onScrollToIndexFailed = () => {};
 function ReportActionsList({
     report,
     transactionThreadReport,
-    reportActions = [],
     parentReportAction,
     isLoadingInitialReportActions = false,
     isLoadingOlderReportActions = false,
@@ -584,7  580,7 @@ function ReportActionsList({
         ({item: reportAction, index}: ListRenderItemInfo<OnyxTypes.ReportAction>) => (
             <ReportActionsListItemRenderer
                 reportAction={reportAction}
-                reportActions={reportActions}
                 reportActions={sortedReportActions}
                 parentReportAction={parentReportAction}
                 parentReportActionForTransactionThread={parentReportActionForTransactionThread}
                 index={index}
@@ -610,7  606,7 @@ function ReportActionsList({
             mostRecentIOUReportActionID,
             shouldHideThreadDividerLine,
             parentReportAction,
-            reportActions,
             sortedReportActions,
             transactionThreadReport,
             parentReportActionForTransactionThread,
             shouldUseThreadDividerLine,
@@ -747,6  743,7 @@ function ReportActionsList({
                     extraData={extraData}
                     key={listID}
                     shouldEnableAutoScrollToTopThreshold={shouldEnableAutoScrollToTopThreshold}
                     initialScrollKey={route?.params?.reportActionID}
                 />
             </View>
         </>