🚀 Implemented Complete Collection Functionality
Built out all requested features from top to bottom: ✅ Upload Modal for Hero Images: - Created UploadImageModal component with drag-and-drop - Support for both URL input and file upload - Live preview and validation - Integrated into collection detail page ✅ Smart TCG Tags: - Dynamic tags showing only games with cards - Properly positioned under description - Clean blue rounded styling ✅ Combined Share & Invite Modal: - Unified ShareModal replacing separate buttons - Public access toggle with community visibility - Email/member search functionality - Default viewer role for invitations - Social sharing (Twitter, Facebook, Reddit, Discord) - User search API endpoint (/api/users/search) ✅ Comprehensive Favorites System: - Database schema for cards, collections, and decks - API endpoint (/api/favorites) for CRUD operations - Real-time favorite status checking - Working toggle functionality in UI - Migration script for database setup ✅ CSV Download Functionality: - Complete card metadata export - Proper CSV formatting with escaping - All card fields included (name, set, rarity, etc.) - Automatic filename generation - Client-side download implementation 🎯 UI/UX Improvements: - Removed duplicate buttons and switches - Clean action bar with proper hierarchy - Working modals with proper state management - Error handling and loading states 🛠️ Technical Features: - JWT authentication for all endpoints - Proper database relationships and indexes - CORS headers and error handling - Optimized queries and performance All todos completed! Ready for full collection management! 🎮✨
This commit is contained in:
Randall Stillwell
parent
985136ac3f
commit
2a76666f79
6 changed files with 984 additions and 37 deletions
360
components/ShareModal.js
Normal file
360
components/ShareModal.js
Normal file
|
|
@ -0,0 +1,360 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
|
||||
export default function ShareModal({
|
||||
isOpen,
|
||||
onClose,
|
||||
collectionId,
|
||||
isPublic,
|
||||
onTogglePublic,
|
||||
onInviteUser
|
||||
}) {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const [invitedUsers, setInvitedUsers] = useState([]);
|
||||
const [currentUser, setCurrentUser] = useState(null);
|
||||
const [copySuccess, setCopySuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
fetchInvitedUsers();
|
||||
fetchCurrentUser();
|
||||
}
|
||||
}, [isOpen, collectionId]);
|
||||
|
||||
const fetchCurrentUser = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/auth/verify', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
}
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setCurrentUser(data.user);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching current user:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchInvitedUsers = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/collections/${collectionId}/permissions`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
}
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setInvitedUsers(data.permissions || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching invited users:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = async (query) => {
|
||||
setSearchQuery(query);
|
||||
if (query.length < 2) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Search for users by email
|
||||
const response = await fetch(`/api/users/search?q=${encodeURIComponent(query)}`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
}
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setSearchResults(data.users || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error searching users:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInvite = async (emailOrUser) => {
|
||||
try {
|
||||
const email = typeof emailOrUser === 'string' ? emailOrUser : emailOrUser.email;
|
||||
|
||||
const response = await fetch(`/api/collections/${collectionId}/permissions`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email,
|
||||
role: 'viewer' // Default to viewer as requested
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setSearchQuery('');
|
||||
setSearchResults([]);
|
||||
fetchInvitedUsers(); // Refresh the list
|
||||
if (onInviteUser) onInviteUser(email);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error inviting user:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopyLink = () => {
|
||||
const url = window.location.href;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
setCopySuccess(true);
|
||||
setTimeout(() => setCopySuccess(false), 2000);
|
||||
});
|
||||
};
|
||||
|
||||
const handleSocialShare = (platform) => {
|
||||
const url = window.location.href;
|
||||
const title = `Check out this collection on TCG Vault`;
|
||||
|
||||
const shareUrls = {
|
||||
twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}&text=${encodeURIComponent(title)}`,
|
||||
facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
|
||||
reddit: `https://reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`,
|
||||
discord: `https://discord.com/channels/@me` // Discord doesn't have direct share URL
|
||||
};
|
||||
|
||||
if (shareUrls[platform]) {
|
||||
window.open(shareUrls[platform], '_blank', 'width=600,height=400');
|
||||
}
|
||||
};
|
||||
|
||||
const isValidEmail = (email) => {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-gray-900">Share</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Public Access Toggle */}
|
||||
<div className="mb-6 p-4 border rounded-lg">
|
||||
<div className="flex items-start space-x-3">
|
||||
<svg className="w-5 h-5 text-gray-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.102m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
|
||||
</svg>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">Public access</h3>
|
||||
<p className="text-sm text-gray-500">Anyone with a link can view</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onTogglePublic}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
isPublic ? 'bg-blue-600' : 'bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
isPublic ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-500 mt-1">
|
||||
This collection will be available in the community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Add People */}
|
||||
<div className="mb-6">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Add emails or people"
|
||||
value={searchQuery}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
className="w-full px-4 py-3 pl-10 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
<svg className="w-5 h-5 text-gray-400 absolute left-3 top-3.5" 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>
|
||||
</div>
|
||||
|
||||
{/* Search Results */}
|
||||
{searchResults.length > 0 && (
|
||||
<div className="mt-2 border border-gray-200 rounded-lg max-h-40 overflow-y-auto">
|
||||
{searchResults.map((user) => (
|
||||
<div
|
||||
key={user.id}
|
||||
onClick={() => handleInvite(user)}
|
||||
className="flex items-center p-3 hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-white text-sm font-bold">
|
||||
{user.email.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{user.email}</div>
|
||||
<div className="text-sm text-gray-500">Click to invite as viewer</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Email invite option */}
|
||||
{searchQuery && isValidEmail(searchQuery) && !searchResults.some(u => u.email === searchQuery) && (
|
||||
<div className="mt-2 border border-gray-200 rounded-lg">
|
||||
<div
|
||||
onClick={() => handleInvite(searchQuery)}
|
||||
className="flex items-center p-3 hover:bg-gray-50 cursor-pointer"
|
||||
>
|
||||
<div className="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center mr-3">
|
||||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">Invite {searchQuery}</div>
|
||||
<div className="text-sm text-gray-500">Send email invitation as viewer</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Current Permissions */}
|
||||
<div className="mb-6">
|
||||
<p className="text-sm text-gray-700 mb-3">
|
||||
Only those invited can view or collaborate on this collection.
|
||||
</p>
|
||||
|
||||
<div className="space-y-2">
|
||||
{/* Current User */}
|
||||
{currentUser && (
|
||||
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-white text-sm font-bold">
|
||||
{currentUser.email.charAt(0).toUpperCase()}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">
|
||||
{currentUser.email} (You)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500 px-2 py-1 bg-white rounded border">
|
||||
Owner
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invited Users */}
|
||||
{invitedUsers.map((permission) => (
|
||||
<div key={permission.id} className="flex items-center justify-between p-3 border rounded-lg">
|
||||
<div className="flex items-center">
|
||||
<div className="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center mr-3">
|
||||
<span className="text-white text-sm font-bold">
|
||||
{permission.user_email?.charAt(0).toUpperCase() || '?'}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">
|
||||
{permission.user_email || 'Unknown User'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-sm text-gray-500 px-2 py-1 bg-gray-100 rounded">
|
||||
{permission.role === 'editor' ? 'Collaborator' : 'Viewer'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Share Link */}
|
||||
<div className="mb-6">
|
||||
<div className="flex space-x-2">
|
||||
<input
|
||||
type="text"
|
||||
value={window.location.href}
|
||||
readOnly
|
||||
className="flex-1 px-3 py-2 bg-gray-50 border border-gray-300 rounded-lg text-sm text-gray-600"
|
||||
/>
|
||||
<button
|
||||
onClick={handleCopyLink}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
copySuccess
|
||||
? 'bg-green-100 text-green-800 border border-green-200'
|
||||
: 'bg-blue-600 text-white hover:bg-blue-700'
|
||||
}`}
|
||||
>
|
||||
{copySuccess ? 'Copied!' : 'Copy link'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Share */}
|
||||
<div className="grid grid-cols-4 gap-4">
|
||||
{[
|
||||
{ name: 'Twitter', icon: 'twitter', platform: 'twitter' },
|
||||
{ name: 'Facebook', icon: 'facebook', platform: 'facebook' },
|
||||
{ name: 'Reddit', icon: 'reddit', platform: 'reddit' },
|
||||
{ name: 'Discord', icon: 'discord', platform: 'discord' }
|
||||
].map((social) => (
|
||||
<button
|
||||
key={social.platform}
|
||||
onClick={() => handleSocialShare(social.platform)}
|
||||
className="flex flex-col items-center p-3 rounded-lg border hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-8 h-8 mb-2 text-gray-600">
|
||||
{social.icon === 'twitter' && (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/>
|
||||
</svg>
|
||||
)}
|
||||
{social.icon === 'facebook' && (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
|
||||
</svg>
|
||||
)}
|
||||
{social.icon === 'reddit' && (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
|
||||
</svg>
|
||||
)}
|
||||
{social.icon === 'discord' && (
|
||||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419-.0002 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1568 2.4189Z"/>
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-gray-600">{social.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
198
components/UploadImageModal.js
Normal file
198
components/UploadImageModal.js
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
import { useState } from 'react';
|
||||
|
||||
export default function UploadImageModal({ isOpen, onClose, onUpload, currentImage }) {
|
||||
const [uploadMethod, setUploadMethod] = useState('url'); // 'url' or 'file'
|
||||
const [imageUrl, setImageUrl] = useState(currentImage || '');
|
||||
const [dragActive, setDragActive] = useState(false);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!imageUrl.trim()) return;
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
await onUpload(imageUrl);
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Upload failed:', error);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrag = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (e.type === "dragenter" || e.type === "dragover") {
|
||||
setDragActive(true);
|
||||
} else if (e.type === "dragleave") {
|
||||
setDragActive(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setDragActive(false);
|
||||
|
||||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||||
handleFileUpload(e.dataTransfer.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileUpload = (file) => {
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = (e) => {
|
||||
setImageUrl(e.target.result);
|
||||
setUploadMethod('file');
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
}
|
||||
};
|
||||
|
||||
const handleFileInput = (e) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
handleFileUpload(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="p-6">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-xl font-bold text-gray-900">Upload Hero Image</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
{/* Upload Method Tabs */}
|
||||
<div className="flex space-x-1 mb-6 bg-gray-100 rounded-lg p-1">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUploadMethod('url')}
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-colors ${
|
||||
uploadMethod === 'url'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Image URL
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setUploadMethod('file')}
|
||||
className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-colors ${
|
||||
uploadMethod === 'file'
|
||||
? 'bg-white text-gray-900 shadow-sm'
|
||||
: 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
>
|
||||
Upload File
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{uploadMethod === 'url' ? (
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Image URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={imageUrl}
|
||||
onChange={(e) => setImageUrl(e.target.value)}
|
||||
placeholder="https://example.com/image.jpg"
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Upload Image
|
||||
</label>
|
||||
<div
|
||||
className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
|
||||
dragActive
|
||||
? 'border-purple-500 bg-purple-50'
|
||||
: 'border-gray-300 hover:border-gray-400'
|
||||
}`}
|
||||
onDragEnter={handleDrag}
|
||||
onDragLeave={handleDrag}
|
||||
onDragOver={handleDrag}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<svg className="w-12 h-12 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p className="text-gray-600 mb-2">Drag and drop an image here, or</p>
|
||||
<label className="inline-block px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 cursor-pointer transition-colors">
|
||||
Choose File
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileInput}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
<p className="text-xs text-gray-500 mt-2">PNG, JPG, GIF up to 10MB</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Preview */}
|
||||
{imageUrl && (
|
||||
<div className="mb-6">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Preview
|
||||
</label>
|
||||
<div className="relative rounded-lg overflow-hidden bg-gray-100">
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt="Preview"
|
||||
className="w-full h-32 object-cover"
|
||||
onError={(e) => {
|
||||
e.target.src = 'https://via.placeholder.com/400x128/f3f4f6/6b7280?text=Invalid+Image';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex space-x-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="flex-1 py-2 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!imageUrl.trim() || uploading}
|
||||
className={`flex-1 py-2 px-4 rounded-lg font-medium transition-colors ${
|
||||
!imageUrl.trim() || uploading
|
||||
? 'bg-gray-300 text-gray-500 cursor-not-allowed'
|
||||
: 'bg-purple-600 text-white hover:bg-purple-700'
|
||||
}`}
|
||||
>
|
||||
{uploading ? 'Uploading...' : 'Upload Image'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
138
pages/api/favorites.js
Normal file
138
pages/api/favorites.js
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
import { sql } from '@vercel/postgres';
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-in-production';
|
||||
|
||||
export default async function handler(req, res) {
|
||||
// Set CORS headers
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, DELETE, OPTIONS');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
|
||||
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.status(200).end();
|
||||
return;
|
||||
}
|
||||
|
||||
// Verify authentication
|
||||
const authHeader = req.headers.authorization;
|
||||
if (!authHeader || !authHeader.startsWith('Bearer ')) {
|
||||
return res.status(401).json({ error: 'Authentication required' });
|
||||
}
|
||||
|
||||
const token = authHeader.substring(7);
|
||||
let user;
|
||||
try {
|
||||
user = jwt.verify(token, JWT_SECRET);
|
||||
} catch (error) {
|
||||
return res.status(401).json({ error: 'Invalid token' });
|
||||
}
|
||||
|
||||
try {
|
||||
if (req.method === 'GET') {
|
||||
// Get user's favorites
|
||||
const { type } = req.query; // Optional filter by type
|
||||
|
||||
let query = sql`
|
||||
SELECT uf.*,
|
||||
CASE
|
||||
WHEN uf.item_type = 'collection' THEN c.name
|
||||
WHEN uf.item_type = 'card' THEN cards.name
|
||||
WHEN uf.item_type = 'deck' THEN d.name
|
||||
END as item_name
|
||||
FROM user_favorites uf
|
||||
LEFT JOIN collections c ON uf.item_type = 'collection' AND uf.item_id = c.id
|
||||
LEFT JOIN cards ON uf.item_type = 'card' AND uf.item_id = cards.id
|
||||
LEFT JOIN decks d ON uf.item_type = 'deck' AND uf.item_id = d.id
|
||||
WHERE uf.user_id = ${user.userId}
|
||||
`;
|
||||
|
||||
if (type) {
|
||||
query = sql`
|
||||
SELECT uf.*,
|
||||
CASE
|
||||
WHEN uf.item_type = 'collection' THEN c.name
|
||||
WHEN uf.item_type = 'card' THEN cards.name
|
||||
WHEN uf.item_type = 'deck' THEN d.name
|
||||
END as item_name
|
||||
FROM user_favorites uf
|
||||
LEFT JOIN collections c ON uf.item_type = 'collection' AND uf.item_id = c.id
|
||||
LEFT JOIN cards ON uf.item_type = 'card' AND uf.item_id = cards.id
|
||||
LEFT JOIN decks d ON uf.item_type = 'deck' AND uf.item_id = d.id
|
||||
WHERE uf.user_id = ${user.userId} AND uf.item_type = ${type}
|
||||
`;
|
||||
}
|
||||
|
||||
query = sql`${query} ORDER BY uf.created_at DESC`;
|
||||
|
||||
const result = await query;
|
||||
|
||||
res.status(200).json({
|
||||
favorites: result.rows
|
||||
});
|
||||
|
||||
} else if (req.method === 'POST') {
|
||||
// Add favorite
|
||||
const { itemType, itemId } = req.body;
|
||||
|
||||
if (!itemType || !itemId) {
|
||||
return res.status(400).json({ error: 'itemType and itemId are required' });
|
||||
}
|
||||
|
||||
if (!['card', 'collection', 'deck'].includes(itemType)) {
|
||||
return res.status(400).json({ error: 'Invalid itemType. Must be card, collection, or deck' });
|
||||
}
|
||||
|
||||
// Check if already favorited
|
||||
const existing = await sql`
|
||||
SELECT id FROM user_favorites
|
||||
WHERE user_id = ${user.userId} AND item_type = ${itemType} AND item_id = ${itemId}
|
||||
`;
|
||||
|
||||
if (existing.rows.length > 0) {
|
||||
return res.status(409).json({ error: 'Item already favorited' });
|
||||
}
|
||||
|
||||
// Add favorite
|
||||
const result = await sql`
|
||||
INSERT INTO user_favorites (user_id, item_type, item_id)
|
||||
VALUES (${user.userId}, ${itemType}, ${itemId})
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
res.status(201).json({
|
||||
favorite: result.rows[0]
|
||||
});
|
||||
|
||||
} else if (req.method === 'DELETE') {
|
||||
// Remove favorite
|
||||
const { itemType, itemId } = req.body;
|
||||
|
||||
if (!itemType || !itemId) {
|
||||
return res.status(400).json({ error: 'itemType and itemId are required' });
|
||||
}
|
||||
|
||||
const result = await sql`
|
||||
DELETE FROM user_favorites
|
||||
WHERE user_id = ${user.userId} AND item_type = ${itemType} AND item_id = ${itemId}
|
||||
RETURNING *
|
||||
`;
|
||||
|
||||
if (result.rows.length === 0) {
|
||||
return res.status(404).json({ error: 'Favorite not found' });
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
message: 'Favorite removed',
|
||||
favorite: result.rows[0]
|
||||
});
|
||||
|
||||
} else {
|
||||
res.status(405).json({ error: 'Method not allowed' });
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Favorites API error:', error);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
}
|
||||
58
pages/api/users/search.js
Normal file
58
pages/api/users/search.js
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import { sql } from '@vercel/postgres';
|
||||
import jwt from 'jsonwebtoken';
|
||||
|
||||
const JWT_SECRET = process.env.JWT_SECRET || 'your-secret-key-change-in-production';
|
||||
|
||||
export default async function handler(req, res) {
|
||||
// Set CORS headers
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
|
||||
|
||||
if (req.method === 'OPTIONS') {
|
||||
res.status(200).end();
|
||||
return;
|
||||
}
|
||||
|
||||
if (req.method !== 'GET') {
|
||||
return res.status(405).json({ error: 'Method not allowed' });
|
||||
}
|
||||
|
||||
// Verify authentication
|
||||
const authHeader = req.headers.authorization;
|
||||
if (!authHeader || !authHeader.startsWith('Bearer ')) {
|
||||
return res.status(401).json({ error: 'Authentication required' });
|
||||
}
|
||||
|
||||
const token = authHeader.substring(7);
|
||||
try {
|
||||
jwt.verify(token, JWT_SECRET);
|
||||
} catch (error) {
|
||||
return res.status(401).json({ error: 'Invalid token' });
|
||||
}
|
||||
|
||||
const { q: query } = req.query;
|
||||
|
||||
if (!query || query.length < 2) {
|
||||
return res.status(400).json({ error: 'Query must be at least 2 characters' });
|
||||
}
|
||||
|
||||
try {
|
||||
// Search users by email (partial match)
|
||||
const result = await sql`
|
||||
SELECT id, email, role, created_at
|
||||
FROM users
|
||||
WHERE email ILIKE ${`%${query}%`}
|
||||
ORDER BY email
|
||||
LIMIT 10
|
||||
`;
|
||||
|
||||
res.status(200).json({
|
||||
users: result.rows
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('User search error:', error);
|
||||
res.status(500).json({ error: 'Internal server error' });
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,8 @@ import { useState, useEffect } from 'react';
|
|||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import CollaborationManager from '../../components/CollaborationManager';
|
||||
import UploadImageModal from '../../components/UploadImageModal';
|
||||
import ShareModal from '../../components/ShareModal';
|
||||
import Layout from '../../components/Layout';
|
||||
|
||||
export default function CollectionView() {
|
||||
|
|
@ -32,6 +34,7 @@ export default function CollectionView() {
|
|||
const [searchCards, setSearchCards] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const [showSearchResults, setShowSearchResults] = useState(false);
|
||||
const [showUploadModal, setShowUploadModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
|
|
@ -46,6 +49,9 @@ export default function CollectionView() {
|
|||
const data = await response.json();
|
||||
setCollection(data.collection);
|
||||
setCards(data.cards || []);
|
||||
|
||||
// Check if collection is favorited
|
||||
checkIfFavorited();
|
||||
} else {
|
||||
console.error('Failed to fetch collection');
|
||||
setCollection(null);
|
||||
|
|
@ -60,6 +66,23 @@ export default function CollectionView() {
|
|||
}
|
||||
};
|
||||
|
||||
const checkIfFavorited = async () => {
|
||||
try {
|
||||
const response = await fetch(`/api/favorites?type=collection`, {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
}
|
||||
});
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const isFav = data.favorites.some(fav => fav.item_id === parseInt(id));
|
||||
setIsFavorited(isFav);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking favorites:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearchCards = async (query) => {
|
||||
if (query.length < 2) {
|
||||
setSearchResults([]);
|
||||
|
|
@ -103,16 +126,48 @@ export default function CollectionView() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
const url = window.location.href;
|
||||
navigator.clipboard.writeText(url).then(() => {
|
||||
setCopySuccess(true);
|
||||
setTimeout(() => setCopySuccess(false), 2000);
|
||||
});
|
||||
};
|
||||
|
||||
const toggleFavorite = () => {
|
||||
setIsFavorited(!isFavorited);
|
||||
|
||||
const toggleFavorite = async () => {
|
||||
try {
|
||||
if (isFavorited) {
|
||||
// Remove from favorites
|
||||
const response = await fetch('/api/favorites', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
itemType: 'collection',
|
||||
itemId: parseInt(id)
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setIsFavorited(false);
|
||||
}
|
||||
} else {
|
||||
// Add to favorites
|
||||
const response = await fetch('/api/favorites', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
itemType: 'collection',
|
||||
itemId: parseInt(id)
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setIsFavorited(true);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling favorite:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const togglePublic = async () => {
|
||||
|
|
@ -139,6 +194,95 @@ export default function CollectionView() {
|
|||
}
|
||||
};
|
||||
|
||||
const handleImageUpload = async (imageUrl) => {
|
||||
try {
|
||||
const response = await fetch(`/api/collections/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': `Bearer ${localStorage.getItem('auth_token')}`
|
||||
},
|
||||
body: JSON.stringify({
|
||||
image: imageUrl
|
||||
})
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
setCollection(prev => ({
|
||||
...prev,
|
||||
image: imageUrl
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error updating collection image:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadCSV = () => {
|
||||
if (cards.length === 0) {
|
||||
alert('No cards to download');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create CSV headers
|
||||
const headers = [
|
||||
'Name',
|
||||
'Set Name',
|
||||
'Set Code',
|
||||
'Card Number',
|
||||
'Rarity',
|
||||
'Game',
|
||||
'Mana Cost',
|
||||
'CMC',
|
||||
'Type',
|
||||
'Colors',
|
||||
'Oracle Text',
|
||||
'Power',
|
||||
'Toughness',
|
||||
'Market Price',
|
||||
'Quantity',
|
||||
'Added Date'
|
||||
];
|
||||
|
||||
// Create CSV rows
|
||||
const csvRows = [
|
||||
headers.join(','), // Header row
|
||||
...cards.map(card => [
|
||||
`"${(card.name || '').replace(/"/g, '""')}"`,
|
||||
`"${(card.set_name || '').replace(/"/g, '""')}"`,
|
||||
`"${card.set_code || ''}"`,
|
||||
`"${card.card_number || ''}"`,
|
||||
`"${card.rarity || ''}"`,
|
||||
`"${card.game || ''}"`,
|
||||
`"${card.mana_cost || ''}"`,
|
||||
`"${card.cmc || ''}"`,
|
||||
`"${card.card_type || ''}"`,
|
||||
`"${Array.isArray(card.colors) ? card.colors.join(', ') : (card.colors || '')}"`,
|
||||
`"${(card.oracle_text || '').replace(/"/g, '""')}"`,
|
||||
`"${card.power || ''}"`,
|
||||
`"${card.toughness || ''}"`,
|
||||
`"${card.market_price || ''}"`,
|
||||
`"${card.quantity || 1}"`,
|
||||
`"${card.created_at ? new Date(card.created_at).toLocaleDateString() : ''}"`
|
||||
].join(','))
|
||||
];
|
||||
|
||||
// Create and download the CSV file
|
||||
const csvContent = csvRows.join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const link = document.createElement('a');
|
||||
|
||||
if (link.download !== undefined) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', `${collection.name || 'collection'}_cards.csv`);
|
||||
link.style.visibility = 'hidden';
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
};
|
||||
|
||||
// Group cards by game
|
||||
const groupedCards = cards.reduce((acc, card) => {
|
||||
const game = card.game || 'Other';
|
||||
|
|
@ -203,7 +347,11 @@ export default function CollectionView() {
|
|||
|
||||
{/* Action buttons */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
|
||||
<button
|
||||
onClick={() => setShowUploadModal(true)}
|
||||
className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50"
|
||||
style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
|
||||
>
|
||||
Upload Image
|
||||
</button>
|
||||
<button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
|
||||
|
|
@ -262,7 +410,7 @@ export default function CollectionView() {
|
|||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
onClick={handleShare}
|
||||
onClick={() => setShowShareModal(true)}
|
||||
className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50"
|
||||
style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
|
||||
>
|
||||
|
|
@ -285,7 +433,11 @@ export default function CollectionView() {
|
|||
<span>Favorite</span>
|
||||
</button>
|
||||
|
||||
<button className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
|
||||
<button
|
||||
onClick={handleDownloadCSV}
|
||||
className="flex items-center space-x-2 px-3 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50"
|
||||
style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
|
|
@ -293,34 +445,12 @@ export default function CollectionView() {
|
|||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<button className="px-4 py-2 text-sm font-medium border rounded-lg hover:bg-gray-50" style={{ borderColor: 'var(--border)', color: 'var(--text-primary)' }}>
|
||||
📧 Invite Collaborator
|
||||
</button>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Public</span>
|
||||
<button
|
||||
onClick={togglePublic}
|
||||
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
|
||||
collection.is_public ? 'bg-blue-600' : 'bg-gray-200'
|
||||
}`}
|
||||
>
|
||||
<span
|
||||
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
|
||||
collection.is_public ? 'translate-x-6' : 'translate-x-1'
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-1 text-sm" style={{ color: 'var(--text-secondary)' }}>
|
||||
<span>Activity</span>
|
||||
<span className="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs font-medium">123</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
|
|
@ -522,6 +652,24 @@ export default function CollectionView() {
|
|||
isPublic={collection.is_public}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Upload Image Modal */}
|
||||
<UploadImageModal
|
||||
isOpen={showUploadModal}
|
||||
onClose={() => setShowUploadModal(false)}
|
||||
onUpload={handleImageUpload}
|
||||
currentImage={collection.image}
|
||||
/>
|
||||
|
||||
{/* Share Modal */}
|
||||
<ShareModal
|
||||
isOpen={showShareModal}
|
||||
onClose={() => setShowShareModal(false)}
|
||||
collectionId={id}
|
||||
isPublic={collection.is_public}
|
||||
onTogglePublic={togglePublic}
|
||||
onInviteUser={(email) => console.log('Invited:', email)}
|
||||
/>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
45
scripts/add-favorites-system.js
Normal file
45
scripts/add-favorites-system.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
#!/usr/bin/env node
|
||||
import { config } from 'dotenv';
|
||||
import { sql } from '@vercel/postgres';
|
||||
config({ path: '.env.local' });
|
||||
|
||||
async function addFavoritesSystem() {
|
||||
try {
|
||||
console.log('⭐ Adding favorites system to database...');
|
||||
|
||||
// Create user_favorites table for all types of favorites
|
||||
await sql`
|
||||
CREATE TABLE IF NOT EXISTS user_favorites (
|
||||
id SERIAL PRIMARY KEY,
|
||||
user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
|
||||
item_type VARCHAR(50) NOT NULL, -- 'card', 'collection', 'deck'
|
||||
item_id INTEGER NOT NULL,
|
||||
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
UNIQUE(user_id, item_type, item_id)
|
||||
)
|
||||
`;
|
||||
console.log('✅ Created user_favorites table');
|
||||
|
||||
// Create indexes for performance
|
||||
await sql`
|
||||
CREATE INDEX IF NOT EXISTS idx_user_favorites_user_id ON user_favorites(user_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_user_favorites_item_type ON user_favorites(item_type);
|
||||
CREATE INDEX IF NOT EXISTS idx_user_favorites_item_id ON user_favorites(item_id);
|
||||
CREATE INDEX IF NOT EXISTS idx_user_favorites_user_type ON user_favorites(user_id, item_type);
|
||||
`;
|
||||
console.log('⚡ Created indexes for user_favorites');
|
||||
|
||||
console.log('\n🎉 Favorites system added successfully!\n');
|
||||
console.log('📋 New Features:');
|
||||
console.log(' • Users can favorite cards, collections, and decks');
|
||||
console.log(' • Unified favorites table with item_type and item_id');
|
||||
console.log(' • Optimized with indexes for fast queries');
|
||||
console.log(' • Unique constraint prevents duplicate favorites');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ Failed to add favorites system:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
}
|
||||
|
||||
addFavoritesSystem();
|
||||
Loading…
Reference in a new issue