di usage in website

apps/website/app/teams/TeamsInteractive.tsx

@@ -17,9 +17,8 @@ import TeamLeaderboardPreview from '@/components/teams/TeamLeaderboardPreview';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 
 // Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
 import { StateContainer } from '@/components/shared/state/StateContainer';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useAllTeams } from '@/hooks/team/useAllTeams';
 
 type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
 
@@ -27,12 +26,8 @@ const SKILL_LEVELS: SkillLevel[] = ['pro', 'advanced', 'intermediate', 'beginner
 
 export default function TeamsInteractive() {
   const router = useRouter();
-  const { teamService } = useServices();
   
-  const { data: teams = [], isLoading: loading, error, retry } = useDataFetching({
-    queryKey: ['allTeams'],
-    queryFn: () => teamService.getAllTeams(),
-  });
+  const { data: teams = [], isLoading: loading, error, retry } = useAllTeams();
   
   const [searchQuery, setSearchQuery] = useState('');
   const [showCreateForm, setShowCreateForm] = useState(false);

apps/website/app/teams/[id]/TeamDetailInteractive.tsx

@@ -1,14 +1,16 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import TeamDetailTemplate from '@/templates/TeamDetailTemplate';
-import { useServices } from '@/lib/services/ServiceProvider';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 
 // Shared state components
-import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
 import { StateContainer } from '@/components/shared/state/StateContainer';
+import { useTeamDetails } from '@/hooks/team/useTeamDetails';
+import { useTeamMembers } from '@/hooks/team/useTeamMembers';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { TEAM_SERVICE_TOKEN } from '@/lib/di/tokens';
 import { Users } from 'lucide-react';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
@@ -16,27 +18,21 @@ type Tab = 'overview' | 'roster' | 'standings' | 'admin';
 export default function TeamDetailInteractive() {
     const params = useParams();
     const teamId = params.id as string;
-    const { teamService } = useServices();
     const router = useRouter();
     const currentDriverId = useEffectiveDriverId();
+    const teamService = useInject(TEAM_SERVICE_TOKEN);
 
     const [activeTab, setActiveTab] = useState<Tab>('overview');
 
-    // Fetch team details
-    const { data: teamDetails, isLoading: teamLoading, error: teamError, retry: teamRetry } = useDataFetching({
-        queryKey: ['teamDetails', teamId, currentDriverId],
-        queryFn: () => teamService.getTeamDetails(teamId, currentDriverId),
-    });
+    // Fetch team details using DI + React-Query
+    const { data: teamDetails, isLoading: teamLoading, error: teamError, retry: teamRetry } = useTeamDetails(teamId, currentDriverId);
 
-    // Fetch team members
-    const { data: memberships, isLoading: membersLoading, error: membersError, retry: membersRetry } = useDataFetching({
-        queryKey: ['teamMembers', teamId, currentDriverId],
-        queryFn: async () => {
-            if (!teamDetails?.ownerId) return [];
-            return teamService.getTeamMembers(teamId, currentDriverId, teamDetails.ownerId);
-        },
-        enabled: !!teamDetails?.ownerId,
-    });
+    // Fetch team members using DI + React-Query
+    const { data: memberships, isLoading: membersLoading, error: membersError, retry: membersRetry } = useTeamMembers(
+        teamId,
+        currentDriverId,
+        teamDetails?.ownerId || ''
+    );
 
     const isLoading = teamLoading || membersLoading;
     const error = teamError || membersError;
@@ -126,7 +122,7 @@ export default function TeamDetailInteractive() {
         >
             {(teamData) => (
                 <TeamDetailTemplate
-                    team={teamData}
+                    team={teamData!}
                     memberships={memberships || []}
                     activeTab={activeTab}
                     loading={isLoading}