deckhearth/pages/api/collections.js
Randall Stillwell af7593d884 Enhanced Collections UI with API Integration
🎯 Collections Page Improvements:
- Removed TCG selection from creation modal
- Added image URL field for collection hero images
- Changed public checkbox to visibility dropdown (Private/Invite-Only/Public)
- Added success modal with navigation to created collection
- Integrated real API calls for creating and fetching collections
- Added Permission indicators throughout the interface

🃏 Collection Detail Page Enhancements:
- Created comprehensive empty state for new collections
- Added 'Browse Cards to Add' call-to-action button
- Included quick add search functionality
- Improved filtered results empty state with clear filters option
- Integrated API calls for real collection data
- Distinguished between empty collection vs no search results

🗄️ Database & API Updates:
- Added image column to collections table
- Updated collections API to handle image field
- Enhanced API to return proper collection data structure
- Added fallback to mock data for development

🎨 User Experience:
- Beautiful success confirmation after collection creation
- Direct navigation to newly created collection
- Clear visual distinction between different empty states
- Intuitive call-to-action buttons for collection building
- Permission badges visible on collection cards

Ready for users to create collections with images and start building their card collections! 🚀
2025-07-25 10:06:39 -05:00

98 lines
No EOL
3.5 KiB
JavaScript

import { sql } from '@vercel/postgres';
export default async function handler(req, res) {
// Set CORS headers
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
// Handle preflight requests
if (req.method === 'OPTIONS') {
res.status(200).end();
return;
}
if (req.method === 'GET') {
try {
// Get user ID from auth (for now, hardcoded to 1)
const currentUserId = 1;
// Get collections based on visibility and user permissions
const result = await sql`
SELECT DISTINCT
c.*,
u.email as creator_email,
COUNT(cc.card_id) as card_count,
COALESCE(SUM(cards.market_price * cc.quantity), 0) as total_value,
cp.role as user_role
FROM collections c
LEFT JOIN users u ON c.user_id = u.id
LEFT JOIN collection_cards cc ON c.id = cc.collection_id
LEFT JOIN cards ON cc.card_id = cards.id
LEFT JOIN collection_permissions cp ON c.id = cp.collection_id AND cp.user_id = ${currentUserId} AND cp.status = 'active'
WHERE
c.visibility = 'public' OR
c.user_id = ${currentUserId} OR
cp.id IS NOT NULL
GROUP BY c.id, u.email, cp.role
ORDER BY c.updated_at DESC
`;
const collections = result.rows.map(collection => ({
id: collection.id,
name: collection.name,
description: collection.description,
tcg: collection.tcg || 'MTG',
cardCount: parseInt(collection.card_count) || 0,
value: parseFloat(collection.total_value) || 0,
lastViewed: collection.updated_at,
createdAt: collection.created_at,
visibility: collection.visibility || 'private',
tags: collection.tags ? collection.tags.split(',') : [],
creator: collection.creator_email,
userRole: collection.user_role || (collection.user_id === currentUserId ? 'owner' : null)
}));
res.status(200).json(collections);
} catch (error) {
console.error('Error fetching collections:', error);
res.status(500).json({ error: 'Internal server error' });
}
} else if (req.method === 'POST') {
try {
const { name, description, tcg = 'MTG', visibility = 'private', image = '', tags = [] } = req.body;
if (!name || !description) {
return res.status(400).json({ error: 'Name and description are required' });
}
if (!['private', 'invite-only', 'public'].includes(visibility)) {
return res.status(400).json({ error: 'Invalid visibility type' });
}
// For now, use user_id = 1 (should be from auth token in real implementation)
const userId = 1;
const result = await sql`
INSERT INTO collections (name, description, tcg, visibility, image, tags, user_id)
VALUES (${name}, ${description}, ${tcg}, ${visibility}, ${image}, ${tags.join(',')}, ${userId})
RETURNING *
`;
// Create owner permission record
await sql`
INSERT INTO collection_permissions (collection_id, user_id, role, status)
VALUES (${result.rows[0].id}, ${userId}, 'owner', 'active')
`;
res.status(201).json(result.rows[0]);
} catch (error) {
console.error('Error creating collection:', error);
res.status(500).json({ error: 'Internal server error' });
}
} else {
res.status(405).json({ error: 'Method not allowed' });
}
}