page wrapper

apps/website/app/leagues/[id]/sponsorships/page.tsx

@@ -1,83 +1,20 @@
 'use client';
 
 import { LeagueSponsorshipsSection } from '@/components/leagues/LeagueSponsorshipsSection';
-import Card from '@/components/ui/Card';
+import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
-import { useInject } from '@/lib/di/hooks/useInject';
-import { LEAGUE_SERVICE_TOKEN, LEAGUE_MEMBERSHIP_SERVICE_TOKEN } from '@/lib/di/tokens';
-import { LeaguePageDetailViewModel } from '@/lib/view-models/LeaguePageDetailViewModel';
-import { AlertTriangle, Building } from 'lucide-react';
+import { useLeagueSponsorshipsPageData } from '@/hooks/league/useLeagueSponsorshipsPageData';
+import { ApiError } from '@/lib/api/base/ApiError';
+import { Building } from 'lucide-react';
 import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
 
-export default function LeagueSponsorshipsPage() {
-  const params = useParams();
-  const leagueId = params.id as string;
-  const currentDriverId = useEffectiveDriverId();
-  const leagueService = useInject(LEAGUE_SERVICE_TOKEN);
-  const leagueMembershipService = useInject(LEAGUE_MEMBERSHIP_SERVICE_TOKEN);
-
-  const [league, setLeague] = useState<LeaguePageDetailViewModel | null>(null);
-  const [isAdmin, setIsAdmin] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function loadData() {
-      try {
-        const [leagueDetail] = await Promise.all([
-          leagueService.getLeagueDetail(leagueId, currentDriverId),
-          leagueMembershipService.fetchLeagueMemberships(leagueId),
-        ]);
-
-        const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
-
-        setLeague(leagueDetail);
-        setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
-      } catch (err) {
-        console.error('Failed to load league:', err);
-      } finally {
-        setLoading(false);
-      }
-    }
-
-    loadData();
-  }, [leagueId, currentDriverId, leagueService, leagueMembershipService]);
-
-  if (loading) {
-    return (
-      <Card>
-        <div className="py-6 text-sm text-gray-400 text-center">Loading sponsorships...</div>
-      </Card>
-    );
-  }
-
-  if (!isAdmin) {
-    return (
-      <Card>
-        <div className="text-center py-12">
-          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-iron-gray/50 flex items-center justify-center">
-            <AlertTriangle className="w-8 h-8 text-warning-amber" />
-          </div>
-          <h3 className="text-lg font-medium text-white mb-2">Admin Access Required</h3>
-          <p className="text-sm text-gray-400">
-            Only league admins can manage sponsorships.
-          </p>
-        </div>
-      </Card>
-    );
-  }
-
-  if (!league) {
-    return (
-      <Card>
-        <div className="py-6 text-sm text-gray-500 text-center">
-          League not found.
-        </div>
-      </Card>
-    );
-  }
+interface SponsorshipsData {
+  league: any;
+  isAdmin: boolean;
+}
 
+function SponsorshipsTemplate({ data }: { data: SponsorshipsData }) {
   return (
     <div className="space-y-6">
       {/* Header */}
@@ -92,12 +29,51 @@ export default function LeagueSponsorshipsPage() {
       </div>
 
       {/* Sponsorships Section */}
-      <Card>
-        <LeagueSponsorshipsSection
-          leagueId={leagueId}
-          readOnly={false}
-        />
-      </Card>
+      <LeagueSponsorshipsSection
+        leagueId={data.league.id}
+        readOnly={false}
+      />
     </div>
   );
+}
+
+export default function LeagueSponsorshipsPage() {
+  const params = useParams();
+  const leagueId = params.id as string;
+  const currentDriverId = useEffectiveDriverId() || '';
+
+  // Fetch data using domain hook
+  const { data, isLoading, error, refetch } = useLeagueSponsorshipsPageData(leagueId, currentDriverId);
+
+  // Transform data for the template
+  const transformedData: SponsorshipsData | undefined = data?.league && data.membership !== null
+    ? {
+        league: data.league,
+        isAdmin: LeagueRoleUtility.isLeagueAdminOrHigherRole(data.membership?.role || 'member'),
+      }
+    : undefined;
+
+  // Check if user is not admin to show appropriate state
+  const isNotAdmin = transformedData && !transformedData.isAdmin;
+
+  return (
+    <StatefulPageWrapper
+      data={transformedData}
+      isLoading={isLoading}
+      error={error as ApiError | null}
+      retry={refetch}
+      Template={SponsorshipsTemplate}
+      loading={{ variant: 'skeleton', message: 'Loading sponsorships...' }}
+      errorConfig={{ variant: 'full-screen' }}
+      empty={isNotAdmin ? {
+        icon: Building,
+        title: 'Admin Access Required',
+        description: 'Only league admins can manage sponsorships.',
+      } : {
+        icon: Building,
+        title: 'League not found',
+        description: 'The league may have been deleted or is no longer accessible.',
+      }}
+    />
+  );
 }