di usage in website

apps/website/app/sponsor/campaigns/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import Link from 'next/link';
@@ -8,13 +8,12 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import StatusBadge from '@/components/ui/StatusBadge';
 import InfoBanner from '@/components/ui/InfoBanner';
-import { useServices } from '@/lib/services/ServiceProvider';
-import { SponsorSponsorshipsViewModel } from '@/lib/view-models/SponsorSponsorshipsViewModel';
-import { 
-  Megaphone, 
-  Trophy, 
-  Users, 
-  Eye, 
+import { useSponsorSponsorships } from '@/hooks/sponsor/useSponsorSponsorships';
+import {
+  Megaphone,
+  Trophy,
+  Users,
+  Eye,
   Calendar,
   ExternalLink,
   Plus,
@@ -364,37 +363,15 @@ export default function SponsorCampaignsPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const shouldReduceMotion = useReducedMotion();
-  const { sponsorService } = useServices();
 
   const initialType = (searchParams.get('type') as SponsorshipType) || 'all';
   const [typeFilter, setTypeFilter] = useState<SponsorshipType>(initialType);
   const [statusFilter, setStatusFilter] = useState<SponsorshipStatus>('all');
   const [searchQuery, setSearchQuery] = useState('');
-  const [data, setData] = useState<SponsorSponsorshipsViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    const loadSponsorships = async () => {
-      try {
-        const sponsorshipsData = await sponsorService.getSponsorSponsorships('demo-sponsor-1');
-        if (sponsorshipsData) {
-          setData(sponsorshipsData);
-        } else {
-          setError('Failed to load sponsorships data');
-        }
-      } catch (err) {
-        console.error('Error loading sponsorships:', err);
-        setError('Failed to load sponsorships data');
-      } finally {
-        setLoading(false);
-      }
-    };
+  const { data: sponsorshipsData, isLoading, error, retry } = useSponsorSponsorships('demo-sponsor-1');
 
-    loadSponsorships();
-  }, []);
-
-  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">
@@ -405,16 +382,23 @@ export default function SponsorCampaignsPage() {
     );
   }
 
-  if (error || !data) {
+  if (error || !sponsorshipsData) {
     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 sponsorships data available'}</p>
+          <p className="text-gray-400">{error?.getUserMessage() || 'No sponsorships data available'}</p>
+          {error && (
+            <Button variant="secondary" onClick={retry} className="mt-4">
+              Retry
+            </Button>
+          )}
         </div>
       </div>
     );
   }
 
+  const data = sponsorshipsData;
+
   // Filter sponsorships
   const filteredSponsorships = data.sponsorships.filter(s => {
     if (typeFilter !== 'all' && s.type !== typeFilter) return false;
@@ -443,17 +427,6 @@ export default function SponsorCampaignsPage() {
     platform: data.sponsorships.filter(s => s.type === 'platform').length,
   };
 
-  if (loading) {
-    return (
-      <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[400px]">
-        <div className="text-center">
-          <div className="w-8 h-8 border-2 border-primary-blue border-t-transparent rounded-full animate-spin mx-auto mb-4" />
-          <p className="text-gray-400">Loading sponsorships...</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="max-w-7xl mx-auto py-8 px-4">
       {/* Header */}