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