* Extract useCollectionView hook and CollectionPageView (Brief 3). Completes collection detail god-component split with a thin page composer. Co-authored-by: Cursor <cursoragent@cursor.com> * Pass user/authLoading into useCollectionView; drop stray id from return Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
45 lines
1.5 KiB
JavaScript
45 lines
1.5 KiB
JavaScript
import Link from 'next/link';
|
|
import Layout from '../../components/Layout';
|
|
import CollectionPageView from '../../components/CollectionPageView';
|
|
import { useAuth } from '../../lib/use-auth';
|
|
import { useCollectionView } from '../../lib/use-collection-view.js';
|
|
|
|
export default function CollectionView() {
|
|
const { user, loading: authLoading } = useAuth();
|
|
const collectionPage = useCollectionView({ user, authLoading });
|
|
|
|
if (collectionPage.showInitialLoading) {
|
|
return (
|
|
<Layout user={user}>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2" style={{ borderColor: 'var(--accent-ember)' }} />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (!collectionPage.collection) {
|
|
return (
|
|
<Layout user={user}>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<h2 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
List not found
|
|
</h2>
|
|
<Link href="/collections">
|
|
<button type="button" className="px-4 py-2 rounded-lg text-white" style={{ backgroundColor: 'var(--accent-ember)' }}>
|
|
Back to Lists
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout user={user}>
|
|
<CollectionPageView {...collectionPage} user={user} />
|
|
</Layout>
|
|
);
|
|
}
|