api call cleanup

src/components/PrintingRow/PrintingRow.jsx

@@ -1,11 +1,11 @@
 import React, { useContext, useState } from 'react';
 import { CardContext } from '../../store/CardContext';
+import { updateCardAmount } from '../../services/api';
 
 function PrintingRow({ card_id, printing }) {
   const { ownedAmounts, updateAmount } = useContext(CardContext);
   const [loading, setLoading] = useState(false);
 
-  // Combined key for uniqueness
   const key = `${printing.set_id}-${printing.rarity_id}`;
   const currentAmount = ownedAmounts[card_id]?.[key] ?? printing.amount_owned ?? 0;
 
@@ -15,23 +15,10 @@ function PrintingRow({ card_id, printing }) {
 
     setLoading(true);
     try {
-      const response = await fetch('http://localhost:3000/collection/amount', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          card_id,
-          set_id,
-          rarity_id,
-          amount_owned: newAmount
-        })
-      });
-
-      if (response.ok) {
-        // Update context using the combined key
-        updateAmount(card_id, key, newAmount);
-      }
+      await updateCardAmount(card_id, set_id, rarity_id, newAmount);
+      updateAmount(card_id, key, newAmount);
     } catch (err) {
-      // silently fail
+      console.error('Failed to update amount', err);
     } finally {
       setLoading(false);
     }
@@ -61,12 +48,9 @@ function PrintingRow({ card_id, printing }) {
   );
 }
 
-// ✅ Memoize PrintingRow for performance
 export default React.memo(
   PrintingRow,
   (prevProps, nextProps) => {
-    // Re-render only if card_id changes or printing reference changes
-    // or if the current amount changed
     const prevKey = `${prevProps.printing.set_id}-${prevProps.printing.rarity_id}`;
     const nextKey = `${nextProps.printing.set_id}-${nextProps.printing.rarity_id}`;
     const prevAmount = prevProps.printing.amount_owned;