website refactor

apps/website/app/teams/TeamsPageClient.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import { useRouter } from 'next/navigation';
+import type { TeamsPageDto } from '@/lib/page-queries/page-queries/TeamsPageQuery';
+import { TeamsPresenter } from '@/lib/presenters/TeamsPresenter';
+import { TeamsTemplate } from '@/templates/TeamsTemplate';
+import type { TeamSummaryData } from '@/templates/view-data/TeamsViewData';
+
+interface TeamsPageClientProps {
+  pageDto: TeamsPageDto;
+}
+
+export function TeamsPageClient({ pageDto }: TeamsPageClientProps) {
+  const router = useRouter();
+  
+  // Use presenter to create ViewData
+  const viewData = TeamsPresenter.createViewData(pageDto);
+  
+  // UI state
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showCreateForm, setShowCreateForm] = useState(false);
+  
+  // Filter teams based on search query
+  const filteredTeams = useMemo(() => {
+    if (!searchQuery) return viewData.teams;
+    
+    const query = searchQuery.toLowerCase();
+    return viewData.teams.filter((team: TeamSummaryData) =>
+      team.teamName.toLowerCase().includes(query) ||
+      team.leagueName.toLowerCase().includes(query)
+    );
+  }, [viewData.teams, searchQuery]);
+  
+  // Update viewData with filtered teams
+  const templateViewData = {
+    ...viewData,
+    teams: filteredTeams,
+  };
+  
+  // Event handlers
+  const handleSearchChange = (query: string) => {
+    setSearchQuery(query);
+  };
+  
+  const handleShowCreateForm = () => {
+    setShowCreateForm(true);
+  };
+  
+  const handleHideCreateForm = () => {
+    setShowCreateForm(false);
+  };
+  
+  const handleTeamClick = (teamId: string) => {
+    router.push(`/teams/${teamId}`);
+  };
+  
+  const handleCreateSuccess = (teamId: string) => {
+    setShowCreateForm(false);
+    router.push(`/teams/${teamId}`);
+  };
+  
+  const handleBrowseTeams = () => {
+    const element = document.getElementById('teams-list');
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+  
+  const handleSkillLevelClick = (level: string) => {
+    const element = document.getElementById(`level-${level}`);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+  
+  return (
+    <TeamsTemplate
+      teams={templateViewData.teams}
+      searchQuery={searchQuery}
+      showCreateForm={showCreateForm}
+      onSearchChange={handleSearchChange}
+      onShowCreateForm={handleShowCreateForm}
+      onHideCreateForm={handleHideCreateForm}
+      onTeamClick={handleTeamClick}
+      onCreateSuccess={handleCreateSuccess}
+      onBrowseTeams={handleBrowseTeams}
+      onSkillLevelClick={handleSkillLevelClick}
+    />
+  );
+}