refactor page to use services

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

@@ -3,18 +3,11 @@
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
 import LeagueHeader from '@/components/leagues/LeagueHeader';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
-import type { League } from '@core/racing/domain/entities/League';
+import { ServiceFactory } from '@/lib/services/ServiceFactory';
+import { LeagueDetailViewModel } from '@/lib/view-models/LeagueDetailViewModel';
 import { useParams, usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
-// Main sponsor info for "by XYZ" display
-interface MainSponsorInfo {
-  name: string;
-  logoUrl: string;
-  websiteUrl: string;
-}
-
 export default function LeagueLayout({
   children,
 }: {
@@ -26,61 +19,18 @@ export default function LeagueLayout({
   const leagueId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
   
-  const [league, setLeague] = useState<League | null>(null);
-  const [ownerName, setOwnerName] = useState<string>('');
-  const [mainSponsor, setMainSponsor] = useState<MainSponsorInfo | null>(null);
-  const [isAdmin, setIsAdmin] = useState(false);
+  const [leagueDetail, setLeagueDetail] = useState<LeagueDetailViewModel | null>(null);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     async function loadLeague() {
       try {
-        const leagueRepo = getLeagueRepository();
-        const driverRepo = getDriverRepository();
-        const membershipRepo = getLeagueMembershipRepository();
-        const seasonRepo = getSeasonRepository();
-        const sponsorRepo = getSponsorRepository();
-        const sponsorshipRepo = getSeasonSponsorshipRepository();
-        
-        const leagueData = await leagueRepo.findById(leagueId);
-        
-        if (!leagueData) {
-          setLoading(false);
-          return;
-        }
+        const serviceFactory = new ServiceFactory(process.env.NEXT_PUBLIC_API_BASE_URL || '');
+        const leagueService = serviceFactory.createLeagueService();
 
-        setLeague(leagueData);
+        const leagueDetailData = await leagueService.getLeagueDetail(leagueId, currentDriverId);
 
-        const owner = await driverRepo.findById(leagueData.ownerId);
-        setOwnerName(owner ? owner.name : `${leagueData.ownerId.slice(0, 8)}...`);
-
-        // Check if current user is admin
-        const membership = await membershipRepo.getMembership(leagueId, currentDriverId);
-        setIsAdmin(membership ? isLeagueAdminOrHigherRole(membership.role) : false);
-
-        // Load main sponsor for "by XYZ" display
-        try {
-          const seasons = await seasonRepo.findByLeagueId(leagueId);
-          const activeSeason = seasons.find((s: { status: string }) => s.status === 'active') ?? seasons[0];
-          
-          if (activeSeason) {
-            const sponsorships = await sponsorshipRepo.findBySeasonId(activeSeason.id);
-            const mainSponsorship = sponsorships.find(s => s.tier === 'main' && s.status === 'active');
-            
-            if (mainSponsorship) {
-              const sponsor = await sponsorRepo.findById(mainSponsorship.sponsorId);
-              if (sponsor) {
-                setMainSponsor({
-                  name: sponsor.name,
-                  logoUrl: sponsor.logoUrl ?? '',
-                  websiteUrl: sponsor.websiteUrl ?? '',
-                });
-              }
-            }
-          }
-        } catch (sponsorError) {
-          console.warn('Failed to load main sponsor:', sponsorError);
-        }
+        setLeagueDetail(leagueDetailData);
       } catch (error) {
         console.error('Failed to load league:', error);
       } finally {
@@ -101,7 +51,7 @@ export default function LeagueLayout({
     );
   }
 
-  if (!league) {
+  if (!leagueDetail) {
     return (
       <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
         <div className="max-w-6xl mx-auto">
@@ -126,12 +76,8 @@ export default function LeagueLayout({
     { label: 'Settings', href: `/leagues/${leagueId}/settings`, exact: false },
   ];
 
-  const tabs = isAdmin ? [...baseTabs, ...adminTabs] : baseTabs;
+  const tabs = leagueDetail.isAdmin ? [...baseTabs, ...adminTabs] : baseTabs;
 
-  // Determine active tab
-  const activeTab = tabs.find(tab =>
-    tab.exact ? pathname === tab.href : pathname.startsWith(tab.href)
-  );
 
   return (
     <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
@@ -140,17 +86,17 @@ export default function LeagueLayout({
           items={[
             { label: 'Home', href: '/' },
             { label: 'Leagues', href: '/leagues' },
-            { label: league.name },
+            { label: leagueDetail.name },
           ]}
         />
 
         <LeagueHeader
-          leagueId={league.id}
-          leagueName={league.name}
-          description={league.description}
-          ownerId={league.ownerId}
-          ownerName={ownerName}
-          mainSponsor={mainSponsor}
+          leagueId={leagueDetail.id}
+          leagueName={leagueDetail.name}
+          description={leagueDetail.description}
+          ownerId={leagueDetail.ownerId}
+          ownerName={leagueDetail.ownerName}
+          mainSponsor={leagueDetail.mainSponsor}
         />
 
         {/* Tab Navigation */}