Only reverse import preview transactions if they appear to be sorted by date ascending (#6543)

* Sort import preview transactions by (parsed) date, descending

* Update VRT screenshots

Auto-generated by VRT workflow

PR: #6543

---------

Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx

@@ -226,18 +226,30 @@ export function ImportTransactionsModal({
 
   const getImportPreview = useCallback(
     async (
-      transactions,
-      filetype,
-      flipAmount,
-      fieldMappings,
-      splitMode,
+      transactions: ImportTransaction[],
+      filetype: string,
+      flipAmount: boolean,
+      fieldMappings: FieldMapping | null,
+      splitMode: boolean,
       parseDateFormat: DateFormat,
-      inOutMode,
-      outValue,
-      multiplierAmount,
+      inOutMode: boolean,
+      outValue: string,
+      multiplierAmount: string,
     ) => {
       const previewTransactions = [];
       const inOutModeEnabled = isOfxFile(filetype) ? false : inOutMode;
+      const getTransDate: (trans: ImportTransaction) => string | null =
+        isOfxFile(filetype)
+          ? trans => trans.date ?? null
+          : trans => parseDate(trans.date, parseDateFormat);
+
+      // Note that the sort will behave unpredictably if any date fails to parse.
+      transactions.sort((a, b) => {
+        const aDate = getTransDate(a);
+        const bDate = getTransDate(b);
+
+        return aDate < bDate ? 1 : aDate === bDate ? 0 : -1;
+      });
 
       for (let trans of transactions) {
         if (trans.isMatchedTransaction) {
@@ -249,9 +261,7 @@ export function ImportTransactionsModal({
           ? applyFieldMappings(trans, fieldMappings)
           : trans;
 
-        const date = isOfxFile(filetype)
-          ? trans.date
-          : parseDate(trans.date, parseDateFormat);
+        const date = getTransDate(trans);
         if (date == null) {
           console.log(
             `Unable to parse date ${
@@ -431,12 +441,7 @@ export function ImportTransactionsModal({
           setParseDateFormat(null);
         }
 
-        // Reverse the transactions because it's very common for them to
-        // be ordered ascending, but we show transactions descending by
-        // date. This is purely cosmetic.
-        const reversedTransactions =
-          transactions.reverse() as ImportTransaction[];
-        setParsedTransactions(reversedTransactions);
+        setParsedTransactions(transactions as ImportTransaction[]);
       }
 
       setLoadingState(null);

packages/desktop-client/src/components/modals/ImportTransactionsModal/utils.ts

@@ -27,7 +27,7 @@ export function isDateFormat(format: string): format is DateFormat {
 export function parseDate(
   str: string | number | null | Array<unknown> | object,
   order: DateFormat,
-) {
+): string | null {
   if (typeof str !== 'string') {
     return null;
   }