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', {
+      await updateCardAmount(card_id, set_id, rarity_id, newAmount);
-        method: 'PUT',
+      updateAmount(card_id, key, newAmount);
-        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);
-      }
     } 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;

src/services/api.jsx

@@ -1,4 +1,4 @@
-const API_BASE = 'http://192.168.178.41:3000'; // Backend URL
+const API_BASE = 'http://192.168.178.41:3000';
 
 export async function fetchCards() {
   const response = await fetch(`${API_BASE}/exportCards`);
@@ -11,4 +11,20 @@ export async function fetchCardImage(cardId) {
   if (!response.ok) throw new Error('Failed to fetch card image');
   const data = await response.json();
   return data.image;
+}
+
+export async function updateCardAmount(cardId, setId, rarityId, amount) {
+  const response = await fetch(`${API_BASE}/collection/amount`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      card_id: cardId,
+      set_id: setId,
+      rarity_id: rarityId,
+      amount_owned: amount
+    })
+  });
+
+  if (!response.ok) throw new Error('Failed to update amount');
+  return await response.json();
 }