feature/issue-10-deck-card-collection #12
@@ -1,17 +1,16 @@
|
|||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Search, Plus, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
|
import { Search, Loader2, Trash2, CheckCircle, XCircle } from 'lucide-react';
|
||||||
import { Card } from '../types';
|
import { Card } from '../types';
|
||||||
import { searchCards, getUserCollection, addCardToCollection, getCardsByIds } from '../services/api';
|
import { getUserCollection, getCardsByIds } from '../services/api';
|
||||||
import { useAuth } from '../contexts/AuthContext';
|
import { useAuth } from '../contexts/AuthContext';
|
||||||
import MagicCard from './MagicCard';
|
|
||||||
|
|
||||||
export default function Collection() {
|
export default function Collection() {
|
||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const [searchQuery, setSearchQuery] = useState('');
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
const [searchResults, setSearchResults] = useState<Card[]>([]);
|
|
||||||
const [collection, setCollection] = useState<{ card: Card; quantity: number }[]>([]);
|
const [collection, setCollection] = useState<{ card: Card; quantity: number }[]>([]);
|
||||||
|
const [filteredCollection, setFilteredCollection] = useState<{ card: Card; quantity: number }[]>([]);
|
||||||
const [isLoadingCollection, setIsLoadingCollection] = useState(true);
|
const [isLoadingCollection, setIsLoadingCollection] = useState(true);
|
||||||
const [isAddingCard, setIsAddingCard] = useState<string | null>(null);
|
const [hoveredCard, setHoveredCard] = useState<Card | null>(null);
|
||||||
const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
|
const [snackbar, setSnackbar] = useState<{ message: string; type: 'success' | 'error' } | null>(null);
|
||||||
|
|
||||||
// Load user's collection from Supabase on mount
|
// Load user's collection from Supabase on mount
|
||||||
@@ -43,6 +42,7 @@ export default function Collection() {
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
setCollection(collectionWithCards);
|
setCollection(collectionWithCards);
|
||||||
|
setFilteredCollection(collectionWithCards);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error loading collection:', error);
|
console.error('Error loading collection:', error);
|
||||||
setSnackbar({ message: 'Failed to load collection', type: 'error' });
|
setSnackbar({ message: 'Failed to load collection', type: 'error' });
|
||||||
@@ -54,131 +54,49 @@ export default function Collection() {
|
|||||||
loadCollection();
|
loadCollection();
|
||||||
}, [user]);
|
}, [user]);
|
||||||
|
|
||||||
const handleSearch = async (e: React.FormEvent) => {
|
// Filter collection based on search query
|
||||||
e.preventDefault();
|
useEffect(() => {
|
||||||
if (!searchQuery.trim()) return;
|
if (!searchQuery.trim()) {
|
||||||
|
setFilteredCollection(collection);
|
||||||
try {
|
|
||||||
const cards = await searchCards(searchQuery);
|
|
||||||
setSearchResults(cards);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to search cards:', error);
|
|
||||||
setSnackbar({ message: 'Failed to search cards', type: 'error' });
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const addToCollection = async (card: Card) => {
|
|
||||||
if (!user) {
|
|
||||||
setSnackbar({ message: 'Please log in to add cards to your collection', type: 'error' });
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
try {
|
const query = searchQuery.toLowerCase();
|
||||||
setIsAddingCard(card.id);
|
const filtered = collection.filter(({ card }) => {
|
||||||
|
return (
|
||||||
// Add card to Supabase
|
card.name.toLowerCase().includes(query) ||
|
||||||
await addCardToCollection(user.id, card.id, 1);
|
card.type_line?.toLowerCase().includes(query) ||
|
||||||
|
card.oracle_text?.toLowerCase().includes(query) ||
|
||||||
// Update local state
|
card.colors?.some(color => color.toLowerCase().includes(query))
|
||||||
setCollection(prev => {
|
|
||||||
const existing = prev.find(c => c.card.id === card.id);
|
|
||||||
if (existing) {
|
|
||||||
return prev.map(c =>
|
|
||||||
c.card.id === card.id
|
|
||||||
? { ...c, quantity: c.quantity + 1 }
|
|
||||||
: c
|
|
||||||
);
|
);
|
||||||
}
|
|
||||||
return [...prev, { card, quantity: 1 }];
|
|
||||||
});
|
});
|
||||||
|
|
||||||
setSnackbar({ message: 'Card added to collection!', type: 'success' });
|
setFilteredCollection(filtered);
|
||||||
} catch (error) {
|
}, [searchQuery, collection]);
|
||||||
console.error('Error adding card to collection:', error);
|
|
||||||
setSnackbar({ message: 'Failed to add card to collection', type: 'error' });
|
|
||||||
} finally {
|
|
||||||
setIsAddingCard(null);
|
|
||||||
setTimeout(() => setSnackbar(null), 3000);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-900 text-white p-6">
|
<div className="min-h-screen bg-gray-900 text-white p-6">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<h1 className="text-3xl font-bold mb-6">My Collection</h1>
|
<h1 className="text-3xl font-bold mb-6">My Collection</h1>
|
||||||
|
|
||||||
{/* Search */}
|
{/* Search within collection */}
|
||||||
<form onSubmit={handleSearch} className="flex gap-2 mb-8">
|
<div className="mb-8">
|
||||||
<div className="relative flex-1">
|
<div className="relative">
|
||||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={searchQuery}
|
value={searchQuery}
|
||||||
onChange={(e) => setSearchQuery(e.target.value)}
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||||
placeholder="Search cards to add..."
|
placeholder="Search your collection by name, type, or text..."
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Search size={20} />
|
|
||||||
Search
|
|
||||||
</button>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
{/* Search Results */}
|
|
||||||
{searchResults.length > 0 && (
|
|
||||||
<div className="mb-8">
|
|
||||||
<h2 className="text-xl font-semibold mb-4">Search Results</h2>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
|
||||||
{searchResults.map(card => {
|
|
||||||
const inCollection = collection.find(c => c.card.id === card.id);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
|
|
||||||
<MagicCard card={card} />
|
|
||||||
<div className="p-4">
|
|
||||||
<h3 className="font-bold mb-2">{card.name}</h3>
|
|
||||||
{inCollection && (
|
|
||||||
<div className="text-sm text-green-400 mb-2 flex items-center gap-1">
|
|
||||||
<CheckCircle size={16} />
|
|
||||||
In collection (x{inCollection.quantity})
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
{card.prices?.usd && (
|
|
||||||
<div className="text-sm text-gray-400 mb-2">${card.prices.usd}</div>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
onClick={() => addToCollection(card)}
|
|
||||||
disabled={isAddingCard === card.id}
|
|
||||||
className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-600 disabled:cursor-not-allowed rounded-lg flex items-center justify-center gap-2"
|
|
||||||
>
|
|
||||||
{isAddingCard === card.id ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="animate-spin" size={20} />
|
|
||||||
Adding...
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Plus size={20} />
|
|
||||||
Add to Collection
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Collection */}
|
{/* Collection */}
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-xl font-semibold mb-4">
|
<h2 className="text-xl font-semibold mb-4">
|
||||||
My Cards ({collection.length} unique cards, {collection.reduce((acc, c) => acc + c.quantity, 0)} total)
|
{searchQuery ? `Found ${filteredCollection.length} card(s)` : `My Cards (${collection.length} unique, ${collection.reduce((acc, c) => acc + c.quantity, 0)} total)`}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{isLoadingCollection ? (
|
{isLoadingCollection ? (
|
||||||
@@ -188,28 +106,38 @@ export default function Collection() {
|
|||||||
) : collection.length === 0 ? (
|
) : collection.length === 0 ? (
|
||||||
<div className="text-center py-12 text-gray-400">
|
<div className="text-center py-12 text-gray-400">
|
||||||
<p className="text-lg mb-2">Your collection is empty</p>
|
<p className="text-lg mb-2">Your collection is empty</p>
|
||||||
<p className="text-sm">Search for cards above to add them to your collection</p>
|
<p className="text-sm">Add cards from the Deck Manager to build your collection</p>
|
||||||
|
</div>
|
||||||
|
) : filteredCollection.length === 0 ? (
|
||||||
|
<div className="text-center py-12 text-gray-400">
|
||||||
|
<p className="text-lg mb-2">No cards found</p>
|
||||||
|
<p className="text-sm">Try a different search term</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
<div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10 gap-3">
|
||||||
{collection.map(({ card, quantity }) => (
|
{filteredCollection.map(({ card, quantity }) => (
|
||||||
<div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden hover:ring-2 hover:ring-blue-500 transition-all">
|
<div
|
||||||
<MagicCard card={card} />
|
key={card.id}
|
||||||
<div className="p-4">
|
className="relative group cursor-pointer"
|
||||||
<div className="flex justify-between items-center mb-2">
|
onMouseEnter={() => setHoveredCard(card)}
|
||||||
<h3 className="font-bold">{card.name}</h3>
|
onMouseLeave={() => setHoveredCard(null)}
|
||||||
<span className="text-sm bg-blue-600 px-2 py-1 rounded font-semibold">
|
>
|
||||||
|
{/* Small card thumbnail */}
|
||||||
|
<div className="relative rounded-lg overflow-hidden shadow-lg transition-all group-hover:ring-2 group-hover:ring-blue-500">
|
||||||
|
<img
|
||||||
|
src={card.image_uris?.normal || card.image_uris?.small}
|
||||||
|
alt={card.name}
|
||||||
|
className="w-full h-auto"
|
||||||
|
/>
|
||||||
|
{/* Quantity badge */}
|
||||||
|
<div className="absolute top-1 right-1 bg-blue-600 text-white text-xs font-bold px-2 py-1 rounded-full shadow-lg">
|
||||||
x{quantity}
|
x{quantity}
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
{card.prices?.usd && (
|
|
||||||
<div className="text-sm text-gray-400">
|
|
||||||
${card.prices.usd} each
|
|
||||||
<span className="text-xs ml-2">
|
|
||||||
(${(parseFloat(card.prices.usd) * quantity).toFixed(2)} total)
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
|
{/* Card name below thumbnail */}
|
||||||
|
<div className="mt-1 text-xs text-center truncate px-1">
|
||||||
|
{card.name}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
@@ -218,12 +146,39 @@ export default function Collection() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Hover Card Preview */}
|
||||||
|
{hoveredCard && (
|
||||||
|
<div className="fixed top-1/2 right-8 transform -translate-y-1/2 z-50 pointer-events-none">
|
||||||
|
<div className="bg-gray-800 rounded-lg shadow-2xl p-4 max-w-md">
|
||||||
|
<img
|
||||||
|
src={hoveredCard.image_uris?.large || hoveredCard.image_uris?.normal}
|
||||||
|
alt={hoveredCard.name}
|
||||||
|
className="w-full h-auto rounded-lg shadow-lg"
|
||||||
|
/>
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
<h3 className="text-xl font-bold">{hoveredCard.name}</h3>
|
||||||
|
<p className="text-sm text-gray-400">{hoveredCard.type_line}</p>
|
||||||
|
{hoveredCard.oracle_text && (
|
||||||
|
<p className="text-sm text-gray-300 border-t border-gray-700 pt-2">
|
||||||
|
{hoveredCard.oracle_text}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
{hoveredCard.prices?.usd && (
|
||||||
|
<div className="text-sm text-green-400 font-semibold border-t border-gray-700 pt-2">
|
||||||
|
${hoveredCard.prices.usd}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Snackbar */}
|
{/* Snackbar */}
|
||||||
{snackbar && (
|
{snackbar && (
|
||||||
<div
|
<div
|
||||||
className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
|
className={`fixed bottom-4 right-4 p-4 rounded-lg shadow-lg transition-all duration-300 ${
|
||||||
snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
snackbar.type === 'success' ? 'bg-green-500' : 'bg-red-500'
|
||||||
} text-white`}
|
} text-white z-50`}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user