refactor(decks): useDecksPage + DecksPageView (Brief 3) #145
3 changed files with 234 additions and 199 deletions
84
components/DecksPageView.js
Normal file
84
components/DecksPageView.js
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
import DecksCreateModal from './DecksCreateModal';
|
||||
import DecksEditModal from './DecksEditModal';
|
||||
import DecksGrid from './DecksGrid';
|
||||
import { Button } from './ui';
|
||||
|
||||
export default function DecksPageView({
|
||||
decks,
|
||||
editingDeck,
|
||||
handleCreateDeck,
|
||||
handleDeleteDeck,
|
||||
handleEditDeck,
|
||||
newDeck,
|
||||
setEditingDeck,
|
||||
setNewDeck,
|
||||
setShowCreateModal,
|
||||
showCreateModal,
|
||||
}) {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
My Decks
|
||||
</h1>
|
||||
<p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
|
||||
Build and manage your MTG decks
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
|
||||
Create New Deck
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.length}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Total Decks</div>
|
||||
</div>
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.filter((d) => d.format === 'Commander').length}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Commander</div>
|
||||
</div>
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.filter((d) => d.is_public).length}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Public</div>
|
||||
</div>
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DecksGrid
|
||||
decks={decks}
|
||||
onEditDeck={setEditingDeck}
|
||||
onDeleteDeck={handleDeleteDeck}
|
||||
onCreateDeck={() => setShowCreateModal(true)}
|
||||
/>
|
||||
|
||||
<DecksCreateModal
|
||||
isOpen={showCreateModal}
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
newDeck={newDeck}
|
||||
setNewDeck={setNewDeck}
|
||||
onCreate={handleCreateDeck}
|
||||
/>
|
||||
|
||||
<DecksEditModal
|
||||
editingDeck={editingDeck}
|
||||
setEditingDeck={setEditingDeck}
|
||||
onClose={() => setEditingDeck(null)}
|
||||
onEdit={handleEditDeck}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
143
lib/use-decks-page.js
Normal file
143
lib/use-decks-page.js
Normal file
|
|
@ -0,0 +1,143 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
|
||||
const EMPTY_NEW_DECK = {
|
||||
name: '',
|
||||
description: '',
|
||||
format: 'Commander',
|
||||
is_public: false,
|
||||
};
|
||||
|
||||
/**
|
||||
* Decks list page state and handlers (god-component split).
|
||||
*/
|
||||
export function useDecksPage({ user = null, authLoading = true } = {}) {
|
||||
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(EMPTY_NEW_DECK);
|
||||
|
||||
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(EMPTY_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 showLoggedOut = !authLoading && !user;
|
||||
const showInitialLoading = Boolean(user) && loading;
|
||||
|
||||
return {
|
||||
authLoading,
|
||||
decks,
|
||||
editingDeck,
|
||||
handleCreateDeck,
|
||||
handleDeleteDeck,
|
||||
handleEditDeck,
|
||||
newDeck,
|
||||
setEditingDeck,
|
||||
setNewDeck,
|
||||
setShowCreateModal,
|
||||
showCreateModal,
|
||||
showInitialLoading,
|
||||
showLoggedOut,
|
||||
user,
|
||||
};
|
||||
}
|
||||
206
pages/decks.js
206
pages/decks.js
|
|
@ -1,141 +1,14 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/router';
|
||||
import Link from 'next/link';
|
||||
import Layout from '../components/Layout';
|
||||
import DecksCreateModal from '../components/DecksCreateModal';
|
||||
import DecksEditModal from '../components/DecksEditModal';
|
||||
import DecksGrid from '../components/DecksGrid';
|
||||
import { Button } from '../components/ui';
|
||||
import DecksPageView from '../components/DecksPageView';
|
||||
import { useAuth } from '../lib/use-auth';
|
||||
|
||||
/* 2026-06-04 design-sweep pass: the Tailwind token classes that this
|
||||
page relied on (bg-bg-secondary, text-text-primary, border-border,
|
||||
bg-accent-ember, hover:bg-accent-ember-dark, focus:ring-accent-ember)
|
||||
are NOT defined in tailwind.config.js — they produced zero CSS,
|
||||
leaving the page visually unstyled (transparent backgrounds, no
|
||||
borders, no hover states). Sweep replaces those with inline
|
||||
style={{ ... CSS vars ... }} and the Button / SearchBar primitives
|
||||
so the page actually renders with the Liquid Glass + corner-border
|
||||
design system. `rounded-lg` → `rounded-xl` across the board to match
|
||||
the system standard. */
|
||||
import { useDecksPage } from '../lib/use-decks-page.js';
|
||||
|
||||
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 { user, loading: authLoading } = useAuth();
|
||||
const decksPage = useDecksPage({ user, authLoading });
|
||||
|
||||
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 });
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
if (!user) {
|
||||
if (decksPage.showLoggedOut || !user) {
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
|
|
@ -152,7 +25,7 @@ export default function Decks() {
|
|||
);
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
if (decksPage.showInitialLoading) {
|
||||
return (
|
||||
<Layout user={user}>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
|
|
@ -167,72 +40,7 @@ export default function Decks() {
|
|||
|
||||
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" style={{ color: 'var(--text-primary)' }}>
|
||||
My Decks
|
||||
</h1>
|
||||
<p className="mt-2" style={{ color: 'var(--text-secondary)' }}>
|
||||
Build and manage your MTG decks
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="primary" onClick={() => setShowCreateModal(true)}>
|
||||
Create New Deck
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.length}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Total Decks</div>
|
||||
</div>
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.filter((d) => d.format === 'Commander').length}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Commander</div>
|
||||
</div>
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.filter((d) => d.is_public).length}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Public</div>
|
||||
</div>
|
||||
<div className="glass-panel rounded-2xl p-6">
|
||||
<div className="text-2xl font-bold" style={{ color: 'var(--text-primary)' }}>
|
||||
{decks.reduce((sum, deck) => sum + (deck.card_count || 0), 0)}
|
||||
</div>
|
||||
<div style={{ color: 'var(--text-secondary)' }}>Total Cards</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DecksGrid
|
||||
decks={decks}
|
||||
onEditDeck={setEditingDeck}
|
||||
onDeleteDeck={handleDeleteDeck}
|
||||
onCreateDeck={() => setShowCreateModal(true)}
|
||||
/>
|
||||
|
||||
<DecksCreateModal
|
||||
isOpen={showCreateModal}
|
||||
onClose={() => setShowCreateModal(false)}
|
||||
newDeck={newDeck}
|
||||
setNewDeck={setNewDeck}
|
||||
onCreate={handleCreateDeck}
|
||||
/>
|
||||
|
||||
<DecksEditModal
|
||||
editingDeck={editingDeck}
|
||||
setEditingDeck={setEditingDeck}
|
||||
onClose={() => setEditingDeck(null)}
|
||||
onEdit={handleEditDeck}
|
||||
/>
|
||||
</div>
|
||||
<DecksPageView {...decksPage} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue