Merge pull request Expensify#68863 from callstack-internal/fix/unreported-expenses-list

fix: hide show more button, get the data when scrolled to the bottom

Author: mountiny

src/components/SelectionList/BaseSelectionList.tsx

@@ -114,6 +114,7 @@ function BaseSelectionList<TItem extends ListItem>({
     listHeaderContent,
     onEndReached = () => {},
     onEndReachedThreshold,
+    shouldSkipShowMoreButton = false,
     windowSize = 5,
     updateCellsBatchingPeriod = 50,
     removeClippedSubviews = true,
@@ -296,6 +297,12 @@ function BaseSelectionList<TItem extends ListItem>({
     }, [customListHeader, customListHeaderHeight, sections, canSelectMultiple, isItemSelected, itemHeights, getItemHeight]);
 
     const [slicedSections, ShowMoreButtonInstance] = useMemo(() => {
+        if (shouldSkipShowMoreButton) {
+            // When skipping the Show More button, return all sections without any slicing
+            const processedSections = getSectionsWithIndexOffset(sections as Array<SectionListDataType<TItem>>);
+            return [processedSections, null];
+        }
+
         let remainingOptionsLimit = CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage;
         const processedSections = getSectionsWithIndexOffset(
             sections.map((section) => {
@@ -322,7 +329,7 @@ function BaseSelectionList<TItem extends ListItem>({
         // we don't need to add styles here as they change
         // we don't need to add flattenedSections here as they will change along with sections
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, [sections, currentPage]);
+    }, [sections, currentPage, shouldSkipShowMoreButton]);
 
     // Disable `Enter` shortcut if the active element is a button or checkbox
     const disableEnterShortcut = activeElementRole && [CONST.ROLE.BUTTON, CONST.ROLE.CHECKBOX].includes(activeElementRole as ButtonOrCheckBoxRoles);

src/components/SelectionList/types.ts

@@ -794,6 +794,9 @@ type SelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
      */
     onEndReachedThreshold?: number;
 
+    /** Whether to skip the Show More button pagination logic */
+    shouldSkipShowMoreButton?: boolean;
+
     /**
      * While maxToRenderPerBatch tells the amount of items rendered per batch, setting updateCellsBatchingPeriod tells your VirtualizedList the delay in milliseconds between batch renders (how frequently your component will be rendering the windowed items).
      * https://reactnative.dev/docs/optimizing-flatlist-configuration#updatecellsbatchingperiod

src/components/Skeletons/UnreportedExpensesSkeleton.tsx

@@ -80,7 +80,7 @@ function UnreportedExpensesSkeleton({fixedNumberOfItems}: {fixedNumberOfItems?:
 
     return (
         <View
-            style={[styles.flex1, styles.pt3]}
+            style={styles.flex1}
             ref={containerRef}
         >
             <ItemListSkeletonView

src/pages/AddUnreportedExpense.tsx

@@ -50,6 +50,7 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
     const [hasMoreUnreportedTransactionsResults] = useOnyx(ONYXKEYS.HAS_MORE_UNREPORTED_TRANSACTIONS_RESULTS, {canBeMissing: true});
     const [isLoadingUnreportedTransactions] = useOnyx(ONYXKEYS.IS_LOADING_UNREPORTED_TRANSACTIONS, {canBeMissing: true});
     const shouldShowUnreportedTransactionsSkeletons = isLoadingUnreportedTransactions && hasMoreUnreportedTransactionsResults && !isOffline;
+
     function getUnreportedTransactions(transactions: OnyxCollection<Transaction>) {
         if (!transactions) {
             return [];
@@ -212,6 +213,7 @@ function AddUnreportedExpense({route}: AddUnreportedExpensePageType) {
                 }}
                 onEndReached={fetchMoreUnreportedTransactions}
                 onEndReachedThreshold={0.75}
+                shouldSkipShowMoreButton
                 listFooterContent={shouldShowUnreportedTransactionsSkeletons ? <UnreportedExpensesSkeleton fixedNumberOfItems={3} /> : undefined}
             >
                 {!!errorMessage && (