diff --git a/pages/cards.js b/pages/cards.js index a8478ea..d485bda 100644 --- a/pages/cards.js +++ b/pages/cards.js @@ -105,6 +105,28 @@ export default function Cards() { } }; + // Load user's favorited cards + const loadFavoritedCards = async () => { + try { + const token = localStorage.getItem('auth_token'); + if (!token) return; + + const response = await fetch('/api/favorites?type=card', { + headers: { + 'Authorization': `Bearer ${token}` + } + }); + + if (response.ok) { + const data = await response.json(); + const favoriteIds = new Set(data.favorites.map(fav => parseInt(fav.item_id))); + setFavoritedCards(favoriteIds); + } + } catch (error) { + console.error('Error loading favorited cards:', error); + } + }; + // Initial load useEffect(() => { setPagination(prev => ({ ...prev, page: 1 })); @@ -112,6 +134,7 @@ export default function Cards() { setHasMore(true); hasMoreRef.current = true; fetchCards(false); + loadFavoritedCards(); // Load user's favorites }, [selectedTCG, selectedRarity, selectedSet, selectedValueRange]); // Handle search with debounce @@ -369,14 +392,88 @@ export default function Cards() { alert(`Adding ${cards.length} cards to deck (functionality coming soon)`); }; - const handleBulkMarkAsOwned = (cards) => { - console.log('Marking as owned:', cards); - alert(`Marking ${cards.length} cards as owned (functionality coming soon)`); + const handleBulkMarkAsOwned = async (cards) => { + try { + const token = localStorage.getItem('auth_token'); + if (!token) { + alert('Please log in to mark cards as owned'); + return; + } + + let successCount = 0; + for (const card of cards) { + try { + const response = await fetch(`/api/cards/${card.id}/ownership`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify({ quantity: 1 }) + }); + + if (response.ok) { + successCount++; + } + } catch (error) { + console.error(`Error marking card ${card.id} as owned:`, error); + } + } + + if (successCount === cards.length) { + alert(`Successfully marked ${cards.length} cards as owned!`); + } else { + alert(`Marked ${successCount} out of ${cards.length} cards as owned. Some operations may have failed.`); + } + + // Clear selection after successful operation + setSelectedCards([]); + } catch (error) { + console.error('Error in bulk mark as owned:', error); + alert('Failed to mark cards as owned. Please try again.'); + } }; - const handleBulkRemoveFromOwned = (cards) => { - console.log('Removing from owned:', cards); - alert(`Removing ${cards.length} cards from owned (functionality coming soon)`); + const handleBulkRemoveFromOwned = async (cards) => { + try { + const token = localStorage.getItem('auth_token'); + if (!token) { + alert('Please log in to remove cards from owned'); + return; + } + + let successCount = 0; + for (const card of cards) { + try { + const response = await fetch(`/api/cards/${card.id}/ownership`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + body: JSON.stringify({ quantity: 0 }) + }); + + if (response.ok) { + successCount++; + } + } catch (error) { + console.error(`Error removing card ${card.id} from owned:`, error); + } + } + + if (successCount === cards.length) { + alert(`Successfully removed ${cards.length} cards from owned!`); + } else { + alert(`Removed ${successCount} out of ${cards.length} cards from owned. Some operations may have failed.`); + } + + // Clear selection after successful operation + setSelectedCards([]); + } catch (error) { + console.error('Error in bulk remove from owned:', error); + alert('Failed to remove cards from owned. Please try again.'); + } }; const handleBulkFavorite = async (cards) => {