Merge branch 'main' into receipt_image_resize_fix_40788

Expensify · May 17, 2024 · c19a2f3 · c19a2f3
2 parents e8d20ed + e8ae3c5
commit c19a2f3
Show file tree

Hide file tree

Showing 15 changed files with 113 additions and 85 deletions.
diff --git a/docs/articles/expensify-classic/workspaces/reports/Currency.md b/docs/articles/expensify-classic/workspaces/reports/Currency.md
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -4767,6 +4767,7 @@ const CONST = {
         DISTANCE: 'distance',
     },
 
+    SEARCH_RESULTS_PAGE_SIZE: 50,
     SEARCH_BOTTOM_TAB_URL: '/Search_Bottom_Tab',
 
     SEARCH_DATA_TYPES: {

diff --git a/src/components/MoneyRequestConfirmationList.tsx b/src/components/MoneyRequestConfirmationList.tsx
@@ -1233,6 +1233,7 @@ function MoneyRequestConfirmationList({
             shouldPreventDefaultFocusOnSelectRow
             footerContent={footerContent}
             listFooterContent={listFooterContent}
+            containerStyle={[styles.flexBasisAuto]}
         />
     );
 }

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -9,6 +9,7 @@ import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
 import EmptySearchView from '@pages/Search/EmptySearchView';
 import useCustomBackHandler from '@pages/Search/useCustomBackHandler';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -35,14 +36,15 @@ function Search({query, policyIDs}: SearchProps) {
             return;
         }
 
-        SearchActions.search(hash, query, policyIDs);
+        SearchActions.search(hash, query, 0, policyIDs);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hash, isOffline]);
 
-    const isLoading = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;
-    const shouldShowEmptyState = !isLoading && isEmptyObject(searchResults?.data);
+    const isLoadingInitialItems = (!isOffline && isLoadingOnyxValue(searchResultsMeta)) || searchResults?.data === undefined;
+    const isLoadingMoreItems = !isLoadingInitialItems && searchResults?.search?.isLoading;
+    const shouldShowEmptyState = !isLoadingInitialItems && isEmptyObject(searchResults?.data);
 
-    if (isLoading) {
+    if (isLoadingInitialItems) {
         return <TableListItemSkeleton shouldAnimate />;
     }
 
@@ -58,6 +60,14 @@ function Search({query, policyIDs}: SearchProps) {
         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(query, reportID));
     };
 
+    const fetchMoreResults = () => {
+        if (!searchResults?.search?.hasMoreResults || isLoadingInitialItems || isLoadingMoreItems) {
+            return;
+        }
+        const currentOffset = searchResults?.search?.offset ?? 0;
+        SearchActions.search(hash, query, currentOffset + CONST.SEARCH_RESULTS_PAGE_SIZE);
+    };
+
     const type = SearchUtils.getSearchType(searchResults?.search);
 
     if (type === undefined) {
@@ -80,6 +90,16 @@ function Search({query, policyIDs}: SearchProps) {
             listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}
             containerStyle={[styles.pv0]}
             showScrollIndicator={false}
+            onEndReachedThreshold={0.75}
+            onEndReached={fetchMoreResults}
+            listFooterContent={
+                isLoadingMoreItems ? (
+                    <TableListItemSkeleton
+                        shouldAnimate
+                        fixedNumItems={5}
+                    />
+                ) : undefined
+            }
         />
     );
 }

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -76,6 +76,8 @@ function BaseSelectionList<TItem extends ListItem>(
         sectionTitleStyles,
         textInputAutoFocus = true,
         shouldTextInputInterceptSwipe = false,
+        onEndReached = () => {},
+        onEndReachedThreshold,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -618,6 +620,8 @@ function BaseSelectionList<TItem extends ListItem>(
                                 onLayout={onSectionListLayout}
                                 style={(!maxToRenderPerBatch || (shouldHideListOnInitialRender && isInitialSectionListRender)) && styles.opacity0}
                                 ListFooterComponent={listFooterContent ?? ShowMoreButtonInstance}
+                                onEndReached={onEndReached}
+                                onEndReachedThreshold={onEndReachedThreshold}
                             />
                             {children}
                         </>

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -365,6 +365,17 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
      * When false, the list will render immediately and scroll to the bottom which works great for small lists.
      */
     shouldHideListOnInitialRender?: boolean;
+
+    /** Called once when the scroll position gets within onEndReachedThreshold of the rendered content. */
+    onEndReached?: () => void;
+
+    /**
+     * How far from the end (in units of visible length of the list) the bottom edge of the
+     * list must be from the end of the content to trigger the `onEndReached` callback.
+     * Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
+     * within half the visible length of the list.
+     */
+    onEndReachedThreshold?: number;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {

diff --git a/src/components/Skeletons/ItemListSkeletonView.tsx b/src/components/Skeletons/ItemListSkeletonView.tsx
@@ -8,13 +8,14 @@ import CONST from '@src/CONST';
 type ListItemSkeletonProps = {
     shouldAnimate?: boolean;
     renderSkeletonItem: (args: {itemIndex: number}) => React.ReactNode;
+    fixedNumItems?: number;
 };
 
-function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem}: ListItemSkeletonProps) {
+function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem, fixedNumItems}: ListItemSkeletonProps) {
     const theme = useTheme();
     const themeStyles = useThemeStyles();
 
-    const [numItems, setNumItems] = useState(0);
+    const [numItems, setNumItems] = useState(fixedNumItems ?? 0);
     const skeletonViewItems = useMemo(() => {
         const items = [];
         for (let i = 0; i < numItems; i++) {
@@ -38,6 +39,10 @@ function ItemListSkeletonView({shouldAnimate = true, renderSkeletonItem}: ListIt
         <View
             style={[themeStyles.flex1, themeStyles.overflowHidden]}
             onLayout={(event) => {
+                if (fixedNumItems) {
+                    return;
+                }
+
                 const newNumItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT);
                 if (newNumItems === numItems) {
                     return;

diff --git a/src/components/Skeletons/TableListItemSkeleton.tsx b/src/components/Skeletons/TableListItemSkeleton.tsx
@@ -4,16 +4,18 @@ import ItemListSkeletonView from './ItemListSkeletonView';
 
 type TableListItemSkeletonProps = {
     shouldAnimate?: boolean;
+    fixedNumItems?: number;
 };
 
 const barHeight = '10';
 const shortBarWidth = '40';
 const longBarWidth = '120';
 
-function TableListItemSkeleton({shouldAnimate = true}: TableListItemSkeletonProps) {
+function TableListItemSkeleton({shouldAnimate = true, fixedNumItems}: TableListItemSkeletonProps) {
     return (
         <ItemListSkeletonView
             shouldAnimate={shouldAnimate}
+            fixedNumItems={fixedNumItems}
             renderSkeletonItem={() => (
                 <>
                     <Rect

diff --git a/src/libs/API/parameters/Search.ts b/src/libs/API/parameters/Search.ts
@@ -2,6 +2,7 @@ type SearchParams = {
     query: string;
     policyIDs?: string;
     hash: number;
+    offset: number;
 };
 
 export default SearchParams;
diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
@@ -1,8 +1,35 @@
+import Onyx from 'react-native-onyx';
+import type {OnyxUpdate} from 'react-native-onyx';
 import * as API from '@libs/API';
 import {READ_COMMANDS} from '@libs/API/types';
+import ONYXKEYS from '@src/ONYXKEYS';
 
-function search(hash: number, query: string, policyIDs?: string) {
-    API.read(READ_COMMANDS.SEARCH, {hash, query, policyIDs});
+function search(hash: number, query: string, offset = 0, policyIDs?: string) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
+            value: {
+                search: {
+                    isLoading: true,
+                },
+            },
+        },
+    ];
+
+    const finallyData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`,
+            value: {
+                search: {
+                    isLoading: false,
+                },
+            },
+        },
+    ];
+
+    API.read(READ_COMMANDS.SEARCH, {hash, query, offset, policyIDs}, {optimisticData, finallyData});
 }
 
 export {

diff --git a/src/pages/iou/request/step/IOURequestStepMerchant.tsx b/src/pages/iou/request/step/IOURequestStepMerchant.tsx
@@ -97,9 +97,9 @@ function IOURequestStepMerchant({
             navigateBack();
             return;
         }
-        IOU.setMoneyRequestMerchant(transactionID, newMerchant ?? '', !isEditing);
+        // When creating/editing an expense, newMerchant can be blank so we fall back on PARTIAL_TRANSACTION_MERCHANT
+        IOU.setMoneyRequestMerchant(transactionID, newMerchant || CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT, !isEditing);
         if (isEditing) {
-            // When creating a new expense, newMerchant can be blank so we fall back on PARTIAL_TRANSACTION_MERCHANT
             IOU.updateMoneyRequestMerchant(transactionID, reportID, newMerchant || CONST.TRANSACTION.PARTIAL_TRANSACTION_MERCHANT, policy, policyTags, policyCategories);
         }
         navigateBack();

diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
@@ -19,6 +19,7 @@ type SearchResultsInfo = {
     offset: number;
     type: string;
     hasMoreResults: boolean;
+    isLoading: boolean;
 };
 
 type SearchPersonalDetails = {

diff --git a/tests/actions/PolicyCategoryTest.ts b/tests/actions/PolicyCategoryTest.ts
@@ -6,6 +6,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import createRandomPolicy from '../utils/collections/policies';
 import createRandomPolicyCategories from '../utils/collections/policyCategory';
 import * as TestHelper from '../utils/TestHelper';
+import type {MockFetch} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 OnyxUpdateManager();
@@ -16,9 +17,10 @@ describe('actions/PolicyCategory', () => {
         });
     });
 
+    let mockFetch: MockFetch;
     beforeEach(() => {
-        // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
         global.fetch = TestHelper.getGlobalFetchMock();
+        mockFetch = fetch as MockFetch;
         return Onyx.clear().then(waitForBatchedUpdates);
     });
 
@@ -27,8 +29,7 @@ describe('actions/PolicyCategory', () => {
             const fakePolicy = createRandomPolicy(0);
             fakePolicy.requiresCategory = false;
 
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            fetch.pause();
+            mockFetch?.pause?.();
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${fakePolicy.id}`, fakePolicy);
             Policy.setWorkspaceRequiresCategory(fakePolicy.id, true);
             await waitForBatchedUpdates();
@@ -46,8 +47,7 @@ describe('actions/PolicyCategory', () => {
                     },
                 });
             });
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            await fetch.resume();
+            await mockFetch?.resume?.();
             await waitForBatchedUpdates();
             await new Promise<void>((resolve) => {
                 const connectionID = Onyx.connect({
@@ -68,8 +68,7 @@ describe('actions/PolicyCategory', () => {
             const fakePolicy = createRandomPolicy(0);
             const fakeCategories = createRandomPolicyCategories(3);
             const newCategoryName = 'New category';
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            fetch.pause();
+            mockFetch?.pause?.();
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${fakePolicy.id}`, fakePolicy);
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${fakePolicy.id}`, fakeCategories);
             Policy.createPolicyCategory(fakePolicy.id, newCategoryName);
@@ -89,8 +88,7 @@ describe('actions/PolicyCategory', () => {
                     },
                 });
             });
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            await fetch.resume();
+            await mockFetch?.resume?.();
             await waitForBatchedUpdates();
             await new Promise<void>((resolve) => {
                 const connectionID = Onyx.connect({
@@ -115,8 +113,7 @@ describe('actions/PolicyCategory', () => {
             const fakeCategories = createRandomPolicyCategories(3);
             const oldCategoryName = Object.keys(fakeCategories)[0];
             const newCategoryName = 'Updated category';
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            fetch.pause();
+            mockFetch?.pause?.();
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${fakePolicy.id}`, fakePolicy);
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${fakePolicy.id}`, fakeCategories);
             Policy.renamePolicyCategory(fakePolicy.id, {
@@ -140,8 +137,7 @@ describe('actions/PolicyCategory', () => {
                     },
                 });
             });
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            await fetch.resume();
+            await mockFetch?.resume?.();
             await waitForBatchedUpdates();
             await new Promise<void>((resolve) => {
                 const connectionID = Onyx.connect({
@@ -170,8 +166,7 @@ describe('actions/PolicyCategory', () => {
                     enabled: true,
                 },
             };
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            fetch.pause();
+            mockFetch?.pause?.();
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${fakePolicy.id}`, fakePolicy);
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${fakePolicy.id}`, fakeCategories);
             Policy.setWorkspaceCategoryEnabled(fakePolicy.id, categoriesToUpdate);
@@ -191,8 +186,7 @@ describe('actions/PolicyCategory', () => {
                     },
                 });
             });
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            await fetch.resume();
+            await mockFetch?.resume?.();
             await waitForBatchedUpdates();
             await new Promise<void>((resolve) => {
                 const connectionID = Onyx.connect({
@@ -217,8 +211,7 @@ describe('actions/PolicyCategory', () => {
             const fakeCategories = createRandomPolicyCategories(3);
             const categoryNameToDelete = Object.keys(fakeCategories)[0];
             const categoriesToDelete = [categoryNameToDelete];
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            fetch.pause();
+            mockFetch?.pause?.();
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY}${fakePolicy.id}`, fakePolicy);
             Onyx.set(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${fakePolicy.id}`, fakeCategories);
             Policy.deleteWorkspaceCategories(fakePolicy.id, categoriesToDelete);
@@ -235,8 +228,7 @@ describe('actions/PolicyCategory', () => {
                     },
                 });
             });
-            // @ts-expect-error TODO: Remove this once TestHelper (https://github.com/Expensify/App/issues/25318) is migrated to TypeScript.
-            await fetch.resume();
+            await mockFetch?.resume?.();
             await waitForBatchedUpdates();
             await new Promise<void>((resolve) => {
                 const connectionID = Onyx.connect({