f7cde325ca
✨ Collection Organization Restructure: - /collections now shows only user's own collections, collaborations, and shared collections - /community/collections shows all public collections for discovery - Updated navigation to include 'Community Collections' link - Added 'Discover Community' button on My Collections page 🔧 API Changes: - Modified /api/collections to exclude public collections from other users - Created /api/community/collections for public collection discovery - Proper authentication and permission handling for both endpoints 🎯 User Experience Improvements: - Clear separation between personal and community spaces - 'My Collection' sidebar item now accurately reflects content - Community discovery is intentional and separate - Better organization matches user mental models 📱 UI Enhancements: - Updated page titles and descriptions - Added community discovery button with globe icon - Consistent styling across both collection views - Same thumbnail and layout system for both pages This properly separates personal collection management from community discovery! 🚀
375 lines
No EOL
14 KiB
JavaScript
375 lines
No EOL
14 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/router';
|
|
import Link from 'next/link';
|
|
import Layout from '../../components/Layout';
|
|
import PermissionIndicator from '../../components/PermissionIndicator';
|
|
import { useAuth } from '../../lib/use-auth';
|
|
|
|
export default function CommunityCollections() {
|
|
const router = useRouter();
|
|
const { user, loading: authLoading } = useAuth();
|
|
|
|
const [collections, setCollections] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [sortBy, setSortBy] = useState('name');
|
|
|
|
// Redirect to login if not authenticated
|
|
useEffect(() => {
|
|
if (!authLoading && !user) {
|
|
router.push('/login');
|
|
}
|
|
}, [authLoading, user, router]);
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
fetchPublicCollections();
|
|
}
|
|
}, [user]);
|
|
|
|
const fetchPublicCollections = async () => {
|
|
try {
|
|
const token = localStorage.getItem('auth_token');
|
|
const headers = {
|
|
'Content-Type': 'application/json',
|
|
};
|
|
|
|
if (token) {
|
|
headers.Authorization = `Bearer ${token}`;
|
|
}
|
|
|
|
const response = await fetch('/api/community/collections', { headers });
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
|
|
// Fetch thumbnails for each collection
|
|
const collectionsWithThumbnails = await Promise.all(
|
|
data.map(async (collection) => {
|
|
try {
|
|
const identifier = collection.slug || collection.id;
|
|
const thumbnailResponse = await fetch(`/api/collections/${identifier}/thumbnails`, { headers });
|
|
if (thumbnailResponse.ok) {
|
|
const thumbnailData = await thumbnailResponse.json();
|
|
return { ...collection, thumbnails: thumbnailData.thumbnails };
|
|
}
|
|
return { ...collection, thumbnails: [] };
|
|
} catch (error) {
|
|
console.error(`Error fetching thumbnails for collection ${collection.id}:`, error);
|
|
return { ...collection, thumbnails: [] };
|
|
}
|
|
})
|
|
);
|
|
|
|
setCollections(collectionsWithThumbnails);
|
|
} else {
|
|
console.error('Failed to fetch public collections');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching public collections:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const sortOptions = [
|
|
{ value: 'name', label: 'Name (A-Z)' },
|
|
{ value: 'value', label: 'Value (High to Low)' },
|
|
{ value: 'cardCount', label: 'Card Count (High to Low)' },
|
|
{ value: 'createdAt', label: 'Recently Created' }
|
|
];
|
|
|
|
const sortCollections = (collections, sortBy) => {
|
|
return [...collections].sort((a, b) => {
|
|
switch (sortBy) {
|
|
case 'name':
|
|
return a.name.localeCompare(b.name);
|
|
case 'value':
|
|
return (b.value || 0) - (a.value || 0);
|
|
case 'cardCount':
|
|
return (b.cardCount || 0) - (a.cardCount || 0);
|
|
case 'createdAt':
|
|
return new Date(b.createdAt) - new Date(a.createdAt);
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
};
|
|
|
|
const filteredCollections = collections.filter(collection => {
|
|
const matchesSearch = collection.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
collection.description.toLowerCase().includes(searchQuery.toLowerCase());
|
|
return matchesSearch;
|
|
});
|
|
|
|
const sortedCollections = sortCollections(filteredCollections, sortBy);
|
|
|
|
const formatCurrency = (amount) => {
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD'
|
|
}).format(amount);
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
return new Date(dateString).toLocaleDateString();
|
|
};
|
|
|
|
// Collection thumbnail component (same as in regular collections)
|
|
const CollectionThumbnail = ({ collection }) => {
|
|
const { thumbnails = [], image } = collection;
|
|
|
|
// If collection has a custom hero image, use it
|
|
if (image) {
|
|
return (
|
|
<div className="w-full h-48 rounded-xl overflow-hidden mb-4">
|
|
<img
|
|
src={image}
|
|
alt={collection.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// If no thumbnails available, show placeholder
|
|
if (!thumbnails || thumbnails.length === 0) {
|
|
return (
|
|
<div className="w-full h-48 rounded-xl mb-4 flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
|
<div className="text-center">
|
|
<div className="text-4xl mb-2">📦</div>
|
|
<p className="text-sm" style={{ color: 'var(--text-secondary)' }}>No cards yet</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Show main card (rarest) and grid of 4 others
|
|
const mainCard = thumbnails[0]; // Rarest card
|
|
const gridCards = thumbnails.slice(1, 5); // Next 4 cards
|
|
|
|
return (
|
|
<div className="w-full h-48 rounded-xl overflow-hidden mb-4 flex gap-2">
|
|
{/* Main card (rarest) - takes up 2/3 of the space */}
|
|
<div className="flex-2 h-full relative group">
|
|
{mainCard ? (
|
|
<div className="w-full h-full relative">
|
|
<img
|
|
src={mainCard.image_url || mainCard.stock_image_url}
|
|
alt={mainCard.name}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
{/* Rarity glow effect */}
|
|
<div className={`absolute inset-0 rarity-glow-${mainCard.rarity?.toLowerCase()}`}></div>
|
|
{/* Card name overlay */}
|
|
<div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-2">
|
|
<p className="text-white text-xs font-medium truncate">{mainCard.name}</p>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
|
<div className="text-2xl">🃏</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Grid of 4 other cards - takes up 1/3 of the space */}
|
|
<div className="flex-1 h-full">
|
|
<div className="grid grid-cols-2 gap-1 h-full">
|
|
{Array.from({ length: 4 }).map((_, index) => {
|
|
const card = gridCards[index];
|
|
return (
|
|
<div key={index} className="relative">
|
|
{card ? (
|
|
<div className="w-full h-full relative">
|
|
<img
|
|
src={card.image_url || card.stock_image_url}
|
|
alt={card.name}
|
|
className="w-full h-full object-cover rounded"
|
|
/>
|
|
{/* Subtle rarity glow */}
|
|
<div className={`absolute inset-0 rarity-glow-${card.rarity?.toLowerCase()} opacity-50 rounded`}></div>
|
|
</div>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center rounded" style={{ backgroundColor: 'var(--bg-tertiary)' }}>
|
|
<div className="text-lg opacity-50">🃏</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Show loading spinner while auth is loading or data is loading
|
|
if (authLoading || loading) {
|
|
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(--accent-ember)' }}></div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
// Redirect to login if not authenticated (handled by useEffect, but this is a fallback)
|
|
if (!user) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Layout user={user}>
|
|
{/* Header */}
|
|
<div className="p-6" style={{ backgroundColor: 'var(--bg-secondary)', borderBottom: '1px solid var(--border)' }}>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
|
Community Collections
|
|
</h1>
|
|
<p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
|
|
Discover public collections shared by the community
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Search and Sort */}
|
|
<div className="flex items-center justify-between mt-6">
|
|
<div className="flex-1 max-w-md">
|
|
<input
|
|
type="text"
|
|
placeholder="Search collections..."
|
|
className="input-field w-full"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<select
|
|
value={sortBy}
|
|
onChange={(e) => setSortBy(e.target.value)}
|
|
className="input-field w-48"
|
|
>
|
|
{sortOptions.map(option => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Collections Grid */}
|
|
<div className="p-6">
|
|
{sortedCollections.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)' }}>
|
|
{searchQuery ? 'No collections found' : 'No public collections yet'}
|
|
</h3>
|
|
<p className="text-sm mb-6" style={{ color: 'var(--text-secondary)' }}>
|
|
{searchQuery
|
|
? 'Try adjusting your search terms'
|
|
: 'Be the first to share a public collection with the community!'
|
|
}
|
|
</p>
|
|
{!searchQuery && (
|
|
<Link href="/collections">
|
|
<button className="px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
|
|
style={{
|
|
backgroundColor: 'var(--accent-ember)',
|
|
color: 'white'
|
|
}}
|
|
>
|
|
Go to My Collections
|
|
</button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|
{sortedCollections.map(collection => (
|
|
<Link key={collection.id} href={`/collection/${collection.slug || collection.id}`}>
|
|
<div className="card group cursor-pointer hover:shadow-lg transition-all duration-200">
|
|
<CollectionThumbnail collection={collection} />
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="font-semibold text-lg truncate" style={{ color: 'var(--text-primary)' }}>
|
|
{collection.name}
|
|
</h3>
|
|
{collection.description && (
|
|
<p className="text-sm mt-1 line-clamp-2" style={{ color: 'var(--text-secondary)' }}>
|
|
{collection.description}
|
|
</p>
|
|
)}
|
|
<p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
|
|
by {collection.creator}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center space-x-1 ml-2">
|
|
<PermissionIndicator
|
|
userRole={collection.userRole}
|
|
isPublic={collection.isPublic}
|
|
showTooltip={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Compact Stats */}
|
|
<div className="flex items-center justify-between text-sm" style={{ color: 'var(--text-secondary)' }}>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="font-medium" style={{ color: 'var(--text-primary)' }}>
|
|
{collection.cardCount} cards
|
|
</span>
|
|
<span className="font-medium" style={{ color: 'var(--accent-ember)' }}>
|
|
{formatCurrency(collection.value)}
|
|
</span>
|
|
</div>
|
|
<span className="text-xs">
|
|
{formatDate(collection.createdAt)}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Tags */}
|
|
{collection.tags && collection.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1">
|
|
{collection.tags.slice(0, 2).map((tag, index) => (
|
|
<span
|
|
key={index}
|
|
className="px-2 py-1 rounded-md text-xs font-medium"
|
|
style={{
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|
color: 'var(--text-secondary)'
|
|
}}
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
{collection.tags.length > 2 && (
|
|
<span
|
|
className="px-2 py-1 rounded-md text-xs font-medium"
|
|
style={{
|
|
backgroundColor: 'var(--bg-tertiary)',
|
|
color: 'var(--text-secondary)'
|
|
}}
|
|
>
|
|
+{collection.tags.length - 2}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|