Extract AuthenticatedCards into hook + view (cards Brief 3). (#79)
Moves card-browser state and handlers to lib/use-cards-page.js and markup to components/CardsPageView.js, leaving a thin ProtectedRoute composer in pages/cards.js. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu
GitHub
parent
84462417ee
commit
6a5c46ab1e
3 changed files with 988 additions and 884 deletions
403
components/CardsPageView.js
Normal file
403
components/CardsPageView.js
Normal file
|
|
@ -0,0 +1,403 @@
|
|||
import CardItem from './CardItem';
|
||||
import BulkSelectionToolbar from './BulkSelectionToolbar';
|
||||
import CollectionSelectionModal from './CollectionSelectionModal';
|
||||
|
||||
export default function CardsPageView(props) {
|
||||
const {
|
||||
cards,
|
||||
loadingMore,
|
||||
searchQuery,
|
||||
selectedTCG,
|
||||
setSelectedTCG,
|
||||
selectedRarity,
|
||||
setSelectedRarity,
|
||||
selectedSet,
|
||||
setSelectedSet,
|
||||
selectedValueRange,
|
||||
setSelectedValueRange,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
hasMore,
|
||||
selectedCards,
|
||||
favoritedCards,
|
||||
showCollectionModal,
|
||||
setShowCollectionModal,
|
||||
cardsToAdd,
|
||||
handleSearchChange,
|
||||
fetchCards,
|
||||
loadMoreCards,
|
||||
hasMoreRef,
|
||||
setPagination,
|
||||
setCards,
|
||||
setHasMore,
|
||||
tcgOptions,
|
||||
rarityOptions,
|
||||
setOptions,
|
||||
valueRangeOptions,
|
||||
handleToggleSelect,
|
||||
handleClearSelection,
|
||||
handleToggleFavorite,
|
||||
handleBulkAddToCollection,
|
||||
handleBulkAddToDeck,
|
||||
handleBulkMarkAsOwned,
|
||||
handleBulkRemoveFromOwned,
|
||||
handleBulkFavorite,
|
||||
handleBulkDelete,
|
||||
handleAddToCollections,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Cards
|
||||
</h1>
|
||||
<p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
|
||||
Browse and manage your card collection
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2 sm:space-x-4">
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 rounded-xl transition-all duration-200 ${
|
||||
viewMode === 'grid'
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'grid' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: viewMode === 'grid' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 rounded-xl transition-all duration-200 ${
|
||||
viewMode === 'list'
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'list' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: viewMode === 'list' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Filters */}
|
||||
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
|
||||
Quick Filters
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedTCG('all')}
|
||||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
|
||||
selectedTCG === 'all'
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: selectedTCG === 'all' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: selectedTCG === 'all' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
All Games
|
||||
</button>
|
||||
{tcgOptions.map(option => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => setSelectedTCG(option.value)}
|
||||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 ${
|
||||
selectedTCG === option.value
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: selectedTCG === option.value ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: selectedTCG === option.value ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
<span>{option.icon}</span>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Filters */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Search
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search cards..."
|
||||
className="search-bar w-full pr-12"
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
}}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-opacity-20 transition-all duration-200"
|
||||
style={{ backgroundColor: 'var(--bg-tertiary)' }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Rarity
|
||||
</label>
|
||||
<select
|
||||
value={selectedRarity}
|
||||
onChange={(e) => setSelectedRarity(e.target.value)}
|
||||
className="input-field w-full"
|
||||
>
|
||||
{rarityOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Set
|
||||
</label>
|
||||
<select
|
||||
value={selectedSet}
|
||||
onChange={(e) => setSelectedSet(e.target.value)}
|
||||
className="input-field w-full"
|
||||
>
|
||||
{setOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Value Range
|
||||
</label>
|
||||
<select
|
||||
value={selectedValueRange}
|
||||
onChange={(e) => setSelectedValueRange(e.target.value)}
|
||||
className="input-field w-full"
|
||||
>
|
||||
{valueRangeOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Filters Display */}
|
||||
{(selectedTCG !== 'all' || selectedRarity !== 'all' || selectedSet !== 'all' || selectedValueRange !== 'all') && (
|
||||
<div className="mt-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedTCG !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{tcgOptions.find(opt => opt.value === selectedTCG)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedTCG('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedRarity !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{rarityOptions.find(opt => opt.value === selectedRarity)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedRarity('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedSet !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{setOptions.find(opt => opt.value === selectedSet)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedSet('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedValueRange !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{valueRangeOptions.find(opt => opt.value === selectedValueRange)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedValueRange('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedTCG('all');
|
||||
setSelectedRarity('all');
|
||||
setSelectedSet('all');
|
||||
setSelectedValueRange('all');
|
||||
}}
|
||||
className="px-3 py-1 rounded-full text-sm font-medium hover:opacity-70" style={{
|
||||
color: 'var(--text-accent)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cards Display */}
|
||||
<div className="p-6 pb-64">
|
||||
{cards.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">🃏</div>
|
||||
<h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
No cards found
|
||||
</h3>
|
||||
<p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
|
||||
Try adjusting your search or filters
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 lg:p-6 xl:p-8' : 'space-y-4 p-6'}>
|
||||
{cards.map((card) => (
|
||||
<CardItem
|
||||
key={card.id}
|
||||
card={card}
|
||||
viewMode={viewMode}
|
||||
isSelected={selectedCards.some(c => c.id === card.id)}
|
||||
onToggleSelect={handleToggleSelect}
|
||||
onAddToCollection={(card) => handleBulkAddToCollection([card])}
|
||||
onAddToDeck={handleBulkAddToDeck}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
isFavorited={favoritedCards.has(card.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Infinite Scroll Loading Indicator */}
|
||||
{loadingMore && (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||||
<span style={{ color: 'var(--text-secondary)' }}>Loading more cards...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Infinite Scroll Sentinel */}
|
||||
<div id="infinite-scroll-sentinel" className="h-4 w-full" />
|
||||
|
||||
{/* Load More Button */}
|
||||
{hasMore && !loadingMore && (
|
||||
<div className="flex justify-center py-8">
|
||||
<button
|
||||
onClick={loadMoreCards}
|
||||
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Load More Cards
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* End of results indicator */}
|
||||
{!hasMore && cards.length > 0 && (
|
||||
<div className="flex justify-center py-8">
|
||||
<span style={{ color: 'var(--text-secondary)' }}>No more cards to load</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bulk Selection Toolbar */}
|
||||
<BulkSelectionToolbar
|
||||
selectedCards={selectedCards}
|
||||
onClearSelection={handleClearSelection}
|
||||
onAddToCollection={handleBulkAddToCollection}
|
||||
onAddToDeck={handleBulkAddToDeck}
|
||||
onMarkAsOwned={handleBulkMarkAsOwned}
|
||||
onRemoveFromOwned={handleBulkRemoveFromOwned}
|
||||
onBulkFavorite={handleBulkFavorite}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
/>
|
||||
|
||||
{/* Collection Selection Modal */}
|
||||
<CollectionSelectionModal
|
||||
isOpen={showCollectionModal}
|
||||
onClose={() => setShowCollectionModal(false)}
|
||||
cards={cardsToAdd}
|
||||
onAddToCollections={handleAddToCollections}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
578
lib/use-cards-page.js
Normal file
578
lib/use-cards-page.js
Normal file
|
|
@ -0,0 +1,578 @@
|
|||
import { useState, useEffect, useRef } from 'react';
|
||||
import { VOCAB } from './collection-vocabulary.js';
|
||||
|
||||
/**
|
||||
* Card browser state: search/filters, infinite scroll, bulk selection, favorites.
|
||||
*/
|
||||
export function useCardsPage() {
|
||||
|
||||
const [cards, setCards] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedTCG, setSelectedTCG] = useState('all');
|
||||
const [selectedRarity, setSelectedRarity] = useState('all');
|
||||
const [selectedSet, setSelectedSet] = useState('all');
|
||||
const [selectedValueRange, setSelectedValueRange] = useState('all');
|
||||
const [viewMode, setViewMode] = useState('grid'); // grid or list
|
||||
const [pagination, setPagination] = useState({
|
||||
page: 1,
|
||||
limit: 50,
|
||||
total: 0,
|
||||
pages: 0
|
||||
});
|
||||
const [filters, setFilters] = useState({
|
||||
games: [],
|
||||
rarities: [],
|
||||
sets: []
|
||||
});
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const loadingMoreRef = useRef(false);
|
||||
const hasMoreRef = useRef(true);
|
||||
|
||||
// Bulk selection state
|
||||
const [selectedCards, setSelectedCards] = useState([]);
|
||||
const [favoritedCards, setFavoritedCards] = useState(new Set());
|
||||
|
||||
// Modal states
|
||||
const [showCollectionModal, setShowCollectionModal] = useState(false);
|
||||
const [cardsToAdd, setCardsToAdd] = useState([]);
|
||||
|
||||
// Mana symbol settings
|
||||
const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });
|
||||
|
||||
// Fetch cards from database
|
||||
const fetchCards = async (isLoadMore = false) => {
|
||||
try {
|
||||
if (isLoadMore) {
|
||||
setLoadingMore(true);
|
||||
loadingMoreRef.current = true;
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
query: searchQuery,
|
||||
game: selectedTCG,
|
||||
rarity: selectedRarity,
|
||||
set: selectedSet,
|
||||
minPrice: selectedValueRange === 'under-50' ? '0' :
|
||||
selectedValueRange === '50-100' ? '50' :
|
||||
selectedValueRange === '100-500' ? '100' :
|
||||
selectedValueRange === '500-1000' ? '500' :
|
||||
selectedValueRange === 'over-1000' ? '1000' : '',
|
||||
maxPrice: selectedValueRange === '50-100' ? '100' :
|
||||
selectedValueRange === '100-500' ? '500' :
|
||||
selectedValueRange === '500-1000' ? '1000' : '',
|
||||
page: pagination.page.toString(),
|
||||
limit: pagination.limit.toString()
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/cards/search?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
|
||||
|
||||
if (isLoadMore) {
|
||||
setCards(prevCards => [...prevCards, ...data.cards]);
|
||||
} else {
|
||||
setCards(data.cards);
|
||||
}
|
||||
setPagination(data.pagination);
|
||||
setFilters(data.filters);
|
||||
const hasMoreCards = data.pagination.page < data.pagination.pages;
|
||||
setHasMore(hasMoreCards);
|
||||
hasMoreRef.current = hasMoreCards;
|
||||
} else {
|
||||
console.error('Failed to fetch cards:', data.error);
|
||||
if (!isLoadMore) {
|
||||
setCards([]);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching cards:', error);
|
||||
if (!isLoadMore) {
|
||||
setCards([]);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
loadingMoreRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 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(() => {
|
||||
/* eslint-disable react-hooks/set-state-in-effect -- reset list state when filters change, then fetch */
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
loadFavoritedCards(); // Load user's favorites
|
||||
/* eslint-enable react-hooks/set-state-in-effect */
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- filter-driven reload; fetchCards closes over latest search state
|
||||
}, [selectedTCG, selectedRarity, selectedSet, selectedValueRange]);
|
||||
|
||||
// Handle search with debounce
|
||||
const [searchTimeout, setSearchTimeout] = useState(null);
|
||||
|
||||
const handleSearchChange = (value) => {
|
||||
setSearchQuery(value);
|
||||
|
||||
// Clear existing timeout
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
|
||||
// Set new timeout for search
|
||||
const newTimeout = setTimeout(() => {
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
}, 500); // 500ms delay
|
||||
|
||||
setSearchTimeout(newTimeout);
|
||||
};
|
||||
|
||||
// Cleanup timeout on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
};
|
||||
}, [searchTimeout]);
|
||||
|
||||
// Load more cards
|
||||
const loadMoreCards = async () => {
|
||||
|
||||
|
||||
if (!loadingMoreRef.current && hasMoreRef.current) {
|
||||
const nextPage = pagination.page + 1;
|
||||
|
||||
setPagination(prev => ({ ...prev, page: nextPage }));
|
||||
|
||||
// Use the next page number directly in the fetch
|
||||
try {
|
||||
setLoadingMore(true);
|
||||
loadingMoreRef.current = true;
|
||||
|
||||
const params = new URLSearchParams({
|
||||
query: searchQuery,
|
||||
game: selectedTCG,
|
||||
rarity: selectedRarity,
|
||||
set: selectedSet,
|
||||
minPrice: selectedValueRange === 'under-50' ? '0' :
|
||||
selectedValueRange === '50-100' ? '50' :
|
||||
selectedValueRange === '100-500' ? '100' :
|
||||
selectedValueRange === '500-1000' ? '500' :
|
||||
selectedValueRange === 'over-1000' ? '1000' : '',
|
||||
maxPrice: selectedValueRange === '50-100' ? '100' :
|
||||
selectedValueRange === '100-500' ? '500' :
|
||||
selectedValueRange === '500-1000' ? '1000' : '',
|
||||
page: nextPage.toString(),
|
||||
limit: pagination.limit.toString()
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/cards/search?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
|
||||
setCards(prevCards => [...prevCards, ...data.cards]);
|
||||
setPagination(data.pagination);
|
||||
setFilters(data.filters);
|
||||
const hasMoreCards = data.pagination.page < data.pagination.pages;
|
||||
setHasMore(hasMoreCards);
|
||||
hasMoreRef.current = hasMoreCards;
|
||||
} else {
|
||||
console.error('Failed to fetch more cards:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching more cards:', error);
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
loadingMoreRef.current = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update refs when state changes
|
||||
useEffect(() => {
|
||||
hasMoreRef.current = hasMore;
|
||||
loadingMoreRef.current = loadingMore;
|
||||
}, [hasMore, loadingMore]);
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && hasMoreRef.current && !loadingMoreRef.current) {
|
||||
loadMoreCards();
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
rootMargin: '50px',
|
||||
threshold: 0.1
|
||||
}
|
||||
);
|
||||
|
||||
const setupObserver = () => {
|
||||
const sentinel = document.getElementById('infinite-scroll-sentinel');
|
||||
if (sentinel) {
|
||||
observer.observe(sentinel);
|
||||
} else {
|
||||
setTimeout(setupObserver, 100);
|
||||
}
|
||||
};
|
||||
|
||||
setupObserver();
|
||||
|
||||
return () => {
|
||||
const sentinel = document.getElementById('infinite-scroll-sentinel');
|
||||
if (sentinel) {
|
||||
observer.unobserve(sentinel);
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- observer setup once; loadMoreCards uses refs for latest state
|
||||
}, []);
|
||||
|
||||
const getRarityColor = (rarity) => {
|
||||
// Map database rarity values to colors
|
||||
const rarityColorMap = {
|
||||
'common': '#6B7280',
|
||||
'uncommon': '#10B981',
|
||||
'rare': '#F59E0B',
|
||||
'mythic': '#FFD700',
|
||||
'holographic': '#FF6B6B',
|
||||
'enchanted': '#A855F7',
|
||||
'secret rare': '#FF6B6B',
|
||||
'ultra rare': '#A855F7'
|
||||
};
|
||||
return rarityColorMap[rarity?.toLowerCase()] || '#6B7280';
|
||||
};
|
||||
|
||||
const tcgOptions = [
|
||||
{ value: 'MTG', label: 'Magic: The Gathering', color: 'purple', icon: '🔮' },
|
||||
{ value: 'Pokemon', label: 'Pokemon', color: 'blue', icon: '⚡' },
|
||||
{ value: 'Lorcana', label: 'Disney Lorcana', color: 'pink', icon: '✨' }
|
||||
];
|
||||
|
||||
const rarityOptions = [
|
||||
{ value: 'all', label: 'All Rarities' },
|
||||
{ value: 'common', label: 'Common' },
|
||||
{ value: 'uncommon', label: 'Uncommon' },
|
||||
{ value: 'rare', label: 'Rare' },
|
||||
{ value: 'mythic', label: 'Mythic' },
|
||||
{ value: 'enchanted', label: 'Enchanted' },
|
||||
...filters.rarities.filter(rarity =>
|
||||
!['all', 'common', 'uncommon', 'rare', 'mythic', 'enchanted'].includes(rarity)
|
||||
).map(rarity => ({
|
||||
value: rarity,
|
||||
label: rarity,
|
||||
color: getRarityColor(rarity)
|
||||
}))
|
||||
];
|
||||
|
||||
const setOptions = [
|
||||
{ value: 'all', label: 'All Sets' },
|
||||
...filters.sets.map(set => ({
|
||||
value: set,
|
||||
label: set
|
||||
}))
|
||||
];
|
||||
|
||||
const valueRangeOptions = [
|
||||
{ value: 'all', label: 'All Values' },
|
||||
{ value: 'under-50', label: 'Under $50' },
|
||||
{ value: '50-100', label: '$50 - $100' },
|
||||
{ value: '100-500', label: '$100 - $500' },
|
||||
{ value: '500-1000', label: '$500 - $1,000' },
|
||||
{ value: 'over-1000', label: 'Over $1,000' }
|
||||
];
|
||||
|
||||
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const getRarityLabel = (rarity) => {
|
||||
const rarityOption = rarityOptions.find(option => option.value === rarity);
|
||||
return rarityOption ? rarityOption.label : rarity;
|
||||
};
|
||||
|
||||
// Bulk selection handlers
|
||||
const handleToggleSelect = (card) => {
|
||||
setSelectedCards(prev => {
|
||||
const isSelected = prev.some(c => c.id === card.id);
|
||||
if (isSelected) {
|
||||
return prev.filter(c => c.id !== card.id);
|
||||
} else {
|
||||
return [...prev, card];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearSelection = () => {
|
||||
setSelectedCards([]);
|
||||
};
|
||||
|
||||
const handleToggleFavorite = async (card) => {
|
||||
try {
|
||||
const isFavorited = favoritedCards.has(card.id);
|
||||
const method = isFavorited ? 'DELETE' : 'POST';
|
||||
|
||||
const response = await fetch('/api/favorites', {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
itemType: 'card',
|
||||
itemId: card.id
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setFavoritedCards(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (isFavorited) {
|
||||
newSet.delete(card.id);
|
||||
} else {
|
||||
newSet.add(card.id);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling favorite:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Bulk action handlers
|
||||
const handleBulkAddToCollection = (cards) => {
|
||||
setCardsToAdd(cards);
|
||||
setShowCollectionModal(true);
|
||||
};
|
||||
|
||||
const handleBulkAddToDeck = (cards) => {
|
||||
console.log('Adding to deck:', cards);
|
||||
alert(`Adding ${cards.length} cards to deck (functionality coming soon)`);
|
||||
};
|
||||
|
||||
const handleBulkMarkAsOwned = async (cards) => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) {
|
||||
alert(`Please log in to ${VOCAB.ADD_TO_MY_COLLECTION.toLowerCase()}`);
|
||||
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 added ${cards.length} cards to ${VOCAB.MY_COLLECTION}!`);
|
||||
} else {
|
||||
alert(`Added ${successCount} out of ${cards.length} cards to ${VOCAB.MY_COLLECTION}. 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 add cards to ${VOCAB.MY_COLLECTION}. Please try again.`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkRemoveFromOwned = async (cards) => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) {
|
||||
alert(`Please log in to ${VOCAB.REMOVE_FROM_MY_COLLECTION.toLowerCase()}`);
|
||||
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 ${VOCAB.MY_COLLECTION}!`);
|
||||
} else {
|
||||
alert(`Removed ${successCount} out of ${cards.length} cards from ${VOCAB.MY_COLLECTION}. 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 ${VOCAB.MY_COLLECTION}. Please try again.`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkFavorite = async (cards) => {
|
||||
try {
|
||||
for (const card of cards) {
|
||||
if (!favoritedCards.has(card.id)) {
|
||||
await fetch('/api/favorites', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
itemType: 'card',
|
||||
itemId: card.id
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setFavoritedCards(prev => {
|
||||
const newSet = new Set(prev);
|
||||
cards.forEach(card => newSet.add(card.id));
|
||||
return newSet;
|
||||
});
|
||||
|
||||
alert(`Added ${cards.length} cards to favorites`);
|
||||
} catch (error) {
|
||||
console.error('Error bulk favoriting:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = (cards) => {
|
||||
console.log('Bulk delete:', cards);
|
||||
alert(`Bulk delete functionality coming soon for ${cards.length} cards`);
|
||||
};
|
||||
|
||||
// Collection modal handlers
|
||||
const handleAddToCollections = (results, selectedCollectionIds, cards) => {
|
||||
const successCount = results.filter(r => r.success).length;
|
||||
const totalAttempts = results.length;
|
||||
|
||||
if (successCount === totalAttempts) {
|
||||
alert(`Successfully added ${cards.length} card${cards.length !== 1 ? 's' : ''} to ${selectedCollectionIds.length} list${selectedCollectionIds.length !== 1 ? 's' : ''}!`);
|
||||
} else {
|
||||
alert(`Added ${successCount} out of ${totalAttempts} cards. Some additions may have failed.`);
|
||||
}
|
||||
|
||||
// Clear selection after successful addition
|
||||
setSelectedCards([]);
|
||||
};
|
||||
|
||||
const showInitialLoading = loading && cards.length === 0;
|
||||
|
||||
return {
|
||||
cards,
|
||||
loading,
|
||||
loadingMore,
|
||||
showInitialLoading,
|
||||
searchQuery,
|
||||
selectedTCG,
|
||||
setSelectedTCG,
|
||||
selectedRarity,
|
||||
setSelectedRarity,
|
||||
selectedSet,
|
||||
setSelectedSet,
|
||||
selectedValueRange,
|
||||
setSelectedValueRange,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
filters,
|
||||
hasMore,
|
||||
selectedCards,
|
||||
favoritedCards,
|
||||
showCollectionModal,
|
||||
setShowCollectionModal,
|
||||
cardsToAdd,
|
||||
handleSearchChange,
|
||||
fetchCards,
|
||||
loadMoreCards,
|
||||
hasMoreRef,
|
||||
setPagination,
|
||||
setCards,
|
||||
setHasMore,
|
||||
tcgOptions,
|
||||
rarityOptions,
|
||||
setOptions,
|
||||
valueRangeOptions,
|
||||
handleToggleSelect,
|
||||
handleClearSelection,
|
||||
handleToggleFavorite,
|
||||
handleBulkAddToCollection,
|
||||
handleBulkAddToDeck,
|
||||
handleBulkMarkAsOwned,
|
||||
handleBulkRemoveFromOwned,
|
||||
handleBulkFavorite,
|
||||
handleBulkDelete,
|
||||
handleAddToCollections,
|
||||
};
|
||||
}
|
||||
|
||||
891
pages/cards.js
891
pages/cards.js
|
|
@ -1,547 +1,19 @@
|
|||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import Layout from '../components/Layout';
|
||||
import CardItem from '../components/CardItem';
|
||||
import CardsPageView from '../components/CardsPageView';
|
||||
import PublicCardsView from '../components/PublicCardsView';
|
||||
import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
|
||||
import CollectionSelectionModal from '../components/CollectionSelectionModal';
|
||||
import ProtectedRoute from '../components/ProtectedRoute';
|
||||
import { ManaCost, ColorFilterSymbol } from '../components/ManaSymbols';
|
||||
import ManaSymbolSettings from '../components/ManaSymbolSettings';
|
||||
import { useAuth } from '../lib/use-auth';
|
||||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||||
import { useCardsPage } from '../lib/use-cards-page.js';
|
||||
|
||||
function AuthenticatedCards() {
|
||||
const router = useRouter();
|
||||
const { user, loading: authLoading } = useAuth();
|
||||
const { user } = useAuth();
|
||||
const cardsPage = useCardsPage();
|
||||
|
||||
const [cards, setCards] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedTCG, setSelectedTCG] = useState('all');
|
||||
const [selectedRarity, setSelectedRarity] = useState('all');
|
||||
const [selectedSet, setSelectedSet] = useState('all');
|
||||
const [selectedValueRange, setSelectedValueRange] = useState('all');
|
||||
const [viewMode, setViewMode] = useState('grid'); // grid or list
|
||||
const [pagination, setPagination] = useState({
|
||||
page: 1,
|
||||
limit: 50,
|
||||
total: 0,
|
||||
pages: 0
|
||||
});
|
||||
const [filters, setFilters] = useState({
|
||||
games: [],
|
||||
rarities: [],
|
||||
sets: []
|
||||
});
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const loadingMoreRef = useRef(false);
|
||||
const hasMoreRef = useRef(true);
|
||||
|
||||
// Bulk selection state
|
||||
const [selectedCards, setSelectedCards] = useState([]);
|
||||
const [favoritedCards, setFavoritedCards] = useState(new Set());
|
||||
|
||||
// Modal states
|
||||
const [showCollectionModal, setShowCollectionModal] = useState(false);
|
||||
const [cardsToAdd, setCardsToAdd] = useState([]);
|
||||
|
||||
// Mana symbol settings
|
||||
const [manaSymbolSettings, setManaSymbolSettings] = useState({ useSVG: false });
|
||||
|
||||
// Fetch cards from database
|
||||
const fetchCards = async (isLoadMore = false) => {
|
||||
try {
|
||||
if (isLoadMore) {
|
||||
setLoadingMore(true);
|
||||
loadingMoreRef.current = true;
|
||||
} else {
|
||||
setLoading(true);
|
||||
}
|
||||
|
||||
const params = new URLSearchParams({
|
||||
query: searchQuery,
|
||||
game: selectedTCG,
|
||||
rarity: selectedRarity,
|
||||
set: selectedSet,
|
||||
minPrice: selectedValueRange === 'under-50' ? '0' :
|
||||
selectedValueRange === '50-100' ? '50' :
|
||||
selectedValueRange === '100-500' ? '100' :
|
||||
selectedValueRange === '500-1000' ? '500' :
|
||||
selectedValueRange === 'over-1000' ? '1000' : '',
|
||||
maxPrice: selectedValueRange === '50-100' ? '100' :
|
||||
selectedValueRange === '100-500' ? '500' :
|
||||
selectedValueRange === '500-1000' ? '1000' : '',
|
||||
page: pagination.page.toString(),
|
||||
limit: pagination.limit.toString()
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/cards/search?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
|
||||
|
||||
if (isLoadMore) {
|
||||
setCards(prevCards => [...prevCards, ...data.cards]);
|
||||
} else {
|
||||
setCards(data.cards);
|
||||
}
|
||||
setPagination(data.pagination);
|
||||
setFilters(data.filters);
|
||||
const hasMoreCards = data.pagination.page < data.pagination.pages;
|
||||
setHasMore(hasMoreCards);
|
||||
hasMoreRef.current = hasMoreCards;
|
||||
} else {
|
||||
console.error('Failed to fetch cards:', data.error);
|
||||
if (!isLoadMore) {
|
||||
setCards([]);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching cards:', error);
|
||||
if (!isLoadMore) {
|
||||
setCards([]);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
loadingMoreRef.current = false;
|
||||
}
|
||||
};
|
||||
|
||||
// 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(() => {
|
||||
/* eslint-disable react-hooks/set-state-in-effect -- reset list state when filters change, then fetch */
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
loadFavoritedCards(); // Load user's favorites
|
||||
/* eslint-enable react-hooks/set-state-in-effect */
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- filter-driven reload; fetchCards closes over latest search state
|
||||
}, [selectedTCG, selectedRarity, selectedSet, selectedValueRange]);
|
||||
|
||||
// Handle search with debounce
|
||||
const [searchTimeout, setSearchTimeout] = useState(null);
|
||||
|
||||
const handleSearchChange = (value) => {
|
||||
setSearchQuery(value);
|
||||
|
||||
// Clear existing timeout
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
|
||||
// Set new timeout for search
|
||||
const newTimeout = setTimeout(() => {
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
}, 500); // 500ms delay
|
||||
|
||||
setSearchTimeout(newTimeout);
|
||||
};
|
||||
|
||||
// Cleanup timeout on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
};
|
||||
}, [searchTimeout]);
|
||||
|
||||
// Load more cards
|
||||
const loadMoreCards = async () => {
|
||||
|
||||
|
||||
if (!loadingMoreRef.current && hasMoreRef.current) {
|
||||
const nextPage = pagination.page + 1;
|
||||
|
||||
setPagination(prev => ({ ...prev, page: nextPage }));
|
||||
|
||||
// Use the next page number directly in the fetch
|
||||
try {
|
||||
setLoadingMore(true);
|
||||
loadingMoreRef.current = true;
|
||||
|
||||
const params = new URLSearchParams({
|
||||
query: searchQuery,
|
||||
game: selectedTCG,
|
||||
rarity: selectedRarity,
|
||||
set: selectedSet,
|
||||
minPrice: selectedValueRange === 'under-50' ? '0' :
|
||||
selectedValueRange === '50-100' ? '50' :
|
||||
selectedValueRange === '100-500' ? '100' :
|
||||
selectedValueRange === '500-1000' ? '500' :
|
||||
selectedValueRange === 'over-1000' ? '1000' : '',
|
||||
maxPrice: selectedValueRange === '50-100' ? '100' :
|
||||
selectedValueRange === '100-500' ? '500' :
|
||||
selectedValueRange === '500-1000' ? '1000' : '',
|
||||
page: nextPage.toString(),
|
||||
limit: pagination.limit.toString()
|
||||
});
|
||||
|
||||
const response = await fetch(`/api/cards/search?${params}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
|
||||
setCards(prevCards => [...prevCards, ...data.cards]);
|
||||
setPagination(data.pagination);
|
||||
setFilters(data.filters);
|
||||
const hasMoreCards = data.pagination.page < data.pagination.pages;
|
||||
setHasMore(hasMoreCards);
|
||||
hasMoreRef.current = hasMoreCards;
|
||||
} else {
|
||||
console.error('Failed to fetch more cards:', data.error);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching more cards:', error);
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
loadingMoreRef.current = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Update refs when state changes
|
||||
useEffect(() => {
|
||||
hasMoreRef.current = hasMore;
|
||||
loadingMoreRef.current = loadingMore;
|
||||
}, [hasMore, loadingMore]);
|
||||
|
||||
// Intersection Observer for infinite scroll
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting && hasMoreRef.current && !loadingMoreRef.current) {
|
||||
loadMoreCards();
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
rootMargin: '50px',
|
||||
threshold: 0.1
|
||||
}
|
||||
);
|
||||
|
||||
const setupObserver = () => {
|
||||
const sentinel = document.getElementById('infinite-scroll-sentinel');
|
||||
if (sentinel) {
|
||||
observer.observe(sentinel);
|
||||
} else {
|
||||
setTimeout(setupObserver, 100);
|
||||
}
|
||||
};
|
||||
|
||||
setupObserver();
|
||||
|
||||
return () => {
|
||||
const sentinel = document.getElementById('infinite-scroll-sentinel');
|
||||
if (sentinel) {
|
||||
observer.unobserve(sentinel);
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- observer setup once; loadMoreCards uses refs for latest state
|
||||
}, []);
|
||||
|
||||
const getRarityColor = (rarity) => {
|
||||
// Map database rarity values to colors
|
||||
const rarityColorMap = {
|
||||
'common': '#6B7280',
|
||||
'uncommon': '#10B981',
|
||||
'rare': '#F59E0B',
|
||||
'mythic': '#FFD700',
|
||||
'holographic': '#FF6B6B',
|
||||
'enchanted': '#A855F7',
|
||||
'secret rare': '#FF6B6B',
|
||||
'ultra rare': '#A855F7'
|
||||
};
|
||||
return rarityColorMap[rarity?.toLowerCase()] || '#6B7280';
|
||||
};
|
||||
|
||||
const tcgOptions = [
|
||||
{ value: 'MTG', label: 'Magic: The Gathering', color: 'purple', icon: '🔮' },
|
||||
{ value: 'Pokemon', label: 'Pokemon', color: 'blue', icon: '⚡' },
|
||||
{ value: 'Lorcana', label: 'Disney Lorcana', color: 'pink', icon: '✨' }
|
||||
];
|
||||
|
||||
const rarityOptions = [
|
||||
{ value: 'all', label: 'All Rarities' },
|
||||
{ value: 'common', label: 'Common' },
|
||||
{ value: 'uncommon', label: 'Uncommon' },
|
||||
{ value: 'rare', label: 'Rare' },
|
||||
{ value: 'mythic', label: 'Mythic' },
|
||||
{ value: 'enchanted', label: 'Enchanted' },
|
||||
...filters.rarities.filter(rarity =>
|
||||
!['all', 'common', 'uncommon', 'rare', 'mythic', 'enchanted'].includes(rarity)
|
||||
).map(rarity => ({
|
||||
value: rarity,
|
||||
label: rarity,
|
||||
color: getRarityColor(rarity)
|
||||
}))
|
||||
];
|
||||
|
||||
const setOptions = [
|
||||
{ value: 'all', label: 'All Sets' },
|
||||
...filters.sets.map(set => ({
|
||||
value: set,
|
||||
label: set
|
||||
}))
|
||||
];
|
||||
|
||||
const valueRangeOptions = [
|
||||
{ value: 'all', label: 'All Values' },
|
||||
{ value: 'under-50', label: 'Under $50' },
|
||||
{ value: '50-100', label: '$50 - $100' },
|
||||
{ value: '100-500', label: '$100 - $500' },
|
||||
{ value: '500-1000', label: '$500 - $1,000' },
|
||||
{ value: 'over-1000', label: 'Over $1,000' }
|
||||
];
|
||||
|
||||
|
||||
|
||||
const formatCurrency = (amount) => {
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD'
|
||||
}).format(amount);
|
||||
};
|
||||
|
||||
const getRarityLabel = (rarity) => {
|
||||
const rarityOption = rarityOptions.find(option => option.value === rarity);
|
||||
return rarityOption ? rarityOption.label : rarity;
|
||||
};
|
||||
|
||||
// Bulk selection handlers
|
||||
const handleToggleSelect = (card) => {
|
||||
setSelectedCards(prev => {
|
||||
const isSelected = prev.some(c => c.id === card.id);
|
||||
if (isSelected) {
|
||||
return prev.filter(c => c.id !== card.id);
|
||||
} else {
|
||||
return [...prev, card];
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleClearSelection = () => {
|
||||
setSelectedCards([]);
|
||||
};
|
||||
|
||||
const handleToggleFavorite = async (card) => {
|
||||
try {
|
||||
const isFavorited = favoritedCards.has(card.id);
|
||||
const method = isFavorited ? 'DELETE' : 'POST';
|
||||
|
||||
const response = await fetch('/api/favorites', {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
itemType: 'card',
|
||||
itemId: card.id
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setFavoritedCards(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (isFavorited) {
|
||||
newSet.delete(card.id);
|
||||
} else {
|
||||
newSet.add(card.id);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling favorite:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// Bulk action handlers
|
||||
const handleBulkAddToCollection = (cards) => {
|
||||
setCardsToAdd(cards);
|
||||
setShowCollectionModal(true);
|
||||
};
|
||||
|
||||
const handleBulkAddToDeck = (cards) => {
|
||||
console.log('Adding to deck:', cards);
|
||||
alert(`Adding ${cards.length} cards to deck (functionality coming soon)`);
|
||||
};
|
||||
|
||||
const handleBulkMarkAsOwned = async (cards) => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) {
|
||||
alert(`Please log in to ${VOCAB.ADD_TO_MY_COLLECTION.toLowerCase()}`);
|
||||
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 added ${cards.length} cards to ${VOCAB.MY_COLLECTION}!`);
|
||||
} else {
|
||||
alert(`Added ${successCount} out of ${cards.length} cards to ${VOCAB.MY_COLLECTION}. 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 add cards to ${VOCAB.MY_COLLECTION}. Please try again.`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkRemoveFromOwned = async (cards) => {
|
||||
try {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
if (!token) {
|
||||
alert(`Please log in to ${VOCAB.REMOVE_FROM_MY_COLLECTION.toLowerCase()}`);
|
||||
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 ${VOCAB.MY_COLLECTION}!`);
|
||||
} else {
|
||||
alert(`Removed ${successCount} out of ${cards.length} cards from ${VOCAB.MY_COLLECTION}. 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 ${VOCAB.MY_COLLECTION}. Please try again.`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkFavorite = async (cards) => {
|
||||
try {
|
||||
for (const card of cards) {
|
||||
if (!favoritedCards.has(card.id)) {
|
||||
await fetch('/api/favorites', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
itemType: 'card',
|
||||
itemId: card.id
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setFavoritedCards(prev => {
|
||||
const newSet = new Set(prev);
|
||||
cards.forEach(card => newSet.add(card.id));
|
||||
return newSet;
|
||||
});
|
||||
|
||||
alert(`Added ${cards.length} cards to favorites`);
|
||||
} catch (error) {
|
||||
console.error('Error bulk favoriting:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = (cards) => {
|
||||
console.log('Bulk delete:', cards);
|
||||
alert(`Bulk delete functionality coming soon for ${cards.length} cards`);
|
||||
};
|
||||
|
||||
// Collection modal handlers
|
||||
const handleAddToCollections = (results, selectedCollectionIds, cards) => {
|
||||
const successCount = results.filter(r => r.success).length;
|
||||
const totalAttempts = results.length;
|
||||
|
||||
if (successCount === totalAttempts) {
|
||||
alert(`Successfully added ${cards.length} card${cards.length !== 1 ? 's' : ''} to ${selectedCollectionIds.length} list${selectedCollectionIds.length !== 1 ? 's' : ''}!`);
|
||||
} else {
|
||||
alert(`Added ${successCount} out of ${totalAttempts} cards. Some additions may have failed.`);
|
||||
}
|
||||
|
||||
// Clear selection after successful addition
|
||||
setSelectedCards([]);
|
||||
};
|
||||
|
||||
if (loading && cards.length === 0) {
|
||||
if (cardsPage.showInitialLoading) {
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||||
<div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--text-accent)' }} />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
|
@ -549,356 +21,7 @@ function AuthenticatedCards() {
|
|||
|
||||
return (
|
||||
<Layout user={user}>
|
||||
{/* Header */}
|
||||
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Cards
|
||||
</h1>
|
||||
<p className="text-base sm:text-lg" style={{ color: 'var(--text-secondary)' }}>
|
||||
Browse and manage your card collection
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex space-x-2 sm:space-x-4">
|
||||
<button
|
||||
onClick={() => setViewMode('grid')}
|
||||
className={`p-2 rounded-xl transition-all duration-200 ${
|
||||
viewMode === 'grid'
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'grid' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: viewMode === 'grid' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setViewMode('list')}
|
||||
className={`p-2 rounded-xl transition-all duration-200 ${
|
||||
viewMode === 'list'
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: viewMode === 'list' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: viewMode === 'list' ? 'var(--text-primary)' : 'var(--text-secondary)'
|
||||
}}
|
||||
>
|
||||
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 10h16M4 14h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Filters */}
|
||||
<div className="p-4 sm:p-6" style={{ backgroundColor: 'var(--bg-secondary)' }}>
|
||||
<div className="mb-4">
|
||||
<h3 className="text-base sm:text-lg font-semibold mb-3" style={{ color: 'var(--text-primary)' }}>
|
||||
Quick Filters
|
||||
</h3>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
<button
|
||||
onClick={() => setSelectedTCG('all')}
|
||||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 ${
|
||||
selectedTCG === 'all'
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: selectedTCG === 'all' ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: selectedTCG === 'all' ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
All Games
|
||||
</button>
|
||||
{tcgOptions.map(option => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => setSelectedTCG(option.value)}
|
||||
className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 ${
|
||||
selectedTCG === option.value
|
||||
? 'shadow-lg'
|
||||
: 'hover:shadow-md'
|
||||
}`}
|
||||
style={{
|
||||
backgroundColor: selectedTCG === option.value ? 'var(--bg-tertiary)' : 'transparent',
|
||||
color: selectedTCG === option.value ? 'var(--text-primary)' : 'var(--text-secondary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}
|
||||
>
|
||||
<span>{option.icon}</span>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Advanced Filters */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Search
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search cards..."
|
||||
className="search-bar w-full pr-12"
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearchChange(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
onClick={() => {
|
||||
setPagination(prev => ({ ...prev, page: 1 }));
|
||||
setCards([]);
|
||||
setHasMore(true);
|
||||
hasMoreRef.current = true;
|
||||
fetchCards(false);
|
||||
}}
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 rounded-lg hover:bg-opacity-20 transition-all duration-200"
|
||||
style={{ backgroundColor: 'var(--bg-tertiary)' }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Rarity
|
||||
</label>
|
||||
<select
|
||||
value={selectedRarity}
|
||||
onChange={(e) => setSelectedRarity(e.target.value)}
|
||||
className="input-field w-full"
|
||||
>
|
||||
{rarityOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Set
|
||||
</label>
|
||||
<select
|
||||
value={selectedSet}
|
||||
onChange={(e) => setSelectedSet(e.target.value)}
|
||||
className="input-field w-full"
|
||||
>
|
||||
{setOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
Value Range
|
||||
</label>
|
||||
<select
|
||||
value={selectedValueRange}
|
||||
onChange={(e) => setSelectedValueRange(e.target.value)}
|
||||
className="input-field w-full"
|
||||
>
|
||||
{valueRangeOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Active Filters Display */}
|
||||
{(selectedTCG !== 'all' || selectedRarity !== 'all' || selectedSet !== 'all' || selectedValueRange !== 'all') && (
|
||||
<div className="mt-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedTCG !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{tcgOptions.find(opt => opt.value === selectedTCG)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedTCG('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedRarity !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{rarityOptions.find(opt => opt.value === selectedRarity)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedRarity('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedSet !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{setOptions.find(opt => opt.value === selectedSet)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedSet('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
{selectedValueRange !== 'all' && (
|
||||
<span className="px-3 py-1 rounded-full text-sm font-medium" style={{
|
||||
backgroundColor: 'var(--bg-tertiary)',
|
||||
color: 'var(--text-primary)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
{valueRangeOptions.find(opt => opt.value === selectedValueRange)?.label}
|
||||
<button
|
||||
onClick={() => setSelectedValueRange('all')}
|
||||
className="ml-2 hover:opacity-70"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
)}
|
||||
<button
|
||||
onClick={() => {
|
||||
setSelectedTCG('all');
|
||||
setSelectedRarity('all');
|
||||
setSelectedSet('all');
|
||||
setSelectedValueRange('all');
|
||||
}}
|
||||
className="px-3 py-1 rounded-full text-sm font-medium hover:opacity-70" style={{
|
||||
color: 'var(--text-accent)',
|
||||
border: '1px solid var(--border)'
|
||||
}}>
|
||||
Clear All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Cards Display */}
|
||||
<div className="p-6 pb-64">
|
||||
{cards.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<div className="text-6xl mb-4">🃏</div>
|
||||
<h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--text-primary)' }}>
|
||||
No cards found
|
||||
</h3>
|
||||
<p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
|
||||
Try adjusting your search or filters
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={viewMode === 'grid' ? 'card-grid-container grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-3 sm:gap-4 lg:gap-6 p-3 sm:p-4 lg:p-6 xl:p-8' : 'space-y-4 p-6'}>
|
||||
{cards.map((card) => (
|
||||
<CardItem
|
||||
key={card.id}
|
||||
card={card}
|
||||
viewMode={viewMode}
|
||||
isSelected={selectedCards.some(c => c.id === card.id)}
|
||||
onToggleSelect={handleToggleSelect}
|
||||
onAddToCollection={(card) => handleBulkAddToCollection([card])}
|
||||
onAddToDeck={handleBulkAddToDeck}
|
||||
onToggleFavorite={handleToggleFavorite}
|
||||
isFavorited={favoritedCards.has(card.id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Infinite Scroll Loading Indicator */}
|
||||
{loadingMore && (
|
||||
<div className="flex justify-center py-8">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2" style={{ borderColor: 'var(--text-accent)' }}></div>
|
||||
<span style={{ color: 'var(--text-secondary)' }}>Loading more cards...</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Infinite Scroll Sentinel */}
|
||||
<div id="infinite-scroll-sentinel" className="h-4 w-full" />
|
||||
|
||||
{/* Load More Button */}
|
||||
{hasMore && !loadingMore && (
|
||||
<div className="flex justify-center py-8">
|
||||
<button
|
||||
onClick={loadMoreCards}
|
||||
className="px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg hover:from-blue-600 hover:to-purple-700 transition-all duration-200 shadow-lg hover:shadow-xl"
|
||||
>
|
||||
Load More Cards
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* End of results indicator */}
|
||||
{!hasMore && cards.length > 0 && (
|
||||
<div className="flex justify-center py-8">
|
||||
<span style={{ color: 'var(--text-secondary)' }}>No more cards to load</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Bulk Selection Toolbar */}
|
||||
<BulkSelectionToolbar
|
||||
selectedCards={selectedCards}
|
||||
onClearSelection={handleClearSelection}
|
||||
onAddToCollection={handleBulkAddToCollection}
|
||||
onAddToDeck={handleBulkAddToDeck}
|
||||
onMarkAsOwned={handleBulkMarkAsOwned}
|
||||
onRemoveFromOwned={handleBulkRemoveFromOwned}
|
||||
onBulkFavorite={handleBulkFavorite}
|
||||
onBulkDelete={handleBulkDelete}
|
||||
/>
|
||||
|
||||
{/* Collection Selection Modal */}
|
||||
<CollectionSelectionModal
|
||||
isOpen={showCollectionModal}
|
||||
onClose={() => setShowCollectionModal(false)}
|
||||
cards={cardsToAdd}
|
||||
onAddToCollections={handleAddToCollections}
|
||||
/>
|
||||
<CardsPageView {...cardsPage} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue