di usage in website

apps/website/app/drivers/DriversInteractive.tsx

@@ -1,29 +1,23 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
-import { DriversTemplate } from '@/templates/DriversTemplate';
 import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
+import { DriversTemplate } from '@/templates/DriversTemplate';
 
 // Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
 import { StateContainer } from '@/components/shared/state/StateContainer';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useDriverLeaderboard } from '@/hooks/driver/useDriverLeaderboard';
 import { Users } from 'lucide-react';
 
 export function DriversInteractive() {
-  const router = useRouter();
-  const { driverService } = useServices();
   
-  const { data: viewModel, isLoading: loading, error, retry } = useDataFetching({
-    queryKey: ['driverLeaderboard'],
-    queryFn: () => driverService.getDriverLeaderboard(),
-  });
+  const { data: viewModel, isLoading: loading, error, retry } = useDriverLeaderboard();
   
   const drivers = viewModel?.drivers || [];
   const totalRaces = viewModel?.totalRaces || 0;
   const totalWins = viewModel?.totalWins || 0;
   const activeCount = viewModel?.activeCount || 0;
 
+  // TODO this should not be done in a page, thats part of the service??
   // Transform data for template
   const driverViewModels = drivers.map((driver, index) =>
     new DriverLeaderboardItemViewModel(driver, index + 1)
@@ -45,7 +39,7 @@ export function DriversInteractive() {
         }
       }}
     >
-      {(leaderboardData) => (
+      {() => (
         <DriversTemplate
           drivers={driverViewModels}
           totalRaces={totalRaces}

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

@@ -2,13 +2,11 @@
 
 import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
 import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { DRIVER_SERVICE_TOKEN, TEAM_SERVICE_TOKEN } from '@/lib/di/tokens';
 import SponsorInsightsCard, { useSponsorMode, MetricBuilders, SlotTemplates } from '@/components/sponsors/SponsorInsightsCard';
-
-// Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
-import { StateContainer } from '@/components/shared/state/StateContainer';
 import { Car } from 'lucide-react';
 
 interface Team {
@@ -26,21 +24,22 @@ export function DriverProfileInteractive() {
   const router = useRouter();
   const params = useParams();
   const driverId = params.id as string;
-  const { driverService, teamService } = useServices();
+  const driverService = useInject(DRIVER_SERVICE_TOKEN);
+  const teamService = useInject(TEAM_SERVICE_TOKEN);
 
   const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
   const [friendRequestSent, setFriendRequestSent] = useState(false);
 
   const isSponsorMode = useSponsorMode();
 
-  // Fetch driver profile
-  const { data: driverProfile, isLoading, error, retry } = useDataFetching({
+  // Fetch driver profile using React-Query
+  const { data: driverProfile, isLoading, error, refetch } = useQuery({
     queryKey: ['driverProfile', driverId],
     queryFn: () => driverService.getDriverProfile(driverId),
   });
 
-  // Fetch team memberships
-  const { data: allTeamMemberships } = useDataFetching({
+  // Fetch team memberships using React-Query
+  const { data: allTeamMemberships } = useQuery({
     queryKey: ['driverTeamMemberships', driverId],
     queryFn: async () => {
       if (!driverProfile?.currentDriver) return [];
@@ -100,38 +99,71 @@ export function DriverProfileInteractive() {
     />
   ) : null;
 
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading driver profile...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center max-w-md">
+          <div className="text-red-600 text-4xl mb-4">⚠️</div>
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">Error loading driver profile</h2>
+          <p className="text-gray-600 mb-4">{error.message}</p>
+          <button
+            onClick={() => refetch()}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Empty state
+  if (!driverProfile) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center max-w-md">
+          <div className="text-gray-400 text-4xl mb-4">
+            <Car size={48} />
+          </div>
+          <h2 className="text-xl font-semibold text-gray-900 mb-2">Driver not found</h2>
+          <p className="text-gray-600 mb-4">The driver profile may not exist or you may not have access</p>
+          <button
+            onClick={handleBackClick}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Back to Drivers
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <StateContainer
-      data={driverProfile}
-      isLoading={isLoading}
-      error={error}
-      retry={retry}
-      config={{
-        loading: { variant: 'skeleton', message: 'Loading driver profile...' },
-        error: { variant: 'full-screen' },
-        empty: {
-          icon: 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 }
-        }
-      }}
-    >
-      {(profileData) => (
-        <DriverProfileTemplate
-          driverProfile={profileData}
-          allTeamMemberships={allTeamMemberships || []}
-          isLoading={false}
-          error={null}
-          onBackClick={handleBackClick}
-          onAddFriend={handleAddFriend}
-          friendRequestSent={friendRequestSent}
-          activeTab={activeTab}
-          setActiveTab={setActiveTab}
-          isSponsorMode={isSponsorMode}
-          sponsorInsights={sponsorInsights}
-        />
-      )}
-    </StateContainer>
+    <DriverProfileTemplate
+      driverProfile={driverProfile}
+      allTeamMemberships={allTeamMemberships || []}
+      isLoading={false}
+      error={null}
+      onBackClick={handleBackClick}
+      onAddFriend={handleAddFriend}
+      friendRequestSent={friendRequestSent}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      isSponsorMode={isSponsorMode}
+      sponsorInsights={sponsorInsights}
+    />
   );
- }
+}