src/components/DeckList.tsx

@@ -1,99 +1,99 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { getCardById, getCardsByIds } from '../services/api';
+import { getCardById, getCardsByIds } from '../services/api';
-import { Deck } from '../types';
+import { Deck } from '../types';
-import { supabase } from "../lib/supabase";
+import { supabase } from "../lib/supabase";
-import DeckCard from "./DeckCard";
+import DeckCard from "./DeckCard";
-
+
-interface DeckListProps {
+interface DeckListProps {
-  onDeckEdit?: (deckId: string) => void;
+  onDeckEdit?: (deckId: string) => void;
-}
+}
-
+
-const DeckList = ({ onDeckEdit }: DeckListProps) => {
+const DeckList = ({ onDeckEdit }: DeckListProps) => {
-  const [decks, setDecks] = useState<Deck[]>([]);
+  const [decks, setDecks] = useState<Deck[]>([]);
-  const [loading, setLoading] = useState(true);
+  const [loading, setLoading] = useState(true);
-
+
-  useEffect(() => {
+  useEffect(() => {
-    const fetchDecks = async () => {
+    const fetchDecks = async () => {
-      const { data: decksData, error: decksError } = await supabase.from('decks').select('*');
+      const { data: decksData, error: decksError } = await supabase.from('decks').select('*');
-      if (decksError) {
+      if (decksError) {
-        console.error('Error fetching decks:', decksError);
+        console.error('Error fetching decks:', decksError);
-        setLoading(false);
+        setLoading(false);
-        return;
+        return;
-      }
+      }
-
+
-      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
+      const decksWithCards = await Promise.all(decksData.map(async (deck) => {
-        const { data: cardEntities, error: cardsError } = await supabase
+        const { data: cardEntities, error: cardsError } = await supabase
-          .from('deck_cards')
+          .from('deck_cards')
-          .select('*')
+          .select('*')
-          .eq('deck_id', deck.id);
+          .eq('deck_id', deck.id);
-
+
-
+
-
+
-        if (cardsError) {
+        if (cardsError) {
-          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
+          console.error(`Error fetching cards for deck ${deck.id}:`, cardsError);
-          return { ...deck, cards: [] };
+          return { ...deck, cards: [] };
-        }
+        }
-
+
-        const cardIds = cardEntities.map((entity) => entity.card_id);
+        const cardIds = cardEntities.map((entity) => entity.card_id);
-        const uniqueCardIds = [...new Set(cardIds)];
+        const uniqueCardIds = [...new Set(cardIds)];
-
+
-        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
+        if(deck.id === "410ed539-a8f4-4bc4-91f1-6c113b9b7e25"){
-          console.log("uniqueCardIds", uniqueCardIds);
+          console.log("uniqueCardIds", uniqueCardIds);
-        }
+        }
-
+
-
+
-
+
-        try {
+        try {
-          const scryfallCards = await getCardsByIds(uniqueCardIds);
+          const scryfallCards = await getCardsByIds(uniqueCardIds);
-
+
-          if (!scryfallCards) {
+          if (!scryfallCards) {
-            console.error("scryfallCards is undefined after getCardsByIds");
+            console.error("scryfallCards is undefined after getCardsByIds");
-            return { ...deck, cards: [] };
+            return { ...deck, cards: [] };
-          }
+          }
-
+
-          const cards = cardEntities.map((entity) => {
+          const cards = cardEntities.map((entity) => {
-            const card = scryfallCards.find((c) => c.id === entity.card_id);
+            const card = scryfallCards.find((c) => c.id === entity.card_id);
-            return {
+            return {
-              card,
+              card,
-              quantity: entity.quantity,
+              quantity: entity.quantity,
-              is_commander: entity.is_commander,
+              is_commander: entity.is_commander,
-            };
+            };
-          });
+          });
-
+
-          return {
+          return {
-            ...deck,
+            ...deck,
-            cards,
+            cards,
-            createdAt: new Date(deck.created_at),
+            createdAt: new Date(deck.created_at),
-            updatedAt: new Date(deck.updated_at),
+            updatedAt: new Date(deck.updated_at),
-          };
+          };
-        } catch (error) {
+        } catch (error) {
-          console.error("Error fetching cards from Scryfall:", error);
+          console.error("Error fetching cards from Scryfall:", error);
-          return { ...deck, cards: [] };
+          return { ...deck, cards: [] };
-        }
+        }
-      }));
+      }));
-
+
-      setDecks(decksWithCards);
+      setDecks(decksWithCards);
-      setLoading(false);
+      setLoading(false);
-    };
+    };
-
+
-    fetchDecks();
+    fetchDecks();
-  }, []);
+  }, []);
-
+
-  if (loading) {
+  if (loading) {
-    return (
+    return (
-      <div className="flex items-center justify-center h-64">
+      <div className="flex items-center justify-center h-64">
-        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div>
+        <div className="loading-spinner h-32 w-32"></div>
-      </div>
+      </div>
-    );
+    );
-  }
+  }
-
+
-  return (
+  return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-      {decks.map((deck) => (
+      {decks.map((deck) => (
-        <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
+        <DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
-      ))}
+      ))}
-    </div>
+    </div>
-  );
+  );
-};
+};
-
+
 export default DeckList;