8bacbaca39
Resolve react-hooks, no-unescaped-entities, and no-img-element findings under pages/ with lint-only changes so npx eslint pages/ exits clean. Co-authored-by: Cursor <cursoragent@cursor.com>
464 lines
No EOL
17 KiB
JavaScript
464 lines
No EOL
17 KiB
JavaScript
import { useState, useEffect } from 'react';
|
||
import { useRouter } from 'next/router';
|
||
import Link from 'next/link';
|
||
import Layout from '../components/Layout';
|
||
import { useAuth } from '../lib/use-auth';
|
||
|
||
export default function Decks() {
|
||
const { user } = useAuth();
|
||
const router = useRouter();
|
||
const [decks, setDecks] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||
const [editingDeck, setEditingDeck] = useState(null);
|
||
const [newDeck, setNewDeck] = useState({
|
||
name: '',
|
||
description: '',
|
||
format: 'Commander',
|
||
is_public: false
|
||
});
|
||
|
||
const fetchDecks = async () => {
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch('/api/decks', {
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
const data = await response.json();
|
||
setDecks(data);
|
||
} else {
|
||
console.error('Failed to fetch decks');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error fetching decks:', error);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (user) {
|
||
// eslint-disable-next-line react-hooks/set-state-in-effect -- load decks when user is available
|
||
fetchDecks();
|
||
}
|
||
}, [user]);
|
||
|
||
;
|
||
|
||
const handleCreateDeck = async (e) => {
|
||
e.preventDefault();
|
||
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch('/api/decks', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify(newDeck)
|
||
});
|
||
|
||
if (response.ok) {
|
||
const createdDeck = await response.json();
|
||
setDecks([createdDeck, ...decks]);
|
||
setShowCreateModal(false);
|
||
setNewDeck({ name: '', description: '', format: 'Commander', is_public: false });
|
||
|
||
// Navigate to deck builder for the new deck
|
||
router.push(`/deck-builder?deck=${createdDeck.id}`);
|
||
} else {
|
||
console.error('Failed to create deck');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error creating deck:', error);
|
||
}
|
||
};
|
||
|
||
const handleEditDeck = async (e) => {
|
||
e.preventDefault();
|
||
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch(`/api/decks/${editingDeck.id}`, {
|
||
method: 'PUT',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'Authorization': `Bearer ${token}`
|
||
},
|
||
body: JSON.stringify(editingDeck)
|
||
});
|
||
|
||
if (response.ok) {
|
||
const updatedDeck = await response.json();
|
||
setDecks(decks.map(deck => deck.id === updatedDeck.id ? updatedDeck : deck));
|
||
setEditingDeck(null);
|
||
} else {
|
||
console.error('Failed to update deck');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error updating deck:', error);
|
||
}
|
||
};
|
||
|
||
const handleDeleteDeck = async (deckId) => {
|
||
if (!confirm('Are you sure you want to delete this deck? This action cannot be undone.')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const token = localStorage.getItem('auth_token');
|
||
const response = await fetch(`/api/decks/${deckId}`, {
|
||
method: 'DELETE',
|
||
headers: {
|
||
'Authorization': `Bearer ${token}`
|
||
}
|
||
});
|
||
|
||
if (response.ok) {
|
||
setDecks(decks.filter(deck => deck.id !== deckId));
|
||
} else {
|
||
console.error('Failed to delete deck');
|
||
}
|
||
} catch (error) {
|
||
console.error('Error deleting deck:', error);
|
||
}
|
||
};
|
||
|
||
const getFormatIcon = (format) => {
|
||
switch (format) {
|
||
case 'Commander':
|
||
return '⚔️';
|
||
case 'Standard':
|
||
return '🏆';
|
||
case 'Modern':
|
||
return '🔥';
|
||
case 'Legacy':
|
||
return '💎';
|
||
default:
|
||
return '🃏';
|
||
}
|
||
};
|
||
|
||
const getFormatColor = (format) => {
|
||
switch (format) {
|
||
case 'Commander':
|
||
return 'bg-purple-100 text-purple-800';
|
||
case 'Standard':
|
||
return 'bg-blue-100 text-blue-800';
|
||
case 'Modern':
|
||
return 'bg-red-100 text-red-800';
|
||
case 'Legacy':
|
||
return 'bg-yellow-100 text-yellow-800';
|
||
default:
|
||
return 'bg-gray-100 text-gray-800';
|
||
}
|
||
};
|
||
|
||
if (!user) {
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="flex items-center justify-center min-h-screen">
|
||
<div className="text-center">
|
||
<h1 className="text-2xl font-bold mb-4">Please log in to view your decks</h1>
|
||
<Link href="/login" className="text-accent-ember hover:underline">
|
||
Go to Login
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
if (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 border-accent-ember"></div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Layout user={user}>
|
||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
{/* Header */}
|
||
<div className="flex justify-between items-center mb-8">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-text-primary">My Decks</h1>
|
||
<p className="text-text-secondary mt-2">
|
||
Build and manage your MTG decks
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowCreateModal(true)}
|
||
className="bg-accent-ember text-white px-6 py-3 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
Create New Deck
|
||
</button>
|
||
</div>
|
||
|
||
{/* Stats */}
|
||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||
<div className="bg-bg-secondary rounded-lg p-6">
|
||
<div className="text-2xl font-bold text-text-primary">{decks.length}</div>
|
||
<div className="text-text-secondary">Total Decks</div>
|
||
</div>
|
||
<div className="bg-bg-secondary rounded-lg p-6">
|
||
<div className="text-2xl font-bold text-text-primary">
|
||
{decks.filter(d => d.format === 'Commander').length}
|
||
</div>
|
||
<div className="text-text-secondary">Commander</div>
|
||
</div>
|
||
<div className="bg-bg-secondary rounded-lg p-6">
|
||
<div className="text-2xl font-bold text-text-primary">
|
||
{decks.filter(d => d.is_public).length}
|
||
</div>
|
||
<div className="text-text-secondary">Public</div>
|
||
</div>
|
||
<div className="bg-bg-secondary rounded-lg p-6">
|
||
<div className="text-2xl font-bold text-text-primary">
|
||
{decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
|
||
</div>
|
||
<div className="text-text-secondary">Total Cards</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Decks Grid */}
|
||
{decks.length === 0 ? (
|
||
<div className="text-center py-12">
|
||
<div className="text-6xl mb-4">🃏</div>
|
||
<h3 className="text-xl font-semibold text-text-primary mb-2">No decks yet</h3>
|
||
<p className="text-text-secondary mb-6">Create your first deck to get started</p>
|
||
<button
|
||
onClick={() => setShowCreateModal(true)}
|
||
className="bg-accent-ember text-white px-6 py-3 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
Create Your First Deck
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{decks.map((deck) => (
|
||
<div key={deck.id} className="bg-bg-secondary rounded-lg p-6 hover:shadow-lg transition-shadow">
|
||
<div className="flex justify-between items-start mb-4">
|
||
<div className="flex items-center space-x-2">
|
||
<span className="text-2xl">{getFormatIcon(deck.format)}</span>
|
||
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getFormatColor(deck.format)}`}>
|
||
{deck.format}
|
||
</span>
|
||
</div>
|
||
<div className="flex space-x-2">
|
||
<button
|
||
onClick={() => setEditingDeck({...deck})}
|
||
className="text-text-secondary hover:text-accent-ember transition-colors"
|
||
>
|
||
✏️
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteDeck(deck.id)}
|
||
className="text-text-secondary hover:text-red-500 transition-colors"
|
||
>
|
||
🗑️
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-bold text-text-primary mb-2">{deck.name}</h3>
|
||
|
||
{deck.description && (
|
||
<p className="text-text-secondary text-sm mb-4 line-clamp-2">{deck.description}</p>
|
||
)}
|
||
|
||
<div className="flex justify-between items-center text-sm text-text-secondary mb-4">
|
||
<span>{deck.card_count || 0} cards</span>
|
||
{deck.is_public && <span className="text-green-600">Public</span>}
|
||
</div>
|
||
|
||
<div className="flex space-x-2">
|
||
<Link
|
||
href={`/deck-builder?deck=${deck.id}`}
|
||
className="flex-1 bg-accent-ember text-white text-center py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
Edit Deck
|
||
</Link>
|
||
<Link
|
||
href={`/deck/${deck.id}`}
|
||
className="flex-1 bg-bg-tertiary text-text-primary text-center py-2 rounded-lg hover:bg-bg-primary transition-colors"
|
||
>
|
||
View
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Create Deck Modal */}
|
||
{showCreateModal && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||
<div className="bg-bg-primary rounded-lg p-6 w-full max-w-md">
|
||
<h2 className="text-xl font-bold text-text-primary mb-4">Create New Deck</h2>
|
||
<form onSubmit={handleCreateDeck}>
|
||
<div className="mb-4">
|
||
<label className="block text-text-secondary text-sm font-medium mb-2">
|
||
Deck Name *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={newDeck.name}
|
||
onChange={(e) => setNewDeck({...newDeck, name: e.target.value})}
|
||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
placeholder="Enter deck name"
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<label className="block text-text-secondary text-sm font-medium mb-2">
|
||
Format
|
||
</label>
|
||
<select
|
||
value={newDeck.format}
|
||
onChange={(e) => setNewDeck({...newDeck, format: e.target.value})}
|
||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
>
|
||
<option value="Commander">Commander</option>
|
||
<option value="Standard">Standard</option>
|
||
<option value="Modern">Modern</option>
|
||
<option value="Legacy">Legacy</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<label className="block text-text-secondary text-sm font-medium mb-2">
|
||
Description
|
||
</label>
|
||
<textarea
|
||
value={newDeck.description}
|
||
onChange={(e) => setNewDeck({...newDeck, description: e.target.value})}
|
||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
rows="3"
|
||
placeholder="Describe your deck strategy..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-6">
|
||
<label className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={newDeck.is_public}
|
||
onChange={(e) => setNewDeck({...newDeck, is_public: e.target.checked})}
|
||
className="mr-2"
|
||
/>
|
||
<span className="text-text-secondary text-sm">Make deck public</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="flex space-x-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowCreateModal(false)}
|
||
className="flex-1 px-4 py-2 border border-border rounded-lg text-text-secondary hover:bg-bg-secondary transition-colors"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="flex-1 bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
Create Deck
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Edit Deck Modal */}
|
||
{editingDeck && (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
|
||
<div className="bg-bg-primary rounded-lg p-6 w-full max-w-md">
|
||
<h2 className="text-xl font-bold text-text-primary mb-4">Edit Deck</h2>
|
||
<form onSubmit={handleEditDeck}>
|
||
<div className="mb-4">
|
||
<label className="block text-text-secondary text-sm font-medium mb-2">
|
||
Deck Name *
|
||
</label>
|
||
<input
|
||
type="text"
|
||
required
|
||
value={editingDeck.name}
|
||
onChange={(e) => setEditingDeck({...editingDeck, name: e.target.value})}
|
||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<label className="block text-text-secondary text-sm font-medium mb-2">
|
||
Format
|
||
</label>
|
||
<select
|
||
value={editingDeck.format}
|
||
onChange={(e) => setEditingDeck({...editingDeck, format: e.target.value})}
|
||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
>
|
||
<option value="Commander">Commander</option>
|
||
<option value="Standard">Standard</option>
|
||
<option value="Modern">Modern</option>
|
||
<option value="Legacy">Legacy</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="mb-4">
|
||
<label className="block text-text-secondary text-sm font-medium mb-2">
|
||
Description
|
||
</label>
|
||
<textarea
|
||
value={editingDeck.description || ''}
|
||
onChange={(e) => setEditingDeck({...editingDeck, description: e.target.value})}
|
||
className="w-full px-3 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-ember bg-bg-secondary text-text-primary"
|
||
rows="3"
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-6">
|
||
<label className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={editingDeck.is_public}
|
||
onChange={(e) => setEditingDeck({...editingDeck, is_public: e.target.checked})}
|
||
className="mr-2"
|
||
/>
|
||
<span className="text-text-secondary text-sm">Make deck public</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="flex space-x-3">
|
||
<button
|
||
type="button"
|
||
onClick={() => setEditingDeck(null)}
|
||
className="flex-1 px-4 py-2 border border-border rounded-lg text-text-secondary hover:bg-bg-secondary transition-colors"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
className="flex-1 bg-accent-ember text-white px-4 py-2 rounded-lg hover:bg-accent-ember-dark transition-colors"
|
||
>
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</Layout>
|
||
);
|
||
}
|