website refactor

apps/website/app/leaderboards/drivers/page.tsx

@@ -1,50 +1,51 @@
-import { PageWrapper } from '@/components/shared/state/PageWrapper';
-import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
-import { DRIVER_SERVICE_TOKEN } from '@/lib/di/tokens';
-import { DriverService } from '@/lib/services/drivers/DriverService';
-import { Users } from 'lucide-react';
 import { redirect } from 'next/navigation';
-import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
-import { DriverRankingsPageWrapper } from './DriverRankingsPageWrapper';
+import { DriverRankingsPageQuery } from '@/lib/page-queries/page-queries/DriverRankingsPageQuery';
+import { DriverRankingsViewDataBuilder } from '@/lib/builders/view-data/DriverRankingsViewDataBuilder';
+import { DriverRankingsTemplate } from '@/templates/DriverRankingsTemplate';
 
 // ============================================================================
 // MAIN PAGE COMPONENT
 // ============================================================================
 
 export default async function DriverLeaderboardPage() {
-  // Fetch data using PageDataFetcher
-  const driverData = await PageDataFetcher.fetch<DriverService, 'getDriverLeaderboard'>(
-    DRIVER_SERVICE_TOKEN,
-    'getDriverLeaderboard'
-  );
+  // Execute the page query
+  const result = await DriverRankingsPageQuery.execute();
 
-  // Prepare data for template
-  const data: DriverLeaderboardViewModel | null = driverData;
+  // Handle different result statuses
+  switch (result.status) {
+    case 'notFound':
+      redirect('/404');
+    case 'redirect':
+      redirect(result.to);
+    case 'error':
+      // For now, show empty state. In a real app, you'd pass error to client
+      return (
+        <div className="max-w-7xl mx-auto px-4 py-12 text-center">
+          <div className="text-red-400 mb-4">Error loading driver rankings</div>
+          <p className="text-gray-400">Please try again later</p>
+        </div>
+      );
+    case 'ok':
+      const viewData = DriverRankingsViewDataBuilder.build(result.dto);
+      const hasData = (viewData.drivers?.length ?? 0) > 0;
+      
+      if (!hasData) {
+        return (
+          <DriverRankingsTemplate
+            viewData={{
+              drivers: [],
+              podium: [],
+              searchQuery: '',
+              selectedSkill: 'all',
+              sortBy: 'rank',
+              showFilters: false,
+            }}
+          />
+        );
+      }
 
-  const hasData = (driverData?.drivers?.length ?? 0) > 0;
-
-  // Handle loading state (should be fast since we're using async/await)
-  const isLoading = false;
-  const error = null;
-  const retry = async () => {
-    // In server components, we can't retry without a reload
-    redirect('/leaderboards/drivers');
-  };
-
-  return (
-    <PageWrapper
-      data={hasData ? data : null}
-      isLoading={isLoading}
-      error={error}
-      retry={retry}
-      Template={DriverRankingsPageWrapper}
-      loading={{ variant: 'full-screen', message: 'Loading driver rankings...' }}
-      errorConfig={{ variant: 'full-screen' }}
-      empty={{
-        icon: Users,
-        title: 'No drivers found',
-        description: 'There are no drivers in the system yet.',
-      }}
-    />
-  );
+      return (
+        <DriverRankingsTemplate viewData={viewData} />
+      );
+  }
 }