wip

apps/website/app/drivers/DriversPageClient.tsx

@@ -1,36 +1,50 @@
 'use client';
 
 import React from 'react';
-import { useRouter } from 'next/navigation';
 import { DriversTemplate } from '@/templates/DriversTemplate';
-import { useDriverSearch } from '@/lib/hooks/useDriverSearch';
-import type { DriverLeaderboardViewModel } from '@/lib/view-data/DriverLeaderboardViewModel';
+import type { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
 
 interface DriversPageClientProps {
-  data: DriverLeaderboardViewModel | null;
+  pageDto: DriverLeaderboardViewModel | null;
+  error?: string;
+  empty?: {
+    title: string;
+    description: string;
+  };
 }
 
-export function DriversPageClient({ data }: DriversPageClientProps) {
-  const router = useRouter();
-  const drivers = data?.drivers || [];
-  const { searchQuery, setSearchQuery, filteredDrivers } = useDriverSearch(drivers);
+/**
+ * DriversPageClient
+ *
+ * Client component that:
+ * 1. Passes ViewModel directly to Template
+ *
+ * No business logic, filtering, or sorting here.
+ * All data transformation happens in the PageQuery and ViewModelBuilder.
+ */
+export function DriversPageClient({ pageDto, error, empty }: DriversPageClientProps) {
+  // Handle error/empty states
+  if (error) {
+    return (
+      <div className="max-w-7xl mx-auto px-4 py-12 text-center">
+        <div className="text-red-400 mb-4">Error loading drivers</div>
+        <p className="text-gray-400">Please try again later</p>
+      </div>
+    );
+  }
 
-  const handleDriverClick = (driverId: string) => {
-    router.push(`/drivers/${driverId}`);
-  };
+  if (!pageDto || pageDto.drivers.length === 0) {
+    if (empty) {
+      return (
+        <div className="max-w-7xl mx-auto px-4 py-12 text-center">
+          <h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
+          <p className="text-gray-400">{empty.description}</p>
+        </div>
+      );
+    }
+    return null;
+  }
 
-  const handleViewLeaderboard = () => {
-    router.push('/leaderboards/drivers');
-  };
-
-  return (
-    <DriversTemplate
-      data={data}
-      searchQuery={searchQuery}
-      onSearchChange={setSearchQuery}
-      filteredDrivers={filteredDrivers}
-      onDriverClick={handleDriverClick}
-      onViewLeaderboard={handleViewLeaderboard}
-    />
-  );
-}
+  // Pass ViewModel directly to template
+  return <DriversTemplate data={pageDto} />;
+}

apps/website/app/drivers/[id]/DriverProfilePageClient.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
+import type { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+
+interface DriverProfilePageClientProps {
+  pageDto: DriverProfileViewModel | null;
+  error?: string;
+  empty?: {
+    title: string;
+    description: string;
+  };
+}
+
+/**
+ * DriverProfilePageClient
+ *
+ * Client component that:
+ * 1. Handles UI state (tabs, friend requests)
+ * 2. Passes ViewModel directly to Template
+ *
+ * No business logic or data transformation here.
+ * All data transformation happens in the PageQuery and ViewModelBuilder.
+ */
+export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfilePageClientProps) {
+  const router = useRouter();
+  
+  // UI State (UI-only concerns)
+  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+
+  // Event handlers (UI-only concerns)
+  const handleAddFriend = () => {
+    setFriendRequestSent(true);
+  };
+
+  const handleBackClick = () => {
+    router.push('/drivers');
+  };
+
+  // Handle error/empty states
+  if (error) {
+    return (
+      <div className="max-w-6xl mx-auto px-4 py-12 text-center">
+        <div className="text-red-400 mb-4">Error loading driver profile</div>
+        <p className="text-gray-400">Please try again later</p>
+      </div>
+    );
+  }
+
+  if (!pageDto || !pageDto.currentDriver) {
+    if (empty) {
+      return (
+        <div className="max-w-4xl mx-auto px-4">
+          <div className="text-center py-12">
+            <h2 className="text-xl font-semibold text-white mb-2">{empty.title}</h2>
+            <p className="text-gray-400">{empty.description}</p>
+          </div>
+        </div>
+      );
+    }
+    return null;
+  }
+
+  // Pass ViewModel directly to template
+  return (
+    <DriverProfileTemplate
+      driverProfile={pageDto}
+      allTeamMemberships={pageDto.teamMemberships.map(m => ({
+        team: {
+          id: m.teamId,
+          name: m.teamName,
+        },
+        role: m.role,
+        joinedAt: new Date(m.joinedAt),
+      }))}
+      isLoading={false}
+      error={null}
+      onBackClick={handleBackClick}
+      onAddFriend={handleAddFriend}
+      friendRequestSent={friendRequestSent}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    />
+  );
+}