error and load state

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

@@ -1,12 +1,16 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { DriverProfileTemplate } from '@/templates/DriverProfileTemplate';
 import { useServices } from '@/lib/services/ServiceProvider';
-import { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
 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 {
   id: string;
   name: string;
@@ -24,34 +28,23 @@ export function DriverProfileInteractive() {
   const driverId = params.id as string;
   const { driverService, teamService } = useServices();
 
-  const [driverProfile, setDriverProfile] = useState<DriverProfileViewModel | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
   const [activeTab, setActiveTab] = useState<'overview' | 'stats'>('overview');
-  const [allTeamMemberships, setAllTeamMemberships] = useState<TeamMembershipInfo[]>([]);
   const [friendRequestSent, setFriendRequestSent] = useState(false);
 
   const isSponsorMode = useSponsorMode();
 
-  useEffect(() => {
-    loadDriver();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [driverId]);
+  // Fetch driver profile
+  const { data: driverProfile, isLoading, error, retry } = useDataFetching({
+    queryKey: ['driverProfile', driverId],
+    queryFn: () => driverService.getDriverProfile(driverId),
+  });
 
-  const loadDriver = async () => {
-    try {
-      // Get driver profile
-      const profileViewModel = await driverService.getDriverProfile(driverId);
-
-      if (!profileViewModel.currentDriver) {
-        setError('Driver not found');
-        setLoading(false);
-        return;
-      }
-
-      setDriverProfile(profileViewModel);
-
-      // Load team memberships - get all teams and check memberships
+  // Fetch team memberships
+  const { data: allTeamMemberships } = useDataFetching({
+    queryKey: ['driverTeamMemberships', driverId],
+    queryFn: async () => {
+      if (!driverProfile?.currentDriver) return [];
+      
       const allTeams = await teamService.getAllTeams();
       const memberships: TeamMembershipInfo[] = [];
 
@@ -69,13 +62,10 @@ export function DriverProfileInteractive() {
           });
         }
       }
-      setAllTeamMemberships(memberships);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load driver');
-    } finally {
-      setLoading(false);
-    }
-  };
+      return memberships;
+    },
+    enabled: !!driverProfile?.currentDriver,
+  });
 
   const handleAddFriend = () => {
     setFriendRequestSent(true);
@@ -110,23 +100,38 @@ export function DriverProfileInteractive() {
     />
   ) : null;
 
-  if (!driverProfile) {
-    return null;
-  }
-
   return (
-    <DriverProfileTemplate
-      driverProfile={driverProfile}
-      allTeamMemberships={allTeamMemberships}
-      isLoading={loading}
+    <StateContainer
+      data={driverProfile}
+      isLoading={isLoading}
       error={error}
-      onBackClick={handleBackClick}
-      onAddFriend={handleAddFriend}
-      friendRequestSent={friendRequestSent}
-      activeTab={activeTab}
-      setActiveTab={setActiveTab}
-      isSponsorMode={isSponsorMode}
-      sponsorInsights={sponsorInsights}
-    />
+      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>
   );
-}
+ }