120 lines
3.9 KiB
TypeScript
120 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import LeagueCard from '@/components/alpha/LeagueCard';
|
|
import CreateLeagueForm from '@/components/alpha/CreateLeagueForm';
|
|
import Button from '@/components/ui/Button';
|
|
import Card from '@/components/ui/Card';
|
|
import { League } from '@/domain/entities/League';
|
|
import { getLeagueRepository } from '@/lib/di-container';
|
|
|
|
export default function LeaguesPage() {
|
|
const router = useRouter();
|
|
const [leagues, setLeagues] = useState<League[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|
|
|
useEffect(() => {
|
|
loadLeagues();
|
|
}, []);
|
|
|
|
const loadLeagues = async () => {
|
|
try {
|
|
const leagueRepo = getLeagueRepository();
|
|
const allLeagues = await leagueRepo.findAll();
|
|
setLeagues(allLeagues);
|
|
} catch (error) {
|
|
console.error('Failed to load leagues:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleLeagueClick = (leagueId: string) => {
|
|
router.push(`/leagues/${leagueId}`);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="text-center text-gray-400">Loading leagues...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-6xl mx-auto">
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-white mb-2">Leagues</h1>
|
|
<p className="text-gray-400">
|
|
{leagues.length === 0
|
|
? 'Create your first league to get started'
|
|
: `${leagues.length} ${leagues.length === 1 ? 'league' : 'leagues'} available`}
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setShowCreateForm(!showCreateForm)}
|
|
>
|
|
{showCreateForm ? 'Cancel' : 'Create League'}
|
|
</Button>
|
|
</div>
|
|
|
|
{showCreateForm && (
|
|
<Card className="mb-8 max-w-2xl mx-auto">
|
|
<div className="mb-6">
|
|
<h2 className="text-xl font-semibold text-white mb-2">Create New League</h2>
|
|
<p className="text-gray-400 text-sm">
|
|
Experiment with different point systems
|
|
</p>
|
|
</div>
|
|
<CreateLeagueForm />
|
|
</Card>
|
|
)}
|
|
|
|
{leagues.length === 0 ? (
|
|
<Card className="text-center py-12">
|
|
<div className="text-gray-400">
|
|
<svg
|
|
className="mx-auto h-12 w-12 text-gray-600 mb-4"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
|
|
/>
|
|
</svg>
|
|
<h3 className="text-lg font-medium text-white mb-2">No leagues yet</h3>
|
|
<p className="text-sm mb-4">
|
|
Create one to get started. Alpha data resets on page reload.
|
|
</p>
|
|
<Button
|
|
variant="primary"
|
|
onClick={() => setShowCreateForm(true)}
|
|
>
|
|
Create Your First League
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{leagues.map((league) => (
|
|
<LeagueCard
|
|
key={league.id}
|
|
league={league}
|
|
onClick={() => handleLeagueClick(league.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |