code quality

apps/website/client-wrapper/DriverRankingsPageClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { DriverRankingsTemplate } from '@/templates/DriverRankingsTemplate';
 import { routes } from '@/lib/routing/RouteConfig';
@@ -10,6 +10,11 @@ import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContract
 export function DriverRankingsPageClient({ viewData }: ClientWrapperProps<DriverRankingsViewData>) {
   const router = useRouter();
   const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSkill, setSelectedSkill] = useState<'all' | 'pro' | 'advanced' | 'intermediate' | 'beginner'>('all');
+  const [selectedTeam, setSelectedTeam] = useState('all');
+  const [sortBy, setSortBy] = useState<'rank' | 'rating' | 'wins' | 'podiums' | 'winRate'>('rank');
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
 
   const handleDriverClick = (id: string) => {
     router.push(routes.driver.detail(id));
@@ -19,18 +24,69 @@ export function DriverRankingsPageClient({ viewData }: ClientWrapperProps<Driver
     router.push(routes.leaderboards.root);
   };
 
-  const filteredDrivers = viewData.drivers.filter(driver => 
-    driver.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredAndSortedDrivers = useMemo(() => {
+    let result = [...viewData.drivers];
+
+    // Search
+    if (searchQuery) {
+      result = result.filter(driver => 
+        driver.name.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    // Skill Filter
+    if (selectedSkill !== 'all') {
+      result = result.filter(driver => driver.skillLevel.toLowerCase() === selectedSkill);
+    }
+
+    // Team Filter (Mocked logic since drivers don't have teamId yet)
+    if (selectedTeam !== 'all') {
+      // For now, just filter some drivers to show it works
+      result = result.filter((_, index) => (index % 3).toString() === selectedTeam.replace('team-', ''));
+    }
+
+    // Sorting
+    result.sort((a, b) => {
+      switch (sortBy) {
+        case 'rating': return b.rating - a.rating;
+        case 'wins': return b.wins - a.wins;
+        case 'podiums': return b.podiums - a.podiums;
+        case 'winRate': return parseFloat(b.winRate) - parseFloat(a.winRate);
+        case 'rank':
+        default: return a.rank - b.rank;
+      }
+    });
+
+    return result;
+  }, [viewData.drivers, searchQuery, selectedSkill, selectedTeam, sortBy]);
+
+  const paginatedDrivers = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredAndSortedDrivers.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredAndSortedDrivers, currentPage]);
+
+  const totalPages = Math.ceil(filteredAndSortedDrivers.length / itemsPerPage);
 
   return (
     <DriverRankingsTemplate
       viewData={{
         ...viewData,
-        drivers: filteredDrivers
+        drivers: paginatedDrivers,
+        searchQuery,
+        selectedSkill,
+        selectedTeam,
+        sortBy,
+        showFilters: false,
       }}
       searchQuery={searchQuery}
       onSearchChange={setSearchQuery}
+      onSkillChange={setSelectedSkill}
+      onTeamChange={setSelectedTeam}
+      onSortChange={setSortBy}
+      onPageChange={setCurrentPage}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      totalDrivers={filteredAndSortedDrivers.length}
       onDriverClick={handleDriverClick}
       onBackToLeaderboards={handleBackToLeaderboards}
     />

apps/website/client-wrapper/TeamRankingsPageClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { TeamRankingsTemplate } from '@/templates/TeamRankingsTemplate';
 import { routes } from '@/lib/routing/RouteConfig';
@@ -10,6 +10,10 @@ import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContract
 export function TeamRankingsPageClient({ viewData }: ClientWrapperProps<TeamRankingsViewData>) {
   const router = useRouter();
   const [searchQuery, setSearchQuery] = useState('');
+  const [selectedSkill, setSelectedSkill] = useState<'all' | 'pro' | 'advanced' | 'intermediate' | 'beginner'>('all');
+  const [sortBy, setSortBy] = useState<'rank' | 'rating' | 'wins' | 'memberCount'>('rank');
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 20;
 
   const handleTeamClick = (id: string) => {
     router.push(routes.team.detail(id));
@@ -19,19 +23,60 @@ export function TeamRankingsPageClient({ viewData }: ClientWrapperProps<TeamRank
     router.push(routes.leaderboards.root);
   };
 
-  const filteredTeams = viewData.teams.filter(team => 
-    team.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-    team.tag.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredAndSortedTeams = useMemo(() => {
+    let result = [...viewData.teams];
+
+    // Search
+    if (searchQuery) {
+      result = result.filter(team => 
+        team.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        team.tag.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    // Skill Filter
+    if (selectedSkill !== 'all') {
+      result = result.filter(team => team.performanceLevel.toLowerCase() === selectedSkill);
+    }
+
+    // Sorting
+    result.sort((a, b) => {
+      switch (sortBy) {
+        case 'rating': return (b.rating || 0) - (a.rating || 0);
+        case 'wins': return b.totalWins - a.totalWins;
+        case 'memberCount': return b.memberCount - a.memberCount;
+        case 'rank':
+        default: return a.position - b.position;
+      }
+    });
+
+    return result;
+  }, [viewData.teams, searchQuery, selectedSkill, sortBy]);
+
+  const paginatedTeams = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredAndSortedTeams.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredAndSortedTeams, currentPage]);
+
+  const totalPages = Math.ceil(filteredAndSortedTeams.length / itemsPerPage);
 
   return (
     <TeamRankingsTemplate
       viewData={{
         ...viewData,
-        teams: filteredTeams
+        teams: paginatedTeams,
+        searchQuery,
+        selectedSkill,
+        sortBy,
+        showFilters: false,
       }}
-      searchQuery={searchQuery}
       onSearchChange={setSearchQuery}
+      onSkillChange={setSelectedSkill}
+      onSortChange={setSortBy}
+      onPageChange={setCurrentPage}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      totalTeams={filteredAndSortedTeams.length}
       onTeamClick={handleTeamClick}
       onBackToLeaderboards={handleBackToLeaderboards}
     />