website refactor

apps/website/templates/TeamLeaderboardTemplate.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Award, ArrowLeft } from 'lucide-react';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
@@ -11,18 +11,12 @@ import { Container } from '@/ui/Container';
 import { Icon } from '@/ui/Icon';
 import { ModalIcon } from '@/ui/ModalIcon';
 import { TeamPodium } from '@/ui/TeamPodium';
-import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
 import { TeamFilter } from '@/ui/TeamFilter';
 import { TeamRankingsTable } from '@/ui/TeamRankingsTable';
-
-type SkillLevel = 'pro' | 'advanced' | 'intermediate' | 'beginner';
-type SortBy = 'rating' | 'wins' | 'winRate' | 'races';
+import type { TeamLeaderboardViewData, SkillLevel, SortBy } from '@/lib/view-data/TeamLeaderboardViewData';
 
 interface TeamLeaderboardTemplateProps {
-  teams: TeamSummaryViewModel[];
-  searchQuery: string;
-  filterLevel: SkillLevel | 'all';
-  sortBy: SortBy;
+  viewData: TeamLeaderboardViewData;
   onSearchChange: (query: string) => void;
   filterLevelChange: (level: SkillLevel | 'all') => void;
   onSortChange: (sort: SortBy) => void;
@@ -31,40 +25,14 @@ interface TeamLeaderboardTemplateProps {
 }
 
 export function TeamLeaderboardTemplate({
-  teams,
-  searchQuery,
-  filterLevel,
-  sortBy,
+  viewData,
   onSearchChange,
   filterLevelChange,
   onSortChange,
   onTeamClick,
   onBackToTeams,
 }: TeamLeaderboardTemplateProps) {
-  // Filter and sort teams
-  const filteredAndSortedTeams = useMemo(() => {
-    return teams
-      .filter((team) => {
-        if (searchQuery) {
-          const query = searchQuery.toLowerCase();
-          if (!team.name.toLowerCase().includes(query) && !(team.description ?? '').toLowerCase().includes(query)) {
-            return false;
-          }
-        }
-        if (filterLevel !== 'all' && team.performanceLevel !== filterLevel) {
-          return false;
-        }
-        return true;
-      })
-      .sort((a, b) => {
-        switch (sortBy) {
-          case 'rating': return 0; // Placeholder
-          case 'wins': return (b.totalWins || 0) - (a.totalWins || 0);
-          case 'races': return (b.totalRaces || 0) - (a.totalRaces || 0);
-          default: return 0;
-        }
-      });
-  }, [teams, searchQuery, filterLevel, sortBy]);
+  const { searchQuery, filterLevel, sortBy, filteredAndSortedTeams } = viewData;
 
   return (
     <Container size="lg" py={8}>