add chunk to get cards collection from scryfall

src/components/DeckEditor.tsx

@@ -1,85 +1,85 @@
-import React, { useEffect, useState } from 'react';
-import { Card, Deck } from '../types';
-import DeckManager from './DeckManager';
-import { supabase } from '../lib/supabase';
-import { getCardsByIds } from '../services/api';
-
-interface DeckEditorProps {
-  deckId: string;
-  onClose?: () => void;
-}
-
-export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
-  const [deck, setDeck] = useState<Deck | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchDeck = async () => {
-      try {
-        // Fetch deck data
-        const { data: deckData, error: deckError } = await supabase
-          .from('decks')
-          .select('*')
-          .eq('id', deckId)
-          .single();
-
-        if (deckError) throw deckError;
-
-        // Fetch deck cards
-        const { data: cardEntities, error: cardsError } = await supabase
-          .from('deck_cards')
-          .select('*')
-          .eq('deck_id', deckId);
-
-        if (cardsError) throw cardsError;
-
-        // Fetch card details from Scryfall
-        const cardIds = cardEntities.map(entity => entity.card_id);
-        const uniqueCardIds = [...new Set(cardIds)];
-        const scryfallCards = await getCardsByIds(uniqueCardIds);
-
-        // Combine deck data with card details
-        const cards = cardEntities.map(entity => ({
-          card: scryfallCards.find(c => c.id === entity.card_id) as Card,
-          quantity: entity.quantity,
-        }));
-
-        setDeck({
-          ...deckData,
-          cards,
-          createdAt: new Date(deckData.created_at),
-          updatedAt: new Date(deckData.updated_at),
-        });
-      } catch (error) {
-        console.error('Error fetching deck:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchDeck();
-  }, [deckId]);
-
-  if (loading) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-white p-6 flex items-center justify-center">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
-      </div>
-    );
-  }
-
-  if (!deck) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-white p-6">
-        <div className="max-w-7xl mx-auto">
-          <div className="bg-red-500/10 border border-red-500 rounded-lg p-4">
-            <h2 className="text-xl font-bold text-red-500">Error</h2>
-            <p className="text-red-400">Failed to load deck</p>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return <DeckManager initialDeck={deck} onSave={onClose} />;
+import React, { useEffect, useState } from 'react';
+import { Card, Deck } from '../types';
+import DeckManager from './DeckManager';
+import { supabase } from '../lib/supabase';
+import { getCardsByIds } from '../services/api';
+
+interface DeckEditorProps {
+  deckId: string;
+  onClose?: () => void;
+}
+
+export default function DeckEditor({ deckId, onClose }: DeckEditorProps) {
+  const [deck, setDeck] = useState<Deck | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchDeck = async () => {
+      try {
+        // Fetch deck data
+        const { data: deckData, error: deckError } = await supabase
+          .from('decks')
+          .select('*')
+          .eq('id', deckId)
+          .single();
+
+        if (deckError) throw deckError;
+
+        // Fetch deck cards
+        const { data: cardEntities, error: cardsError } = await supabase
+          .from('deck_cards')
+          .select('*')
+          .eq('deck_id', deckId);
+
+        if (cardsError) throw cardsError;
+
+        // Fetch card details from Scryfall
+        const cardIds = cardEntities.map(entity => entity.card_id);
+        const uniqueCardIds = [...new Set(cardIds)];
+        const scryfallCards = await getCardsByIds(uniqueCardIds);
+
+        // Combine deck data with card details
+        const cards = cardEntities.map(entity => ({
+          card: scryfallCards.find(c => c.id === entity.card_id) as Card,
+          quantity: entity.quantity,
+        }));
+
+        setDeck({
+          ...deckData,
+          cards,
+          createdAt: new Date(deckData.created_at),
+          updatedAt: new Date(deckData.updated_at),
+        });
+      } catch (error) {
+        console.error('Error fetching deck:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchDeck();
+  }, [deckId]);
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white p-6 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  if (!deck) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-white p-6">
+        <div className="max-w-7xl mx-auto">
+          <div className="bg-red-500/10 border border-red-500 rounded-lg p-4">
+            <h2 className="text-xl font-bold text-red-500">Error</h2>
+            <p className="text-red-400">Failed to load deck</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return <DeckManager initialDeck={deck} onSave={onClose} />;
 }