di usage in website

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

@@ -1,14 +1,13 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useParams, useSearchParams } from 'next/navigation';
 import { motion, useReducedMotion } from 'framer-motion';
 import Link from 'next/link';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import { siteConfig } from '@/lib/siteConfig';
-import { LeagueDetailViewModel } from '@/lib/view-models/LeagueDetailViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useSponsorLeagueDetail } from '@/hooks/sponsor/useSponsorLeagueDetail';
 import {
   Trophy,
   Users,
@@ -39,36 +38,14 @@ export default function SponsorLeagueDetailPage() {
   const searchParams = useSearchParams();
   const shouldReduceMotion = useReducedMotion();
 
-  const { sponsorService } = useServices();
-
+  const leagueId = params.id as string;
   const showSponsorAction = searchParams.get('action') === 'sponsor';
   const [activeTab, setActiveTab] = useState<TabType>(showSponsorAction ? 'sponsor' : 'overview');
   const [selectedTier, setSelectedTier] = useState<'main' | 'secondary'>('main');
-  const [data, setData] = useState<LeagueDetailViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
 
-  const leagueId = params.id as string;
+  const { data: leagueData, isLoading, error, retry } = useSponsorLeagueDetail(leagueId);
 
-  useEffect(() => {
-    const loadLeagueDetail = async () => {
-      try {
-        const leagueData = await sponsorService.getLeagueDetail(leagueId);
-        setData(new LeagueDetailViewModel(leagueData));
-      } catch (err) {
-        console.error('Error loading league detail:', err);
-        setError('Failed to load league detail');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    if (leagueId) {
-      loadLeagueDetail();
-    }
-  }, [leagueId, sponsorService]);
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
         <div className="text-center">
@@ -79,16 +56,22 @@ export default function SponsorLeagueDetailPage() {
     );
   }
 
-  if (error || !data) {
+  if (error || !leagueData) {
     return (
       <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
         <div className="text-center">
-          <p className="text-gray-400">{error || 'No league data available'}</p>
+          <p className="text-gray-400">{error?.getUserMessage() || 'No league data available'}</p>
+          {error && (
+            <Button variant="secondary" onClick={retry} className="mt-4">
+              Retry
+            </Button>
+          )}
         </div>
       </div>
     );
   }
 
+  const data = leagueData;
   const league = data.league;
   const config = league.tierConfig;