Merge pull request #60662 from software-mansion-labs/@szymczak/highlight-new-transactions-in-report

Author: mountiny

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -16,6 +16,7 @@ import useHover from '@hooks/useHover';
 import useLocalize from '@hooks/useLocalize';
 import useMobileSelectionMode from '@hooks/useMobileSelectionMode';
 import {useMouseContext} from '@hooks/useMouseContext';
+import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -51,6 +52,11 @@ type MoneyRequestReportTransactionListProps = {
     hasComments: boolean;
 };
 
+type TransactionWithOptionalHighlight = OnyxTypes.Transaction & {
+    /** Whether the transaction should be highlighted, when it is added to the report */
+    shouldBeHighlighted?: boolean;
+};
+
 const sortableColumnNames = [
     CONST.SEARCH.TABLE_COLUMNS.DATE,
     CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
@@ -104,6 +110,8 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
         }, [setSelectedTransactionsID]),
     );
 
+    const prevTransactions = usePrevious(transactions);
+
     const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {
         bind.onMouseLeave();
         e.stopPropagation();
@@ -117,9 +125,28 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
 
     const {sortBy, sortOrder} = sortConfig;
 
-    const sortedTransactions = useMemo(() => {
-        return [...transactions].sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy));
-    }, [sortBy, sortOrder, transactions]);
+    const newTransactionID = useMemo(() => {
+        if (!prevTransactions || transactions.length === prevTransactions.length) {
+            return CONST.EMPTY_ARRAY as unknown as string[];
+        }
+
+        return transactions
+            .filter((transaction) => !prevTransactions.some((prevTransaction) => prevTransaction.transactionID === transaction.transactionID))
+            .reduce((latest, t) => {
+                const inserted = t?.inserted ?? 0;
+                const latestInserted = latest?.inserted ?? 0;
+                return inserted > latestInserted ? t : latest;
+            }, transactions.at(0))?.transactionID;
+    }, [prevTransactions, transactions]);
+
+    const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => {
+        return [...transactions]
+            .sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy))
+            .map((transaction) => ({
+                ...transaction,
+                shouldBeHighlighted: newTransactionID === transaction.transactionID,
+            }));
+    }, [newTransactionID, sortBy, sortOrder, transactions]);
 
     const navigateToTransaction = useCallback(
         (activeTransaction: OnyxTypes.Transaction) => {
@@ -293,3 +320,4 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
 MoneyRequestReportTransactionList.displayName = 'MoneyRequestReportTransactionList';
 
 export default memo(MoneyRequestReportTransactionList);
+export type {TransactionWithOptionalHighlight};