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

page wrapper

Browse Source
This commit is contained in:
Marc Mintel
2026-01-07 12:40:52 +01:00
parent e589c30bf8
commit 0db80fa98d
128 changed files with 7386 additions and 8096 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
apps/website/app/profile/leagues/page.tsx
View File

@@ -1,103 +1,85 @@
'use client';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useInject } from '@/lib/di/hooks/useInject';
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { LEAGUE_SERVICE_TOKEN, LEAGUE_MEMBERSHIP_SERVICE_TOKEN } from '@/lib/di/tokens';
import type { LeagueMembership } from '@/lib/types/LeagueMembership';
import type { LeagueService } from '@/lib/services/leagues/LeagueService';
import type { LeagueMembershipService } from '@/lib/services/leagues/LeagueMembershipService';
import type { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import type { LeagueMembership } from '@/lib/types/LeagueMembership';
import { SessionGateway } from '@/lib/gateways/SessionGateway';
import { ContainerManager } from '@/lib/di/container';
interface LeagueWithRole {
league: LeagueSummaryViewModel;
membership: LeagueMembership;
}
export default function ManageLeaguesPage() {
const [ownedLeagues, setOwnedLeagues] = useState<LeagueWithRole[]>([]);
const [memberLeagues, setMemberLeagues] = useState<LeagueWithRole[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const effectiveDriverId = useEffectiveDriverId();
const leagueService = useInject(LEAGUE_SERVICE_TOKEN);
const leagueMembershipService = useInject(LEAGUE_MEMBERSHIP_SERVICE_TOKEN);
interface ProfileLeaguesData {
ownedLeagues: LeagueWithRole[];
memberLeagues: LeagueWithRole[];
}
useEffect(() => {
let cancelled = false;
async function fetchProfileLeaguesData(): Promise<ProfileLeaguesData | null> {
try {
// Get current driver ID from session
const sessionGateway = new SessionGateway();
const session = await sessionGateway.getSession();
if (!session?.user?.primaryDriverId) {
return null;
}
const currentDriverId = session.user.primaryDriverId;
const load = async () => {
setLoading(true);
try {
const leagues = await leagueService.getAllLeagues();
// Fetch leagues using PageDataFetcher
const leagues = await PageDataFetcher.fetch<LeagueService, 'getAllLeagues'>(
LEAGUE_SERVICE_TOKEN,
'getAllLeagues'
);
const memberships = await Promise.all(
leagues.map(async (league) => {
await leagueMembershipService.fetchLeagueMemberships(league.id);
const membership = leagueMembershipService.getMembership(league.id, effectiveDriverId);
return { league, membership };
}),
);
if (!leagues) {
return null;
}
if (cancelled) {
return;
}
// Get membership service from container
const container = ContainerManager.getInstance().getContainer();
const membershipService = container.get<LeagueMembershipService>(LEAGUE_MEMBERSHIP_SERVICE_TOKEN);
const owned: LeagueWithRole[] = [];
const member: LeagueWithRole[] = [];
// Fetch memberships for each league
const memberships = await Promise.all(
leagues.map(async (league) => {
await membershipService.fetchLeagueMemberships(league.id);
const membership = membershipService.getMembership(league.id, currentDriverId);
return membership ? { league, membership } : null;
})
);
for (const entry of memberships) {
if (!entry.membership || entry.membership.status !== 'active') {
continue;
}
// Filter and categorize leagues
const owned: LeagueWithRole[] = [];
const member: LeagueWithRole[] = [];
if (entry.membership.role === 'owner') {
owned.push(entry as LeagueWithRole);
} else {
member.push(entry as LeagueWithRole);
}
}
setOwnedLeagues(owned);
setMemberLeagues(member);
setError(null);
} catch (err) {
if (!cancelled) {
setError(err instanceof Error ? err.message : 'Failed to load leagues');
}
} finally {
if (!cancelled) {
setLoading(false);
}
for (const entry of memberships) {
if (!entry || !entry.membership || entry.membership.status !== 'active') {
continue;
}
};
void load();
if (entry.membership.role === 'owner') {
owned.push(entry);
} else {
member.push(entry);
}
}
return () => {
cancelled = true;
};
}, [effectiveDriverId, leagueService, leagueMembershipService]);
if (loading) {
return (
<div className="max-w-6xl mx-auto">
<div className="text-center text-gray-400">Loading your leagues...</div>
</div>
);
}
if (error) {
return (
<div className="max-w-6xl mx-auto">
<Card>
<div className="text-center py-8 text-red-400">{error}</div>
</Card>
</div>
);
return { ownedLeagues: owned, memberLeagues: member };
} catch (error) {
console.error('Failed to fetch profile leagues data:', error);
return null;
}
}
// Template component
function ProfileLeaguesTemplate({ data }: { data: ProfileLeaguesData }) {
return (
<div className="max-w-6xl mx-auto space-y-8">
<div>
@@ -107,23 +89,24 @@ export default function ManageLeaguesPage() {
</p>
</div>
<Card>
{/* Leagues You Own */}
<div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold text-white">Leagues you own</h2>
{ownedLeagues.length > 0 && (
{data.ownedLeagues.length > 0 && (
<span className="text-xs text-gray-400">
{ownedLeagues.length} {ownedLeagues.length === 1 ? 'league' : 'leagues'}
{data.ownedLeagues.length} {data.ownedLeagues.length === 1 ? 'league' : 'leagues'}
</span>
)}
</div>
{ownedLeagues.length === 0 ? (
{data.ownedLeagues.length === 0 ? (
<p className="text-sm text-gray-400">
You don't own any leagues yet in this session.
</p>
) : (
<div className="space-y-3">
{ownedLeagues.map(({ league }) => (
{data.ownedLeagues.map(({ league }) => (
<div
key={league.id}
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
@@ -135,41 +118,42 @@ export default function ManageLeaguesPage() {
</p>
</div>
<div className="flex items-center gap-2">
<Link
<a
href={`/leagues/${league.id}`}
className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
>
View
</Link>
<Link href={`/leagues/${league.id}?tab=admin`}>
<Button variant="primary" className="text-xs px-3 py-1.5">
</a>
<a href={`/leagues/${league.id}?tab=admin`}>
<button className="bg-primary hover:bg-primary/90 text-white text-xs px-3 py-1.5 rounded transition-colors">
Manage
</Button>
</Link>
</button>
</a>
</div>
</div>
))}
</div>
)}
</Card>
</div>
<Card>
{/* Leagues You're In */}
<div className="bg-charcoal rounded-lg border border-charcoal-outline p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-semibold text-white">Leagues you're in</h2>
{memberLeagues.length > 0 && (
{data.memberLeagues.length > 0 && (
<span className="text-xs text-gray-400">
{memberLeagues.length} {memberLeagues.length === 1 ? 'league' : 'leagues'}
{data.memberLeagues.length} {data.memberLeagues.length === 1 ? 'league' : 'leagues'}
</span>
)}
</div>
{memberLeagues.length === 0 ? (
{data.memberLeagues.length === 0 ? (
<p className="text-sm text-gray-400">
You're not a member of any other leagues yet.
</p>
) : (
<div className="space-y-3">
{memberLeagues.map(({ league, membership }) => (
{data.memberLeagues.map(({ league, membership }) => (
<div
key={league.id}
className="flex items-center justify-between p-4 rounded-lg bg-deep-graphite border border-charcoal-outline"
@@ -184,17 +168,38 @@ export default function ManageLeaguesPage() {
{membership.role.charAt(0).toUpperCase() + membership.role.slice(1)}
</p>
</div>
<Link
<a
href={`/leagues/${league.id}`}
className="text-sm text-gray-300 hover:text-white underline-offset-2 hover:underline"
>
View league
</Link>
</a>
</div>
))}
</div>
)}
</Card>
</div>
</div>
);
}
export default async function ProfileLeaguesPage() {
const data = await fetchProfileLeaguesData();
if (!data) {
notFound();
}
return (
<PageWrapper
data={data}
Template={ProfileLeaguesTemplate}
loading={{ variant: 'skeleton', message: 'Loading your leagues...' }}
errorConfig={{ variant: 'full-screen' }}
empty={{
title: 'No leagues found',
description: 'You are not a member of any leagues yet.',
}}
/>
);
}