diff --git a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx index eaa81526d23..a33e4a2827c 100644 --- a/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx +++ b/packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx @@ -242,7 +242,7 @@ function TransactionListWithPreviews({ }); const { data: previewTransactions, isLoading: isPreviewTransactionsLoading } = - usePreviewTransactions({ options: { isDisabled: isSearching } }); + usePreviewTransactions(); const dateFormat = useDateFormat() || 'MM/dd/yyyy'; const dispatch = useDispatch(); @@ -294,12 +294,7 @@ function TransactionListWithPreviews({ 150, ); - const onSearch = useCallback( - (text: string) => { - updateSearchQuery(text); - }, - [updateSearchQuery], - ); + const onSearch = useCallback(updateSearchQuery, [updateSearchQuery]); const onOpenTransaction = useCallback( (transaction: TransactionEntity) => { @@ -331,10 +326,14 @@ function TransactionListWithPreviews({ [accountId, account], ); + const transcationsToDisplay = !isSearching + ? previewTransactions.concat(transactions) + : transactions; + return ( { - updateSearchQuery(text); - }, - [updateSearchQuery], - ); + const onSearch = useCallback(updateSearchQuery, [updateSearchQuery]); const onOpenTransaction = useCallback( transaction => { diff --git a/packages/loot-core/src/client/data-hooks/transactions.ts b/packages/loot-core/src/client/data-hooks/transactions.ts index 98db7f6741e..ddbe0211949 100644 --- a/packages/loot-core/src/client/data-hooks/transactions.ts +++ b/packages/loot-core/src/client/data-hooks/transactions.ts @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react'; +import { useEffect, useRef, useState, useMemo } from 'react'; import { send } from '../../platform/client/fetch'; import { type Query } from '../../shared/query'; @@ -84,21 +84,13 @@ export function useTransactions({ }; } -type UsePreviewTransactionsProps = { - options?: { - isDisabled?: boolean; - }; -}; - type UsePreviewTransactionsResult = { data: ReadonlyArray; isLoading: boolean; error?: Error; }; -export function usePreviewTransactions({ - options: { isDisabled } = { isDisabled: false }, -}: UsePreviewTransactionsProps = {}): UsePreviewTransactionsResult { +export function usePreviewTransactions(): UsePreviewTransactionsResult { const [previewTransactions, setPreviewTransactions] = useState< TransactionEntity[] >([]); @@ -111,21 +103,17 @@ export function usePreviewTransactions({ const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(undefined); - useEffect(() => { + const scheduleTransactions = useMemo(() => { if (isSchedulesLoading) { - return; + return []; } - let isUnmounted = false; - - setIsLoading(schedules.length > 0); - // Kick off an async rules application const schedulesForPreview = schedules.filter(s => isForPreview(s, statuses), ); - const baseTransactions = schedulesForPreview.map(schedule => ({ + return schedulesForPreview.map(schedule => ({ id: 'preview/' + schedule.id, payee: schedule._payee, account: schedule._account, @@ -133,10 +121,18 @@ export function usePreviewTransactions({ date: schedule.next_date, schedule: schedule.id, })); + }, [isSchedulesLoading, schedules, statuses]); - if (baseTransactions?.length) { + useEffect(() => { + let isUnmounted = false; + + setIsLoading(scheduleTransactions.length > 0); + + if (scheduleTransactions.length) { Promise.all( - baseTransactions.map(transaction => send('rules-run', { transaction })), + scheduleTransactions.map(transaction => + send('rules-run', { transaction }), + ), ) .then(newTrans => { if (!isUnmounted) { @@ -168,10 +164,10 @@ export function usePreviewTransactions({ return () => { isUnmounted = true; }; - }, [isSchedulesLoading, schedules, statuses]); + }, [scheduleTransactions, schedules, statuses]); return { - data: isDisabled ? [] : previewTransactions, + data: previewTransactions, isLoading: isLoading || isSchedulesLoading, error: error || scheduleQueryError, };