wip

apps/website/app/teams/[id]/page.tsx

@@ -2,24 +2,22 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { useParams } from 'next/navigation';
+import Image from 'next/image';
 import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
+import { getImageService } from '@/lib/di-container';
 import TeamRoster from '@/components/teams/TeamRoster';
 import TeamStandings from '@/components/teams/TeamStandings';
 import TeamAdmin from '@/components/teams/TeamAdmin';
 import JoinTeamButton from '@/components/teams/JoinTeamButton';
 import {
-  Team,
-  getTeam,
-  getTeamMembers,
-  getCurrentDriverId,
-  isTeamOwnerOrManager,
-  TeamMembership,
-  removeTeamMember,
-  updateTeamMemberRole,
-  TeamRole,
-} from '@/lib/racingLegacyFacade';
+  getGetTeamDetailsQuery,
+  getGetTeamMembersQuery,
+  getTeamMembershipRepository,
+} from '@/lib/di-container';
+import { useEffectiveDriverId } from '@/lib/currentDriver';
+import type { Team, TeamMembership, TeamRole } from '@gridpilot/racing';
 
 type Tab = 'overview' | 'roster' | 'standings' | 'admin';
 
@@ -32,50 +30,87 @@ export default function TeamDetailPage() {
   const [activeTab, setActiveTab] = useState<Tab>('overview');
   const [loading, setLoading] = useState(true);
   const [isAdmin, setIsAdmin] = useState(false);
+  const currentDriverId = useEffectiveDriverId();
 
-  const loadTeamData = useCallback(() => {
-    const teamData = getTeam(teamId);
-    if (!teamData) {
+  const loadTeamData = useCallback(async () => {
+    setLoading(true);
+    try {
+      const detailsQuery = getGetTeamDetailsQuery();
+      const membersQuery = getGetTeamMembersQuery();
+
+      const details = await detailsQuery.execute({ teamId, driverId: currentDriverId });
+      const teamMemberships = await membersQuery.execute({ teamId });
+
+      const adminStatus =
+        teamMemberships.some(
+          (m) =>
+            m.driverId === currentDriverId &&
+            (m.role === 'owner' || m.role === 'manager'),
+        ) ?? false;
+
+      setTeam(details.team);
+      setMemberships(teamMemberships);
+      setIsAdmin(adminStatus);
+    } finally {
       setLoading(false);
-      return;
     }
-
-    const teamMemberships = getTeamMembers(teamId);
-    const currentDriverId = getCurrentDriverId();
-    const adminStatus = isTeamOwnerOrManager(teamId, currentDriverId);
-
-    setTeam(teamData);
-    setMemberships(teamMemberships);
-    setIsAdmin(adminStatus);
-    setLoading(false);
-  }, [teamId]);
+  }, [teamId, currentDriverId]);
 
   useEffect(() => {
-    loadTeamData();
+    void loadTeamData();
   }, [loadTeamData]);
 
   const handleUpdate = () => {
     loadTeamData();
   };
 
-  const handleRemoveMember = (driverId: string) => {
+  const handleRemoveMember = async (driverId: string) => {
     if (!confirm('Are you sure you want to remove this member?')) {
       return;
     }
 
     try {
-      const currentDriverId = getCurrentDriverId();
-      removeTeamMember(teamId, driverId, currentDriverId);
+      const membershipRepo = getTeamMembershipRepository();
+      const performer = await membershipRepo.getMembership(teamId, currentDriverId);
+      if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
+        throw new Error('Only owners or managers can remove members');
+      }
+
+      const membership = await membershipRepo.getMembership(teamId, driverId);
+      if (!membership) {
+        throw new Error('Member not found');
+      }
+      if (membership.role === 'owner') {
+        throw new Error('Cannot remove the team owner');
+      }
+
+      await membershipRepo.removeMembership(teamId, driverId);
       handleUpdate();
     } catch (error) {
       alert(error instanceof Error ? error.message : 'Failed to remove member');
     }
   };
 
-  const handleChangeRole = (driverId: string, newRole: TeamRole) => {
+  const handleChangeRole = async (driverId: string, newRole: TeamRole) => {
     try {
-      const currentDriverId = getCurrentDriverId();
-      updateTeamMemberRole(teamId, driverId, newRole, currentDriverId);
+      const membershipRepo = getTeamMembershipRepository();
+      const performer = await membershipRepo.getMembership(teamId, currentDriverId);
+      if (!performer || (performer.role !== 'owner' && performer.role !== 'manager')) {
+        throw new Error('Only owners or managers can update roles');
+      }
+
+      const membership = await membershipRepo.getMembership(teamId, driverId);
+      if (!membership) {
+        throw new Error('Member not found');
+      }
+      if (membership.role === 'owner') {
+        throw new Error('Cannot change the owner role');
+      }
+
+      await membershipRepo.saveMembership({
+        ...membership,
+        role: newRole,
+      });
       handleUpdate();
     } catch (error) {
       alert(error instanceof Error ? error.message : 'Failed to change role');
@@ -131,10 +166,14 @@ export default function TeamDetailPage() {
       <Card className="mb-6">
         <div className="flex items-start justify-between">
           <div className="flex items-start gap-6">
-            <div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0">
-              <span className="text-4xl font-bold text-gray-500">
-                {team.tag}
-              </span>
+            <div className="w-24 h-24 bg-charcoal-outline rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden">
+              <Image
+                src={getImageService().getTeamLogo(team.id)}
+                alt={team.name}
+                width={96}
+                height={96}
+                className="w-full h-full object-cover"
+              />
             </div>
             
             <div>