58 lines
1.8 KiB
TypeScript
58 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useCallback } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
|
|
|
|
// Shared state components
|
|
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
|
|
import { StateContainer } from '@/components/shared/state/StateContainer';
|
|
import { Trophy } from 'lucide-react';
|
|
|
|
export default function LeaguesInteractive() {
|
|
const router = useRouter();
|
|
const { leagueService } = useServices();
|
|
|
|
const { data: realLeagues = [], isLoading: loading, error, retry } = useDataFetching({
|
|
queryKey: ['allLeagues'],
|
|
queryFn: () => leagueService.getAllLeagues(),
|
|
});
|
|
|
|
const handleLeagueClick = (leagueId: string) => {
|
|
router.push(`/leagues/${leagueId}`);
|
|
};
|
|
|
|
const handleCreateLeagueClick = () => {
|
|
router.push('/leagues/create');
|
|
};
|
|
|
|
return (
|
|
<StateContainer
|
|
data={realLeagues}
|
|
isLoading={loading}
|
|
error={error}
|
|
retry={retry}
|
|
config={{
|
|
loading: { variant: 'spinner', message: 'Loading leagues...' },
|
|
error: { variant: 'full-screen' },
|
|
empty: {
|
|
icon: Trophy,
|
|
title: 'No leagues yet',
|
|
description: 'Create your first league to start organizing races and events.',
|
|
action: { label: 'Create League', onClick: handleCreateLeagueClick }
|
|
}
|
|
}}
|
|
>
|
|
{(leaguesData) => (
|
|
<LeaguesTemplate
|
|
leagues={leaguesData}
|
|
loading={false}
|
|
onLeagueClick={handleLeagueClick}
|
|
onCreateLeagueClick={handleCreateLeagueClick}
|
|
/>
|
|
)}
|
|
</StateContainer>
|
|
);
|
|
} |