website refactor

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

@@ -2,7 +2,6 @@
 
 export const dynamic = 'force-dynamic';
 
-import { useQuery } from '@tanstack/react-query';
 import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
@@ -37,48 +36,15 @@ import {
   RefreshCw
 } from 'lucide-react';
 import Link from 'next/link';
-import { useInject } from '@/lib/di/hooks/useInject';
-import { SPONSOR_SERVICE_TOKEN, POLICY_SERVICE_TOKEN } from '@/lib/di/tokens';
-import { enhanceQueryResult } from '@/lib/di/hooks/useReactQueryWithApiError';
+import { useSponsorDashboard } from '@/lib/hooks/sponsor/useSponsorDashboard';
 
 export default function SponsorDashboardPage() {
   const shouldReduceMotion = useReducedMotion();
-  const sponsorService = useInject(SPONSOR_SERVICE_TOKEN);
-  const policyService = useInject(POLICY_SERVICE_TOKEN);
+  
+  // Use the hook instead of manual query construction
+  const { data: dashboardData, isLoading, error, retry } = useSponsorDashboard('demo-sponsor-1');
 
-  const policyQuery = useQuery({
-    queryKey: ['policySnapshot'],
-    queryFn: () => policyService.getSnapshot(),
-    staleTime: 60_000,
-    gcTime: 5 * 60_000,
-  });
-
-  const enhancedPolicyQuery = enhanceQueryResult(policyQuery);
-  const policySnapshot = enhancedPolicyQuery.data;
-  const policyLoading = enhancedPolicyQuery.isLoading;
-  const policyError = enhancedPolicyQuery.error;
-
-  const sponsorPortalState = policySnapshot
-    ? policyService.getCapabilityState(policySnapshot, 'sponsors.portal')
-    : null;
-
-  const dashboardQuery = useQuery({
-    queryKey: ['sponsorDashboard', 'demo-sponsor-1', sponsorPortalState],
-    queryFn: () => sponsorService.getSponsorDashboard('demo-sponsor-1'),
-    enabled: !!policySnapshot && sponsorPortalState === 'enabled',
-    staleTime: 300_000,
-    gcTime: 10 * 60_000,
-  });
-
-  const enhancedDashboardQuery = enhanceQueryResult(dashboardQuery);
-  const dashboardData = enhancedDashboardQuery.data;
-  const dashboardLoading = enhancedDashboardQuery.isLoading;
-  const dashboardError = enhancedDashboardQuery.error;
-
-  const loading = policyLoading || dashboardLoading;
-  const error = policyError || dashboardError || (sponsorPortalState !== 'enabled' && sponsorPortalState !== null);
-
-  if (loading) {
+  if (isLoading) {
     return (
       <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
         <div className="text-center">
@@ -90,16 +56,15 @@ export default function SponsorDashboardPage() {
   }
 
   if (error || !dashboardData) {
-    const errorMessage = sponsorPortalState === 'coming_soon'
-      ? 'Sponsor portal is coming soon.'
-      : sponsorPortalState === 'disabled'
-      ? 'Sponsor portal is currently unavailable.'
-      : 'Failed to load dashboard data';
-
     return (
       <div className="max-w-7xl mx-auto py-8 px-4 flex items-center justify-center min-h-[600px]">
         <div className="text-center">
-          <p className="text-gray-400">{errorMessage}</p>
+          <p className="text-gray-400">{error?.getUserMessage() || 'Failed to load dashboard data'}</p>
+          {error && (
+            <Button variant="secondary" onClick={retry} className="mt-4">
+              Retry
+            </Button>
+          )}
         </div>
       </div>
     );