refactor use cases

apps/website/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 import {
@@ -24,8 +24,7 @@ import {
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 
-import { useServices } from '@/lib/services/ServiceProvider';
-import { DashboardOverviewViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
+import { useDashboardOverview } from '@/hooks/useDashboardService';
 
 
 // Helper functions
@@ -80,26 +79,7 @@ function getGreeting(): string {
 import { DashboardFeedItemSummaryViewModel } from '@/lib/view-models/DashboardOverviewViewModel';
 
 export default function DashboardPage() {
-    const { dashboardService } = useServices();
-    const [dashboardData, setDashboardData] = useState<DashboardOverviewViewModel | null>(null);
-    const [isLoading, setIsLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
-
-    useEffect(() => {
-      const fetchDashboardData = async () => {
-        try {
-          const data = await dashboardService.getDashboardOverview();
-          setDashboardData(data);
-        } catch (err) {
-          console.error('Failed to fetch dashboard data:', err);
-          setError('Failed to load dashboard data');
-        } finally {
-          setIsLoading(false);
-        }
-      };
-
-      fetchDashboardData();
-    }, [dashboardService]);
+    const { data: dashboardData, isLoading, error } = useDashboardOverview();
 
    if (isLoading) {
      return (
@@ -112,7 +92,7 @@ export default function DashboardPage() {
    if (error || !dashboardData) {
      return (
        <main className="min-h-screen bg-deep-graphite flex items-center justify-center">
-         <div className="text-red-400">{error || 'Failed to load dashboard'}</div>
+         <div className="text-red-400">Failed to load dashboard</div>
        </main>
      );
    }

apps/website/app/leaderboards/drivers/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Trophy,
@@ -20,7 +20,7 @@ import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
 import type { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useDriverLeaderboard } from '@/hooks/useDriverService';
 import Image from 'next/image';
 
 // ============================================================================
@@ -173,23 +173,13 @@ function TopThreePodium({ drivers, onDriverClick }: TopThreePodiumProps) {
 
 export default function DriverLeaderboardPage() {
   const router = useRouter();
-  const [drivers, setDrivers] = useState<DriverListItem[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: leaderboardData, isLoading: loading } = useDriverLeaderboard();
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedSkill, setSelectedSkill] = useState<'all' | SkillLevel>('all');
   const [sortBy, setSortBy] = useState<SortBy>('rank');
   const [showFilters, setShowFilters] = useState(false);
 
-  useEffect(() => {
-    const load = async () => {
-      const { driverService } = useServices();
-      const viewModel = await driverService.getDriverLeaderboard();
-      setDrivers(viewModel.drivers);
-      setLoading(false);
-    };
-
-    void load();
-  }, []);
+  const drivers = leaderboardData?.drivers || [];
 
   const filteredDrivers = drivers.filter((driver) => {
     const matchesSearch = driver.name.toLowerCase().includes(searchQuery.toLowerCase()) ||

apps/website/hooks/useDashboardService.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+
+export function useDashboardOverview() {
+  const { dashboardService } = useServices();
+
+  return useQuery({
+    queryKey: ['dashboardOverview'],
+    queryFn: () => dashboardService.getDashboardOverview(),
+  });
+}

apps/website/hooks/useDriverService.ts

@@ -0,0 +1,80 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { CompleteOnboardingInputDTO } from '@/lib/types/generated/CompleteOnboardingInputDTO';
+import { DriverLeaderboardViewModel } from '@/lib/view-models/DriverLeaderboardViewModel';
+import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
+import { DriverProfileViewModel } from '@/lib/view-models/DriverProfileViewModel';
+import type { DriverDTO } from '@/lib/types/generated/DriverDTO';
+
+export function useDriverLeaderboard() {
+  const { driverService } = useServices();
+
+  return useQuery({
+    queryKey: ['driverLeaderboard'],
+    queryFn: () => driverService.getDriverLeaderboard(),
+  });
+}
+
+export function useCurrentDriver() {
+  const { driverService } = useServices();
+
+  return useQuery({
+    queryKey: ['currentDriver'],
+    queryFn: () => driverService.getCurrentDriver(),
+  });
+}
+
+export function useDriverProfile(driverId: string) {
+  const { driverService } = useServices();
+
+  return useQuery({
+    queryKey: ['driverProfile', driverId],
+    queryFn: () => driverService.getDriverProfile(driverId),
+    enabled: !!driverId,
+  });
+}
+
+export function useCompleteDriverOnboarding() {
+  const { driverService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CompleteOnboardingInputDTO) => driverService.completeDriverOnboarding(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['currentDriver'] });
+    },
+  });
+}
+
+export function useUpdateDriverProfile() {
+  const { driverService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (updates: { bio?: string; country?: string }) => driverService.updateProfile(updates),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['driverProfile', data.currentDriver?.id] });
+      queryClient.invalidateQueries({ queryKey: ['currentDriver'] });
+    },
+  });
+}
+
+export function useFindDriverById(id: string) {
+  const { driverService } = useServices();
+
+  return useQuery({
+    queryKey: ['driver', id],
+    queryFn: () => driverService.findById(id),
+    enabled: !!id,
+  });
+}
+
+export function useFindDriversByIds(ids: string[]) {
+  const { driverService } = useServices();
+
+  return useQuery({
+    queryKey: ['drivers', ids],
+    queryFn: () => driverService.findByIds(ids),
+    enabled: ids.length > 0,
+  });
+}

apps/website/hooks/useLeagueService.ts

@@ -0,0 +1,125 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useServices } from '@/lib/services/ServiceProvider';
+import { CreateLeagueInputDTO } from '@/lib/types/generated/CreateLeagueInputDTO';
+import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
+import { LeagueStandingsViewModel } from '@/lib/view-models/LeagueStandingsViewModel';
+import { LeagueStatsViewModel } from '@/lib/view-models/LeagueStatsViewModel';
+import { LeagueScheduleViewModel } from '@/lib/view-models/LeagueScheduleViewModel';
+import { LeagueMembershipsViewModel } from '@/lib/view-models/LeagueMembershipsViewModel';
+import { RemoveMemberViewModel } from '@/lib/view-models/RemoveMemberViewModel';
+import { LeagueDetailViewModel } from '@/lib/view-models/LeagueDetailViewModel';
+import { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
+
+export function useAllLeagues() {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['allLeagues'],
+    queryFn: () => leagueService.getAllLeagues(),
+  });
+}
+
+export function useLeagueStandings(leagueId: string, currentUserId: string) {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueStandings', leagueId, currentUserId],
+    queryFn: () => leagueService.getLeagueStandings(leagueId, currentUserId),
+    enabled: !!leagueId && !!currentUserId,
+  });
+}
+
+export function useLeagueStats() {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueStats'],
+    queryFn: () => leagueService.getLeagueStats(),
+  });
+}
+
+export function useLeagueSchedule(leagueId: string) {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueSchedule', leagueId],
+    queryFn: () => leagueService.getLeagueSchedule(leagueId),
+    enabled: !!leagueId,
+  });
+}
+
+export function useLeagueMemberships(leagueId: string, currentUserId: string) {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueMemberships', leagueId, currentUserId],
+    queryFn: () => leagueService.getLeagueMemberships(leagueId, currentUserId),
+    enabled: !!leagueId && !!currentUserId,
+  });
+}
+
+export function useCreateLeague() {
+  const { leagueService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreateLeagueInputDTO) => leagueService.createLeague(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['allLeagues'] });
+    },
+  });
+}
+
+export function useRemoveLeagueMember() {
+  const { leagueService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ leagueId, performerDriverId, targetDriverId }: {
+      leagueId: string;
+      performerDriverId: string;
+      targetDriverId: string;
+    }) => leagueService.removeMember(leagueId, performerDriverId, targetDriverId),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['leagueMemberships', variables.leagueId] });
+      queryClient.invalidateQueries({ queryKey: ['leagueStandings', variables.leagueId] });
+    },
+  });
+}
+
+export function useUpdateLeagueMemberRole() {
+  const { leagueService } = useServices();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ leagueId, performerDriverId, targetDriverId, newRole }: {
+      leagueId: string;
+      performerDriverId: string;
+      targetDriverId: string;
+      newRole: string;
+    }) => leagueService.updateMemberRole(leagueId, performerDriverId, targetDriverId, newRole),
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['leagueMemberships', variables.leagueId] });
+    },
+  });
+}
+
+export function useLeagueDetail(leagueId: string, currentDriverId: string) {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueDetail', leagueId, currentDriverId],
+    queryFn: () => leagueService.getLeagueDetail(leagueId, currentDriverId),
+    enabled: !!leagueId && !!currentDriverId,
+  });
+}
+
+export function useLeagueDetailPageData(leagueId: string) {
+  const { leagueService } = useServices();
+
+  return useQuery({
+    queryKey: ['leagueDetailPageData', leagueId],
+    queryFn: () => leagueService.getLeagueDetailPageData(leagueId),
+    enabled: !!leagueId,
+  });
+}

apps/website/lib/services/ServiceProvider.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { createContext, useContext, useMemo, ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ServiceFactory } from './ServiceFactory';
 
 // Import all service types
@@ -58,6 +59,15 @@ export interface Services {
   penaltyService: PenaltyService;
 }
 
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 10 * 60 * 1000, // 10 minutes
+    },
+  },
+});
+
 const ServicesContext = createContext<Services | null>(null);
 
 interface ServiceProviderProps {
@@ -98,9 +108,11 @@ export function ServiceProvider({ children }: ServiceProviderProps) {
   }, []);
 
   return (
-    <ServicesContext.Provider value={services}>
-      {children}
-    </ServicesContext.Provider>
+    <QueryClientProvider client={queryClient}>
+      <ServicesContext.Provider value={services}>
+        {children}
+      </ServicesContext.Provider>
+    </QueryClientProvider>
   );
 }
 

apps/website/package.json

@@ -17,6 +17,7 @@
     "@core/social": "file:../../core/social",
     "@core/testing-support": "file:../../core/testing-support",
     "@faker-js/faker": "^9.2.0",
+    "@tanstack/react-query": "^5.90.12",
     "@vercel/kv": "^3.0.0",
     "electron": "39.2.7",
     "framer-motion": "^12.23.25",