wip

apps/website/app/teams/page.tsx

@@ -298,19 +298,13 @@ function FeaturedRecruiting({ teams, onTeamClick }: FeaturedRecruitingProps) {
 // ============================================================================
 
 interface TeamLeaderboardPreviewProps {
-  teams: TeamDisplayData[];
+  topTeams: TeamDisplayData[];
   onTeamClick: (id: string) => void;
 }
 
-function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewProps) {
+function TeamLeaderboardPreview({ topTeams, onTeamClick }: TeamLeaderboardPreviewProps) {
   const router = useRouter();
 
-  // Sort teams by rating and get top 5
-  const topTeams = [...teams]
-    .filter((t) => t.rating !== null)
-    .sort((a, b) => (b.rating ?? 0) - (a.rating ?? 0))
-    .slice(0, 5);
-
   const getMedalColor = (position: number) => {
     switch (position) {
       case 0:
@@ -437,6 +431,13 @@ function TeamLeaderboardPreview({ teams, onTeamClick }: TeamLeaderboardPreviewPr
 export default function TeamsPage() {
   const router = useRouter();
   const [realTeams, setRealTeams] = useState<TeamDisplayData[]>([]);
+  const [groupsBySkillLevel, setGroupsBySkillLevel] = useState<Record<SkillLevel, TeamDisplayData[]>>({
+    beginner: [],
+    intermediate: [],
+    advanced: [],
+    pro: [],
+  });
+  const [topTeams, setTopTeams] = useState<TeamDisplayData[]>([]);
   const [loading, setLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [showCreateForm, setShowCreateForm] = useState(false);
@@ -451,6 +452,8 @@ export default function TeamsPage() {
       await useCase.execute();
       const viewModel = useCase.presenter.getViewModel();
       setRealTeams(viewModel.teams);
+      setGroupsBySkillLevel(viewModel.groupsBySkillLevel);
+      setTopTeams(viewModel.topTeams);
     } catch (error) {
       console.error('Failed to load teams:', error);
     } finally {
@@ -486,12 +489,20 @@ export default function TeamsPage() {
   });
 
   // Group teams by skill level
-  const teamsByLevel = SKILL_LEVELS.reduce(
+  const teamsByLevel: Record<SkillLevel, TeamDisplayData[]> = SKILL_LEVELS.reduce(
     (acc, level) => {
-      acc[level.id] = filteredTeams.filter((t) => t.performanceLevel === level.id);
+      const fromGroup = groupsBySkillLevel[level.id] ?? [];
+      acc[level.id] = filteredTeams.filter((team) =>
+        fromGroup.some((groupTeam) => groupTeam.id === team.id),
+      );
       return acc;
     },
-    {} as Record<SkillLevel, TeamDisplayData[]>,
+    {
+      beginner: [],
+      intermediate: [],
+      advanced: [],
+      pro: [],
+    } as Record<SkillLevel, TeamDisplayData[]>,
   );
 
   const recruitingCount = teams.filter((t) => t.isRecruiting).length;
@@ -647,7 +658,7 @@ export default function TeamsPage() {
       {!searchQuery && <WhyJoinTeamSection />}
 
       {/* Team Leaderboard Preview */}
-      {!searchQuery && <TeamLeaderboardPreview teams={teams} onTeamClick={handleTeamClick} />}
+      {!searchQuery && <TeamLeaderboardPreview topTeams={topTeams} onTeamClick={handleTeamClick} />}
 
       {/* Featured Recruiting */}
       {!searchQuery && <FeaturedRecruiting teams={teams} onTeamClick={handleTeamClick} />}