react-query

apps/website/app/teams/leaderboard/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import {
   Users,
@@ -22,7 +22,7 @@ import {
 import Button from '@/components/ui/Button';
 import Input from '@/components/ui/Input';
 import Heading from '@/components/ui/Heading';
-import { useServices } from '@/lib/services/ServiceProvider';
+import { useAllTeams } from '@/hooks/useTeamService';
 import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 
 // ============================================================================
@@ -256,28 +256,11 @@ function TopThreePodium({ teams, onTeamClick }: TopThreePodiumProps) {
 
 export default function TeamLeaderboardPage() {
   const router = useRouter();
-  const [teams, setTeams] = useState<TeamDisplayData[]>([]);
-  const [loading, setLoading] = useState(true);
+  const { data: teams = [], isLoading: loading } = useAllTeams();
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortBy>('rating');
   const [filterLevel, setFilterLevel] = useState<SkillLevel | 'all'>('all');
 
-  useEffect(() => {
-    const loadTeams = async () => {
-      try {
-        const { teamService } = useServices();
-        const teams = await teamService.getAllTeams();
-        setTeams(teams);
-      } catch (error) {
-        console.error('Failed to load teams:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    void loadTeams();
-  }, []);
-
 
   const handleTeamClick = (teamId: string) => {
     if (teamId.startsWith('demo-team-')) {
@@ -300,8 +283,7 @@ export default function TeamLeaderboardPage() {
       if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
         return false;
       }
-      // Must have rating for leaderboard
-      return team.rating !== null;
+      return true;
     })
     .sort((a, b) => {
       switch (sortBy) {