refactor page to use services

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

@@ -3,7 +3,7 @@
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import LeagueHeader from '@/components/leagues/LeagueHeader';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { useServices } from '@/lib/services/ServiceProvider';
 import { LeagueDetailViewModel } from '@/lib/view-models/LeagueDetailViewModel';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -18,16 +18,14 @@ export default function LeagueLayout({
   const router = useRouter();
   const leagueId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
-  
+  const { leagueService } = useServices();
+
   const [leagueDetail, setLeagueDetail] = useState<LeagueDetailViewModel | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function loadLeague() {
       try {
-        const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || '');
-        const leagueService = serviceFactory.createLeagueService();
-
         const leagueDetailData = await leagueService.getLeagueDetail(leagueId, currentDriverId);
 
         setLeagueDetail(leagueDetailData);
@@ -39,7 +37,7 @@ export default function LeagueLayout({
     }
 
     loadLeague();
-  }, [leagueId, currentDriverId]);
+  }, [leagueId, currentDriverId, leagueService]);
 
   if (loading) {
     return (