website refactor

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

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
+import { DriverProfileViewModelBuilder } from '@/lib/builders/view-models/DriverProfileViewModelBuilder';
+import type { GetDriverProfileOutputDTO } from '@/lib/types/generated/GetDriverProfileOutputDTO';
+
+interface DriverProfilePageClientProps {
+  pageDto: GetDriverProfileOutputDTO | null;
+  error?: string;
+  empty?: {
+    title: string;
+    description: string;
+  };
+}
+
+/**
+ * DriverProfilePageClient
+ *
+ * Client component that:
+ * 1. Handles UI state (tabs, friend requests)
+ * 2. Uses ViewModelBuilder to transform DTO
+ * 3. Passes ViewModel to Template
+ */
+export function DriverProfilePageClient({ pageDto, error, empty }: DriverProfilePageClientProps) {
+  const router = useRouter();
+  
+  // UI State
+  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
+  const [friendRequestSent, setFriendRequestSent] = useState(false);
+
+  // Event handlers
+  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;
+  }
+
+  // Transform DTO to ViewModel using Builder
+  const viewModel = DriverProfileViewModelBuilder.build(pageDto);
+
+  // Transform teamMemberships for template
+  const allTeamMemberships = pageDto.teamMemberships.map(membership => ({
+    team: {
+      id: membership.teamId,
+      name: membership.teamName,
+    },
+    role: membership.role,
+    joinedAt: new Date(membership.joinedAt),
+  }));
+
+  return (
+    <DriverProfileTemplate
+      driverProfile={viewModel}
+      allTeamMemberships={allTeamMemberships}
+      isLoading={false}
+      error={null}
+      onBackClick={handleBackClick}
+      onAddFriend={handleAddFriend}
+      friendRequestSent={friendRequestSent}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+    />
+  );
+}

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

@@ -1,81 +1,45 @@
-'use client';
+import { redirect } from 'next/navigation';
+import { DriverProfilePageQuery } from '@/lib/page-queries/page-queries/DriverProfilePageQuery';
+import { DriverProfilePageClient } from './DriverProfilePageClient';
 
-import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
-import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
-import { useDriverProfilePageData } from "@/lib/hooks/driver/useDriverProfilePageData";
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
+export default async function DriverProfilePage({ params }: { params: { id: string } }) {
+  // Execute the page query
+  const result = await DriverProfilePageQuery.execute(params.id);
 
-interface DriverProfileData {
-  driverProfile: any;
-  teamMemberships: Array<{
-    team: { id: string; name: string };
-    role: string;
-    joinedAt: Date;
-  }>;
-}
-
-export default function DriverProfilePage() {
-  const router = useRouter();
-  const params = useParams();
-  const driverId = params.id as string;
-  const currentDriverId = useEffectiveDriverId() || '';
-  
-  // UI State
-  const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
-  const [friendRequestSent, setFriendRequestSent] = useState(false);
-  
-  // Fetch data using domain hook
-  const { data: queries, isLoading, error, refetch } = useDriverProfilePageData(driverId);
-  
-  // Transform data for template
-  const data: DriverProfileData | undefined = queries?.driverProfile && queries?.teamMemberships
-    ? {
-        driverProfile: queries.driverProfile,
-        teamMemberships: queries.teamMemberships,
-      }
-    : undefined;
-  
-  // Actions
-  const handleAddFriend = () => {
-    setFriendRequestSent(true);
-  };
-
-  const handleBackClick = () => {
-    router.push('/drivers');
-  };
-
-  return (
-    <StatefulPageWrapper
-      data={data}
-      isLoading={isLoading}
-      error={error as Error | null}
-      retry={refetch}
-      Template={({ data }) => {
-        if (!data) return null;
+  // Handle different result statuses
+  switch (result.status) {
+    case 'notFound':
+      redirect('/404');
+    case 'redirect':
+      redirect(result.to);
+    case 'error':
+      // Pass error to client component
+      return (
+        <DriverProfilePageClient
+          pageDto={null}
+          error={result.errorId}
+        />
+      );
+    case 'ok':
+      const pageDto = result.dto;
+      const hasData = !!pageDto.currentDriver;
+      
+      if (!hasData) {
         return (
-          <DriverProfileTemplate
-            driverProfile={data.driverProfile}
-            allTeamMemberships={data.teamMemberships}
-            isLoading={false}
-            error={null}
-            onBackClick={handleBackClick}
-            onAddFriend={handleAddFriend}
-            friendRequestSent={friendRequestSent}
-            activeTab={activeTab}
-            setActiveTab={setActiveTab}
+          <DriverProfilePageClient
+            pageDto={null}
+            empty={{
+              title: 'Driver not found',
+              description: 'The driver profile may not exist or you may not have access',
+            }}
           />
         );
-      }}
-      loading={{ variant: 'skeleton', message: 'Loading driver profile...' }}
-      errorConfig={{ variant: 'full-screen' }}
-      empty={{
-        icon: require('lucide-react').Car,
-        title: 'Driver not found',
-        description: 'The driver profile may not exist or you may not have access',
-        action: { label: 'Back to Drivers', onClick: handleBackClick }
-      }}
-    />
-  );
+      }
+
+      return (
+        <DriverProfilePageClient
+          pageDto={pageDto}
+        />
+      );
+  }
 }