Files
gridpilot.gg/apps/website/app/teams/TeamsPageClient.tsx
2026-01-14 10:51:05 +01:00

78 lines
2.1 KiB
TypeScript

'use client';
import type { TeamsViewData } from '@/lib/view-data/TeamsViewData';
import { TeamsTemplate } from '@/templates/TeamsTemplate';
import { useRouter } from 'next/navigation';
import { useState } from 'react';
interface TeamsPageClientProps extends TeamsViewData {
searchQuery?: string;
showCreateForm?: boolean;
onSearchChange?: (query: string) => void;
onShowCreateForm?: () => void;
onHideCreateForm?: () => void;
onTeamClick?: (teamId: string) => void;
onCreateSuccess?: (teamId: string) => void;
onBrowseTeams?: () => void;
onSkillLevelClick?: (level: string) => void;
}
export function TeamsPageClient({ teams }: TeamsPageClientProps) {
const router = useRouter();
// UI state only (no business logic)
const [searchQuery, setSearchQuery] = useState('');
const [showCreateForm, setShowCreateForm] = useState(false);
// 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={teams}
searchQuery={searchQuery}
showCreateForm={showCreateForm}
onSearchChange={handleSearchChange}
onShowCreateForm={handleShowCreateForm}
onHideCreateForm={handleHideCreateForm}
onTeamClick={handleTeamClick}
onCreateSuccess={handleCreateSuccess}
onBrowseTeams={handleBrowseTeams}
onSkillLevelClick={handleSkillLevelClick}
/>
);
}