di usage in website

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) {