fix: #774 update cards in parallel with proper error handling

Author: marcelpanse

frontend/src/services/collection/collectionService.ts

@@ -69,17 +69,6 @@ export const updateCards = async (email: string, rowsToUpdate: CardAmountUpdate[
   const now = new Date()
   const nowString = now.toISOString()
 
-  const { data: account, error: accountError } = await supabase
-    .from('accounts')
-    .update({ collection_last_updated: now })
-    .eq('email', email)
-    .select('*, trade_rarity_settings:trade_rarity_settings!email(*)')
-    .single()
-
-  if (accountError) {
-    throw new Error(`Error fetching account: ${accountError.message}`)
-  }
-
   // Update collection records
   const collectionRows: CollectionRowUpdate[] = rowsToUpdate.map((row) => ({
     email,
@@ -97,15 +86,36 @@ export const updateCards = async (email: string, rowsToUpdate: CardAmountUpdate[
     //deduplicate amountRows on internal_id, needed for card csv import feature
     .filter((row, index, self) => index === self.findIndex((r) => r.internal_id === row.internal_id))
 
-  //then update the card amounts
-  const { error: cardAmountsError } = await supabase.from('card_amounts').upsert(amountRows)
-  if (cardAmountsError) {
-    throw new Error(`Error bulk updating collection: ${cardAmountsError?.message}`)
-  }
+  // Execute all three database calls in parallel
+  let account: AccountRow
+  try {
+    const [accountResult, cardAmountsResult, collectionResult] = await Promise.all([
+      supabase
+        .from('accounts')
+        .update({ collection_last_updated: now })
+        .eq('email', email)
+        .select('*, trade_rarity_settings:trade_rarity_settings!email(*)')
+        .single(),
+      supabase.from('card_amounts').upsert(amountRows),
+      supabase.from('collection').upsert(collectionRows),
+    ])
+
+    if (accountResult.error) {
+      throw new Error(`Error fetching account: ${accountResult.error.message}`)
+    }
+    if (cardAmountsResult.error) {
+      throw new Error(`Error bulk updating card amounts: ${cardAmountsResult.error.message}`)
+    }
+    if (collectionResult.error) {
+      throw new Error(`Error bulk updating collection: ${collectionResult.error.message}`)
+    }
 
-  const { error: collectionError } = await supabase.from('collection').upsert(collectionRows)
-  if (collectionError) {
-    throw new Error(`Error bulk updating collection: ${collectionError?.message}`)
+    account = accountResult.data as AccountRow
+  } catch (error) {
+    // Invalidate local cache by removing records from localStorage
+    localStorage.removeItem(`${COLLECTION_CACHE_KEY}_${email}`)
+    localStorage.removeItem(`${COLLECTION_TIMESTAMP_KEY}_${email}`)
+    throw error
   }
 
   // Update cache with the changes

frontend/src/services/collection/useCollection.ts

@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useContext } from 'react'
 import { DialogContext } from '@/context/DialogContext.ts'
+import { useToast } from '@/hooks/use-toast.ts'
 import { useAccount } from '@/services/account/useAccount.ts'
 import { useUser } from '@/services/auth/useAuth.ts'
 import { deleteCard, getCollection, getPublicCollection, updateCards } from '@/services/collection/collectionService.ts'
@@ -30,6 +31,7 @@ export function usePublicCollection(friendId: string | undefined) {
 }
 
 export function useUpdateCards() {
+  const { toast } = useToast()
   const { data: user } = useUser()
   const email = user?.user.email
 
@@ -47,6 +49,11 @@ export function useUpdateCards() {
       // Update account data in cache (for collection_last_updated timestamp)
       queryClient.setQueryData(['account', email], result.account)
     },
+    onError: async (error) => {
+      toast({ title: 'Error updating cards', description: error.message, variant: 'destructive' })
+      await queryClient.invalidateQueries({ queryKey: ['collection'] })
+      await queryClient.invalidateQueries({ queryKey: ['account'] })
+    },
   })
 }