❇️ [refactor][frontend] Skip unchanged writes on event submit

Author: tomy0000000

frontend/src/lib/event-entries.ts

@@ -1,4 +1,5 @@
 import {
+  type EventEntryRead,
   createEventEntries,
   deleteEventEntries,
   updateEventEntries
@@ -11,12 +12,24 @@ interface SyncEventEntriesOptions {
   eventId: number
   // Rows as submitted by the event form, in display order.
   entries: EventEntryPayload[]
-  // Ids the event carried before this submit, so dropped rows can be deleted.
-  previousIds: number[]
+  // Entries the event carried before this submit, so dropped rows can be
+  // deleted and untouched rows can be left out of the patch.
+  previousEntries: EventEntryRead[]
+}
+
+function isUnchanged(entry: EventEntryPayload, previous: EventEntryRead) {
+  return (
+    entry.category_id === previous.category_id &&
+    entry.amount === previous.amount &&
+    entry.quantity === previous.quantity &&
+    entry.currency_code === previous.currency_code &&
+    entry.description === (previous.description ?? null) &&
+    entry.index === previous.index
+  )
 }
 
 // Reconcile an event's entries with the rows the form submitted: dropped rows
-// are deleted, existing rows are patched, and new rows are created.
+// are deleted, changed rows are patched, and new rows are created.
 //
 // The three calls must stay in this order. Indexes are unique per event, and
 // the API only parks colliding indexes out of the way for rows inside the batch
@@ -27,12 +40,14 @@ export async function syncEventEntries({
   client,
   eventId,
   entries,
-  previousIds
+  previousEntries
 }: SyncEventEntriesOptions) {
   const nextIds = new Set(
     entries.map(({ id }) => id).filter((id) => id != null)
   )
-  const removedIds = previousIds.filter((id) => !nextIds.has(id))
+  const removedIds = previousEntries
+    .map(({ id }) => id)
+    .filter((id) => !nextIds.has(id))
   if (removedIds.length > 0) {
     await deleteEventEntries({
       client,
@@ -41,10 +56,22 @@ export async function syncEventEntries({
     })
   }
 
-  // Every surviving row is sent, not just the edited ones, so the whole index
-  // range the patch writes to is inside the batch and can be parked.
-  const updates = entries
-    .filter(({ id }) => id != null)
+  const previousById = new Map(
+    previousEntries.map((entry) => [entry.id, entry])
+  )
+  const surviving = entries.filter(({ id }) => id != null)
+  // A reorder moves rows into indexes other rows still hold, and only the rows
+  // in the batch get parked, so a reorder has to send all of them. Absent one,
+  // no row is moving and untouched rows can be left out.
+  const reordered = surviving.some(
+    (entry) => previousById.get(entry.id as number)?.index !== entry.index
+  )
+  const updates = surviving
+    .filter((entry) => {
+      if (reordered) return true
+      const previous = previousById.get(entry.id as number)
+      return !previous || !isUnchanged(entry, previous)
+    })
     .map((entry) => ({ ...entry, id: entry.id as number, event_id: eventId }))
   if (updates.length > 0) {
     await updateEventEntries({ client, body: updates, throwOnError: true })

frontend/src/lib/events.ts

@@ -1,4 +1,10 @@
-import { createTransaction, updateTransactions } from '@/lib/client'
+import {
+  type EventCreate,
+  type EventReadDetailed,
+  type TransactionRead,
+  createTransaction,
+  updateTransactions
+} from '@/lib/client'
 import { type Client } from '@/lib/client/client'
 import { type TransactionPayload } from '@/lib/types'
 
@@ -7,41 +13,68 @@ interface SyncEventTransactionsOptions {
   eventId: number
   // Rows as submitted by the event form, in display order.
   transactions: TransactionPayload[]
-  // Ids the event carried before this submit, so dropped rows can be unlinked.
-  previousIds: number[]
+  // Rows the event carried before this submit, so dropped rows can be unlinked
+  // and an untouched set can skip the patch.
+  previousTransactions: TransactionRead[]
   // Applied to newly created transactions, so they land on the event's instant.
   createdAt: string
 }
 
+// Whether the submitted body differs from the event being edited, so a submit
+// that only touched transactions or entries can skip patching the event.
+export function hasEventChanges(body: EventCreate, event: EventReadDetailed) {
+  return (
+    body.type !== event.type ||
+    body.timestamp !== event.timestamp ||
+    body.timezone !== event.timezone ||
+    (body.description ?? null) !== (event.description ?? null)
+  )
+}
+
 // Reconcile an event's transactions with the rows the form submitted: existing
 // rows are patched onto the event, dropped rows are unlinked (the API has no
 // delete), and new rows are created.
 export async function syncEventTransactions({
   client,
   eventId,
   transactions,
-  previousIds,
+  previousTransactions,
   createdAt
 }: SyncEventTransactionsOptions) {
   const nextIds = new Set(
     transactions.map(({ id }) => id).filter((id) => id != null)
   )
-  const updates = [
-    ...transactions
-      .filter(({ id }) => id != null)
-      .map(({ id, account_id, amount, index }) => ({
-        id: id as number,
-        account_id,
-        amount,
-        index,
-        event_id: eventId
-      })),
-    ...previousIds
-      .filter((id) => !nextIds.has(id))
-      .map((id) => ({ id, event_id: null }))
-  ]
-  if (updates.length > 0) {
-    await updateTransactions({ client, body: updates, throwOnError: true })
+  const previousById = new Map(previousTransactions.map((row) => [row.id, row]))
+  const existing = transactions.filter(({ id }) => id != null)
+  const unlinked = previousTransactions.filter(({ id }) => !nextIds.has(id))
+
+  // All or nothing: a reorder can move a row into an index another row still
+  // holds, and only the rows in the batch get parked out of the way. So the
+  // patch either carries every row or is skipped entirely.
+  const changed = existing.some((transaction) => {
+    const previous = previousById.get(transaction.id as number)
+    return (
+      !previous ||
+      previous.account_id !== transaction.account_id ||
+      previous.amount !== transaction.amount ||
+      (previous.index ?? null) !== transaction.index
+    )
+  })
+  if (changed || unlinked.length > 0) {
+    await updateTransactions({
+      client,
+      body: [
+        ...existing.map(({ id, account_id, amount, index }) => ({
+          id: id as number,
+          account_id,
+          amount,
+          index,
+          event_id: eventId
+        })),
+        ...unlinked.map(({ id }) => ({ id, event_id: null }))
+      ],
+      throwOnError: true
+    })
   }
 
   // Created one at a time: the API has no batch create, and the account balance

frontend/src/routes/_auth/account/$id/transaction.tsx

@@ -119,15 +119,15 @@ function AccountTransactionPage() {
           client,
           eventId: event.id,
           transactions,
-          previousIds: [],
+          previousTransactions: [],
           createdAt: body.timestamp
         })
 
         await syncEventEntries({
           client,
           eventId: event.id,
           entries,
-          previousIds: []
+          previousEntries: []
         })
 
         return event

frontend/src/routes/_auth/index.tsx

@@ -22,7 +22,7 @@ import {
   readTransactionsQueryKey
 } from '@/lib/client/@tanstack/react-query.gen'
 import { syncEventEntries } from '@/lib/event-entries'
-import { syncEventTransactions } from '@/lib/events'
+import { hasEventChanges, syncEventTransactions } from '@/lib/events'
 import { type EventEntryPayload, type TransactionPayload } from '@/lib/types'
 import { parseLocalDate } from '@/lib/utils'
 
@@ -75,28 +75,36 @@ function HomePage() {
       transactions: TransactionPayload[]
       entries: EventEntryPayload[]
     }) => {
-      const { data: event } = editingEvent
-        ? await updateEvent({
-            client,
-            path: { event_id: editingEvent.id },
-            body,
-            throwOnError: true
-          })
-        : await createEvent({ client, body, throwOnError: true })
+      let event: { id: number }
+      if (!editingEvent) {
+        const { data } = await createEvent({ client, body, throwOnError: true })
+        event = data
+      } else if (hasEventChanges(body, editingEvent)) {
+        const { data } = await updateEvent({
+          client,
+          path: { event_id: editingEvent.id },
+          body,
+          throwOnError: true
+        })
+        event = data
+      } else {
+        // Only the transactions or entries changed, so the event needs no patch.
+        event = editingEvent
+      }
 
       await syncEventTransactions({
         client,
         eventId: event.id,
         transactions,
-        previousIds: editingEvent?.transactions.map((t) => t.id) ?? [],
+        previousTransactions: editingEvent?.transactions ?? [],
         createdAt: body.timestamp
       })
 
       await syncEventEntries({
         client,
         eventId: event.id,
         entries,
-        previousIds: editingEvent?.entries.map((e) => e.id) ?? []
+        previousEntries: editingEvent?.entries ?? []
       })
 
       return event