fix: transaction details do not update on edit.

[adebola-io]

Updates to the details on a transaction do not trigger a re-render of the corresponding transaction item component on the home screen.

This is because the TransactionListing component memoizes items using the transaction.id property, and since this cannot change, updates cannot be propagated to the content.

Possible Solution

Replace itemKey with a dynamic function in place of the "id" property. This function will compute a new hash key based on both the id and a new property, updatedAt, which would re-execute and force a re-render if the transaction is updated.

OLD:

export function TransactionListing() {
   const transactions = useTransactions()

   return (
      <div class='mb-3 w-full h-full'>
         <FluidList
            items={transactions}
            itemKey='id'
            itemHeight={TRANSACTION_ITEM_HEIGHT}
            itemWidth='100%'
            gap='5px'
            direction='block'
            Template={TransactionItem}
         />
         <TransactionItemBottomSheet />
      </div>
   )
}

NEW:

export function TransactionListing() {
   const transactions = useTransactions()

   const itemKey = (item: Transaction) => {
      return `${item.id}-${item.updatedAt?.getTime()}`
   }

   return (
      <div class='mb-3 w-full h-full'>
         <FluidList
            items={transactions}
            itemKey={itemKey}
            itemHeight={TRANSACTION_ITEM_HEIGHT}
            itemWidth='100%'
            gap='5px'
            direction='block'
            Template={TransactionItem}
         />
         <TransactionItemBottomSheet />
      </div>
   )
}

This will require adding the updatedAt field to the TransactionModel table and events.

Blocker

As at 2025-11-16, Livestore (^0.3.1) is throwing errors on schema changes. The author has indicated that it will be fixed in the next version.