Merge pull request Expensify#79506 from Expensify/cmartins-updateTodosLiveData

Use live data for todos

Author: luacmartins

src/components/Search/SearchContext.tsx

@@ -1,14 +1,34 @@
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
-import useOnyx from '@hooks/useOnyx';
+// We need direct access to useOnyx from react-native-onyx to avoid circular dependencies in SearchContext
+// eslint-disable-next-line no-restricted-imports
+import {useOnyx} from 'react-native-onyx';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useTodos from '@hooks/useTodos';
 import {isMoneyRequestReport} from '@libs/ReportUtils';
-import {isTransactionListItemType, isTransactionReportGroupListItemType} from '@libs/SearchUIUtils';
+import {getSuggestedSearches, isTodoSearch, isTransactionListItemType, isTransactionReportGroupListItemType} from '@libs/SearchUIUtils';
 import type {SearchKey} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {SearchResults} from '@src/types/onyx';
+import type {SearchResultsInfo} from '@src/types/onyx/SearchResults';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {SearchContextData, SearchContextProps, SearchQueryJSON, SelectedTransactions} from './types';
 
+// Default search info when building from live data
+// Used for to-do searches where we build SearchResults from live Onyx data instead of API snapshots
+const defaultSearchInfo: SearchResultsInfo = {
+    offset: 0,
+    type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
+    status: CONST.SEARCH.STATUS.EXPENSE.ALL,
+    hasMoreResults: false,
+    hasResults: true,
+    isLoading: false,
+    count: 0,
+    total: 0,
+    currency: '',
+};
+
 const defaultSearchContextData: SearchContextData = {
     currentSearchHash: -1,
     currentSearchKey: undefined,
@@ -29,6 +49,7 @@ const defaultSearchContext: SearchContextProps = {
     showSelectAllMatchingItems: false,
     shouldShowFiltersBarLoading: false,
     currentSearchResults: undefined,
+    shouldUseLiveData: false,
     setLastSearchType: () => {},
     setCurrentSearchHashAndKey: () => {},
     setCurrentSearchQueryJSON: () => {},
@@ -51,7 +72,37 @@ function SearchContextProvider({children}: ChildrenProps) {
     const [searchContextData, setSearchContextData] = useState(defaultSearchContextData);
     const areTransactionsEmpty = useRef(true);
 
-    const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${searchContextData.currentSearchHash}`, {canBeMissing: true});
+    const [snapshotSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${searchContextData.currentSearchHash}`, {canBeMissing: true});
+    const {todoSearchResultsData} = useTodos();
+
+    const currentSearchKey = searchContextData.currentSearchKey;
+    const currentSearchHash = searchContextData.currentSearchHash;
+    const {accountID} = useCurrentUserPersonalDetails();
+    const suggestedSearches = useMemo(() => getSuggestedSearches(accountID), [accountID]);
+    const shouldUseLiveData = !!currentSearchKey && isTodoSearch(currentSearchHash, suggestedSearches);
+
+    // If viewing a to-do search, use live data from useTodos, otherwise return the snapshot data
+    // We do this so that we can show the counters for the to-do search results without visiting the specific to-do page, e.g. show `Approve [3]` while viewing the `Submit` to-do search.
+    const currentSearchResults = useMemo((): SearchResults | undefined => {
+        if (shouldUseLiveData) {
+            const liveData = todoSearchResultsData[currentSearchKey as keyof typeof todoSearchResultsData];
+            const searchInfo: SearchResultsInfo = {
+                ...(snapshotSearchResults?.search ?? defaultSearchInfo),
+                count: liveData.metadata.count,
+                total: liveData.metadata.total,
+                currency: liveData.metadata.currency,
+            };
+            const hasResults = Object.keys(liveData.data).length > 0;
+            // For to-do searches, always return a valid SearchResults object (even with empty data)
+            // This ensures we show the empty state instead of loading/blocking views
+            return {
+                search: {...searchInfo, isLoading: false, hasResults},
+                data: liveData.data,
+            };
+        }
+
+        return snapshotSearchResults ?? undefined;
+    }, [shouldUseLiveData, currentSearchKey, todoSearchResultsData, snapshotSearchResults]);
 
     const setCurrentSearchHashAndKey = useCallback((searchHash: number, searchKey: SearchKey | undefined) => {
         setSearchContextData((prevState) => {
@@ -207,6 +258,7 @@ function SearchContextProvider({children}: ChildrenProps) {
         () => ({
             ...searchContextData,
             currentSearchResults,
+            shouldUseLiveData,
             removeTransaction,
             setCurrentSearchHashAndKey,
             setCurrentSearchQueryJSON,
@@ -225,6 +277,7 @@ function SearchContextProvider({children}: ChildrenProps) {
         [
             searchContextData,
             currentSearchResults,
+            shouldUseLiveData,
             removeTransaction,
             setCurrentSearchHashAndKey,
             setCurrentSearchQueryJSON,

src/components/Search/index.tsx

@@ -239,6 +239,7 @@ function Search({
         selectAllMatchingItems,
         shouldResetSearchQuery,
         setShouldResetSearchQuery,
+        shouldUseLiveData,
     } = useSearchContext();
     const [offset, setOffset] = useState(0);
 
@@ -269,9 +270,8 @@ function Search({
 
     const {defaultCardFeed} = useCardFeedsForDisplay();
     const suggestedSearches = useMemo(() => getSuggestedSearches(accountID, defaultCardFeed?.id), [defaultCardFeed?.id, accountID]);
-
     const searchKey = useMemo(() => Object.values(suggestedSearches).find((search) => search.similarSearchHash === similarSearchHash)?.key, [suggestedSearches, similarSearchHash]);
-
+    const searchDataType = useMemo(() => (shouldUseLiveData ? CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT : searchResults?.search?.type), [shouldUseLiveData, searchResults?.search?.type]);
     const shouldCalculateTotals = useSearchShouldCalculateTotals(searchKey, similarSearchHash, offset === 0);
 
     const previousReportActions = usePrevious(reportActions);
@@ -359,15 +359,18 @@ function Search({
         shouldCalculateTotals,
         reportActions,
         previousReportActions,
+        shouldUseLiveData,
     });
 
     // There's a race condition in Onyx which makes it return data from the previous Search, so in addition to checking that the data is loaded
     // we also need to check that the searchResults matches the type and status of the current search
-    const isDataLoaded = isSearchDataLoaded(searchResults, queryJSON);
+    const isDataLoaded = shouldUseLiveData || isSearchDataLoaded(searchResults, queryJSON);
 
     const hasErrors = Object.keys(searchResults?.errors ?? {}).length > 0 && !isOffline;
 
+    // For to-do searches, we never show loading state since the data is always available locally from Onyx
     const shouldShowLoadingState =
+        !shouldUseLiveData &&
         !isOffline &&
         (!isDataLoaded || (!!searchResults?.search.isLoading && Array.isArray(searchResults?.data) && searchResults?.data.length === 0) || (hasErrors && !searchRequestResponseStatusCode));
     const shouldShowLoadingMoreItems = !shouldShowLoadingState && searchResults?.search?.isLoading && searchResults?.search?.offset > 0;
@@ -866,8 +869,8 @@ function Search({
         if (!searchResults?.data) {
             return [];
         }
-        return getColumnsToShow(accountID, searchResults?.data, visibleColumns, false, searchResults?.search?.type, validGroupBy);
-    }, [accountID, searchResults?.data, searchResults?.search?.type, visibleColumns, validGroupBy]);
+        return getColumnsToShow(accountID, searchResults?.data, visibleColumns, false, searchDataType, validGroupBy);
+    }, [accountID, searchResults?.data, searchDataType, visibleColumns, validGroupBy]);
 
     const opacity = useSharedValue(1);
     const animatedStyle = useAnimatedStyle(() => ({
@@ -1071,7 +1074,7 @@ function Search({
     }
 
     const visibleDataLength = filteredData.filter((item) => item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || isOffline).length;
-    if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchResults?.search?.type)) {
+    if (shouldShowEmptyState(isDataLoaded, visibleDataLength, searchDataType)) {
         cancelSpan(CONST.TELEMETRY.SPAN_NAVIGATE_TO_REPORTS_TAB);
         return (
             <View style={[shouldUseNarrowLayout ? styles.searchListContentContainerStyles : styles.mt3, styles.flex1]}>

src/components/Search/types.ts

@@ -139,6 +139,8 @@ type SearchContextData = {
 
 type SearchContextProps = SearchContextData & {
     currentSearchResults: SearchResults | undefined;
+    /** Whether we're on a main to-do search and should use live Onyx data instead of snapshots */
+    shouldUseLiveData: boolean;
     setCurrentSearchHashAndKey: (hash: number, key: SearchKey | undefined) => void;
     setCurrentSearchQueryJSON: (searchQueryJSON: SearchQueryJSON | undefined) => void;
     /** If you want to set `selectedTransactionIDs`, pass an array as the first argument, object/record otherwise */

src/hooks/useOnyx.ts

@@ -52,16 +52,18 @@ const useOnyx: OriginalUseOnyx = <TKey extends OnyxKey, TReturnValue = OnyxValue
     const isOnSearch = useIsOnSearch();
 
     let currentSearchHash: number | undefined;
+    let shouldUseLiveData = false;
     if (isOnSearch && isSnapshotCompatibleKey) {
-        const {currentSearchHash: searchContextCurrentSearchHash} = use(SearchContext);
+        const {currentSearchHash: searchContextCurrentSearchHash, shouldUseLiveData: contextShouldUseLiveData} = use(SearchContext);
         currentSearchHash = searchContextCurrentSearchHash;
+        shouldUseLiveData = !!contextShouldUseLiveData;
     }
 
     const useOnyxOptions = options as UseOnyxOptions<OnyxKey, OnyxValue<OnyxKey>> | undefined;
     const {selector: selectorProp, ...optionsWithoutSelector} = useOnyxOptions ?? {};
 
     // Determine if we should use snapshot data based on search state and key
-    const shouldUseSnapshot = isOnSearch && !!currentSearchHash && isSnapshotCompatibleKey;
+    const shouldUseSnapshot = isOnSearch && !!currentSearchHash && isSnapshotCompatibleKey && !shouldUseLiveData;
 
     // Create selector function that handles both regular and snapshot data
     const selector = useMemo(() => {

src/hooks/useSearchHighlightAndScroll.ts

@@ -23,6 +23,7 @@ type UseSearchHighlightAndScroll = {
     searchKey: SearchKey | undefined;
     offset: number;
     shouldCalculateTotals: boolean;
+    shouldUseLiveData: boolean;
 };
 
 /**
@@ -38,6 +39,7 @@ function useSearchHighlightAndScroll({
     searchKey,
     offset,
     shouldCalculateTotals,
+    shouldUseLiveData,
 }: UseSearchHighlightAndScroll) {
     const isFocused = useIsFocused();
     const {isOffline} = useNetwork();
@@ -147,12 +149,14 @@ function useSearchHighlightAndScroll({
     ]);
 
     useEffect(() => {
+        // For live data, isLoading is always false, so we also need to reset when searchResultsData changes
+        // For snapshot data, we wait for isLoading to become false after the API call completes
         if (searchResults?.search?.isLoading) {
             return;
         }
 
         searchTriggeredRef.current = false;
-    }, [searchResults?.search?.isLoading]);
+    }, [searchResults?.search?.isLoading, shouldUseLiveData, searchResultsData]);
 
     // Initialize the set with existing IDs only once
     useEffect(() => {