mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Marc Mintel
2025-12-04 11:54:23 +01:00
parent c0fdae3d3c
commit 9d5caa87f3
83 changed files with 1579 additions and 2151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

248
apps/website/components/leagues/LeagueMembers.tsx Normal file
View File

@@ -0,0 +1,248 @@
'use client';
import { useState, useEffect } from 'react';
import { Driver } from '@gridpilot/racing/domain/entities/Driver';
import { getDriverRepository, getDriverStats } from '@/lib/di-container';
import {
getLeagueMembers,
getCurrentDriverId,
type LeagueMembership,
type MembershipRole,
} from '@gridpilot/racing/application';
interface LeagueMembersProps {
leagueId: string;
onRemoveMember?: (driverId: string) => void;
onUpdateRole?: (driverId: string, role: MembershipRole) => void;
showActions?: boolean;
}
export default function LeagueMembers({
leagueId,
onRemoveMember,
onUpdateRole,
showActions = false
}: LeagueMembersProps) {
const [members, setMembers] = useState<LeagueMembership[]>([]);
const [drivers, setDrivers] = useState<Driver[]>([]);
const [loading, setLoading] = useState(true);
const [sortBy, setSortBy] = useState<'role' | 'name' | 'date' | 'rating' | 'points' | 'wins'>('rating');
const currentDriverId = getCurrentDriverId();
useEffect(() => {
loadMembers();
}, [leagueId]);
const loadMembers = async () => {
setLoading(true);
try {
const membershipData = getLeagueMembers(leagueId);
setMembers(membershipData);
const driverRepo = getDriverRepository();
const driverData = await Promise.all(
membershipData.map(m => driverRepo.findById(m.driverId))
);
setDrivers(driverData.filter((d): d is Driver => d !== null));
} catch (error) {
console.error('Failed to load members:', error);
} finally {
setLoading(false);
}
};
const getDriverName = (driverId: string): string => {
const driver = drivers.find(d => d.id === driverId);
return driver?.name || 'Unknown Driver';
};
const getRoleOrder = (role: MembershipRole): number => {
const order = { owner: 0, admin: 1, steward: 2, member: 3 };
return order[role];
};
const sortedMembers = [...members].sort((a, b) => {
switch (sortBy) {
case 'role':
return getRoleOrder(a.role) - getRoleOrder(b.role);
case 'name':
return getDriverName(a.driverId).localeCompare(getDriverName(b.driverId));
case 'date':
return new Date(b.joinedAt).getTime() - new Date(a.joinedAt).getTime();
case 'rating': {
const statsA = getDriverStats(a.driverId);
const statsB = getDriverStats(b.driverId);
return (statsB?.rating || 0) - (statsA?.rating || 0);
}
case 'points':
return 0;
case 'wins': {
const statsA = getDriverStats(a.driverId);
const statsB = getDriverStats(b.driverId);
return (statsB?.wins || 0) - (statsA?.wins || 0);
}
default:
return 0;
}
});
const getRoleBadgeColor = (role: MembershipRole): string => {
switch (role) {
case 'owner':
return 'bg-yellow-500/10 text-yellow-500 border-yellow-500/30';
case 'admin':
return 'bg-purple-500/10 text-purple-400 border-purple-500/30';
case 'steward':
return 'bg-blue-500/10 text-blue-400 border-blue-500/30';
case 'member':
return 'bg-primary-blue/10 text-primary-blue border-primary-blue/30';
}
};
if (loading) {
return (
<div className="text-center py-8 text-gray-400">
Loading members...
</div>
);
}
if (members.length === 0) {
return (
<div className="text-center py-8 text-gray-400">
No members found
</div>
);
}
return (
<div>
{/* Sort Controls */}
<div className="mb-4 flex items-center justify-between">
<p className="text-sm text-gray-400">
{members.length} {members.length === 1 ? 'member' : 'members'}
</p>
<div className="flex items-center gap-2">
<label className="text-sm text-gray-400">Sort by:</label>
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value as any)}
className="px-3 py-1 bg-deep-graphite border border-charcoal-outline rounded text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
>
<option value="rating">Rating</option>
<option value="points">Points</option>
<option value="wins">Wins</option>
<option value="role">Role</option>
<option value="name">Name</option>
<option value="date">Join Date</option>
</select>
</div>
</div>
{/* Members Table */}
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-charcoal-outline">
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Driver</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Rating</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Rank</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Wins</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Role</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-gray-400">Joined</th>
{showActions && <th className="text-right py-3 px-4 text-sm font-semibold text-gray-400">Actions</th>}
</tr>
</thead>
<tbody>
{sortedMembers.map((member, index) => {
const isCurrentUser = member.driverId === currentDriverId;
const cannotModify = member.role === 'owner';
const driverStats = getDriverStats(member.driverId);
const isTopPerformer = index < 3 && sortBy === 'rating';
return (
<tr
key={member.driverId}
className={`border-b border-charcoal-outline/50 hover:bg-iron-gray/20 transition-colors ${isTopPerformer ? 'bg-primary-blue/5' : ''}`}
>
<td className="py-3 px-4">
<div className="flex items-center gap-2">
<span className="text-white font-medium">
{getDriverName(member.driverId)}
</span>
{isCurrentUser && (
<span className="text-xs text-gray-500">(You)</span>
)}
{isTopPerformer && (
<span className="text-xs">⭐</span>
)}
</div>
</td>
<td className="py-3 px-4">
<span className="text-primary-blue font-medium">
{driverStats?.rating || '—'}
</span>
</td>
<td className="py-3 px-4">
<span className="text-gray-300">
#{driverStats?.overallRank || '—'}
</span>
</td>
<td className="py-3 px-4">
<span className="text-green-400 font-medium">
{driverStats?.wins || 0}
</span>
</td>
<td className="py-3 px-4">
<span className={`px-2 py-1 text-xs font-medium rounded border ${getRoleBadgeColor(member.role)}`}>
{member.role.charAt(0).toUpperCase() + member.role.slice(1)}
</span>
</td>
<td className="py-3 px-4">
<span className="text-white text-sm">
{new Date(member.joinedAt).toLocaleDateString('en-US', {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</span>
</td>
{showActions && (
<td className="py-3 px-4 text-right">
{!cannotModify && !isCurrentUser && (
<div className="flex items-center justify-end gap-2">
{onUpdateRole && (
<select
value={member.role}
onChange={(e) => onUpdateRole(member.driverId, e.target.value as MembershipRole)}
className="px-2 py-1 bg-deep-graphite border border-charcoal-outline rounded text-white text-xs focus:outline-none focus:ring-2 focus:ring-primary-blue"
>
<option value="member">Member</option>
<option value="steward">Steward</option>
<option value="admin">Admin</option>
</select>
)}
{onRemoveMember && (
<button
onClick={() => onRemoveMember(member.driverId)}
className="px-2 py-1 text-xs font-medium text-red-400 hover:text-red-300 hover:bg-red-500/10 rounded transition-colors"
>
Remove
</button>
)}
</div>
)}
{cannotModify && (
<span className="text-xs text-gray-500">—</span>
)}
</td>
)}
</tr>
);
})}
</tbody>
</table>
</div>
</div>
);
}