di usage in website

apps/website/app/leagues/[id]/layout.tsx

@@ -3,10 +3,9 @@
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import LeagueHeader from '@/components/leagues/LeagueHeader';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { LeaguePageDetailViewModel } from '@/lib/view-models/LeaguePageDetailViewModel';
+import { useLeagueDetail } from '@/hooks/league/useLeagueDetail';
 import { useParams, usePathname, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 
 export default function LeagueLayout({
   children,
@@ -18,26 +17,8 @@ export default function LeagueLayout({
   const router = useRouter();
   const leagueId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
-  const { leagueService } = useServices();
 
-  const [leagueDetail, setLeagueDetail] = useState<LeaguePageDetailViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function loadLeague() {
-      try {
-        const leagueDetailData = await leagueService.getLeagueDetail(leagueId, currentDriverId);
-
-        setLeagueDetail(leagueDetailData);
-      } catch (error) {
-        console.error('Failed to load league:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadLeague();
-  }, [leagueId, currentDriverId, leagueService]);
+  const { data: leagueDetail, isLoading: loading } = useLeagueDetail(leagueId, currentDriverId);
 
   if (loading) {
     return (