di usage in website

apps/website/components/profile/UserPill.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import UserPill from './UserPill';
-import type { DriverDTO } from '@/lib/types/generated/DriverDTO';
 
 // Mock useAuth to control session state
 vi.mock('@/lib/auth/AuthContext', () => {
@@ -19,21 +19,21 @@ vi.mock('@/hooks/useEffectiveDriverId', () => {
   };
 });
 
-// Mock services hook to inject stub driverService
+// Mock the new DI hooks
 const mockFindById = vi.fn();
+let mockDriverData: any = null;
 
-vi.mock('@/lib/services/ServiceProvider', () => {
-  return {
-    useServices: () => ({
-      driverService: {
-        findById: mockFindById,
-      },
-      mediaService: {
-        getDriverAvatar: vi.fn(),
-      },
-    }),
-  };
-});
+vi.mock('@/hooks/driver/useFindDriverById', () => ({
+  useFindDriverById: (driverId: string) => {
+    return {
+      data: mockDriverData,
+      isLoading: false,
+      isError: false,
+      isSuccess: !!mockDriverData,
+      refetch: vi.fn(),
+    };
+  },
+}));
 
 interface MockSessionUser {
   id: string;
@@ -64,6 +64,7 @@ describe('UserPill', () => {
   beforeEach(() => {
     mockedAuthValue = { session: null };
     mockedDriverId = null;
+    mockDriverData = null;
     mockFindById.mockReset();
   });
 
@@ -93,18 +94,20 @@ describe('UserPill', () => {
   });
 
   it('loads driver via driverService and uses driver avatarUrl', async () => {
-    const driver: DriverDTO = {
+    const driver = {
       id: 'driver-1',
       iracingId: 'ir-123',
       name: 'Test Driver',
       country: 'DE',
+      joinedAt: '2023-01-01',
       avatarUrl: '/api/media/avatar/driver-1',
     };
 
     mockedAuthValue = { session: { user: { id: 'user-1' } } };
     mockedDriverId = driver.id;
 
-    mockFindById.mockResolvedValue(driver);
+    // Set the mock data that the hook will return
+    mockDriverData = driver;
 
     render(<UserPill />);
 
@@ -112,6 +115,6 @@ describe('UserPill', () => {
       expect(screen.getByText('Test Driver')).toBeInTheDocument();
     });
 
-    expect(mockFindById).toHaveBeenCalledWith('driver-1');
+    expect(mockFindById).not.toHaveBeenCalled(); // Hook is mocked, not called directly
   });
 });

apps/website/components/profile/UserPill.tsx

@@ -11,13 +11,14 @@ import { CapabilityGate } from '@/components/shared/CapabilityGate';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
 import { DriverViewModel as DriverViewModelClass } from '@/lib/view-models/DriverViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useFindDriverById } from '@/hooks/driver/useFindDriverById';
 
 // Hook to detect demo user mode based on session
 function useDemoUserMode(): { isDemo: boolean; demoRole: string | null } {
   const { session } = useAuth();
   const [demoMode, setDemoMode] = useState({ isDemo: false, demoRole: null as string | null });
   
+  // Check if this is a demo user
   useEffect(() => {
     if (!session?.user) {
       setDemoMode({ isDemo: false, demoRole: null });
@@ -81,12 +82,12 @@ function useHasAdminAccess(): boolean {
 }
 
 // Sponsor Pill Component - matches the style of DriverSummaryPill
-function SponsorSummaryPill({ 
-  onClick, 
+function SponsorSummaryPill({
+  onClick,
   companyName = 'Acme Racing Co.',
   activeSponsors = 7,
   impressions = 127,
-}: { 
+}: {
   onClick: () => void;
   companyName?: string;
   activeSponsors?: number;
@@ -136,38 +137,22 @@ function SponsorSummaryPill({
 
 export default function UserPill() {
   const { session } = useAuth();
-  const { driverService, mediaService } = useServices();
-  const [driver, setDriver] = useState<DriverViewModel | null>(null);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const { isDemo, demoRole } = useDemoUserMode();
   const shouldReduceMotion = useReducedMotion();
 
   const primaryDriverId = useEffectiveDriverId();
 
-  // Load driver data only for non-demo users
-  useEffect(() => {
-    let cancelled = false;
+  // Use React-Query hook for driver data (only for non-demo users)
+  const { data: driverDto } = useFindDriverById(primaryDriverId || '', {
+    enabled: !!primaryDriverId && !isDemo,
+  });
 
-    async function loadDriver() {
-      if (!primaryDriverId || isDemo) {
-        if (!cancelled) {
-          setDriver(null);
-        }
-        return;
-      }
-
-      const dto = await driverService.findById(primaryDriverId);
-      if (!cancelled) {
-        setDriver(dto ? new DriverViewModelClass({ ...dto, avatarUrl: (dto as any).avatarUrl ?? null }) : null);
-      }
-    }
-
-    void loadDriver();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [primaryDriverId, driverService, isDemo]);
+  // Transform DTO to ViewModel
+  const driver = useMemo(() => {
+    if (!driverDto) return null;
+    return new DriverViewModelClass({ ...driverDto, avatarUrl: (driverDto as any).avatarUrl ?? null });
+  }, [driverDto]);
 
   const data = useMemo(() => {
     if (!session?.user) {