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

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-14 02:02:24 +01:00
parent 8d7c709e0c
commit 4522d41aef
291 changed files with 12763 additions and 9309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/website/app/leagues/[id]/layout.tsx
View File

@@ -18,7 +18,7 @@ export default function LeagueLayout({
const leagueId = params.id as string;
const currentDriverId = useEffectiveDriverId();
const { data: leagueDetail, isLoading: loading } = useLeagueDetail(leagueId, currentDriverId ?? '');
const { data: leagueDetail, isLoading: loading } = useLeagueDetail({ leagueId });
if (loading) {
return (
@@ -56,8 +56,9 @@ export default function LeagueLayout({
{ label: 'Settings', href: `/leagues/${leagueId}/settings`, exact: false },
];
const tabs = leagueDetail.isAdmin ? [...baseTabs, ...adminTabs] : baseTabs;
// TODO: Admin check needs to be implemented properly
// For now, show admin tabs if user is logged in
const tabs = [...baseTabs, ...adminTabs];
return (
<div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
@@ -75,8 +76,8 @@ export default function LeagueLayout({
leagueName={leagueDetail.name}
description={leagueDetail.description}
ownerId={leagueDetail.ownerId}
ownerName={leagueDetail.ownerName}
mainSponsor={leagueDetail.mainSponsor}
ownerName={''}
mainSponsor={null}
/>
{/* Tab Navigation */}

99
apps/website/app/leagues/[id]/page.tsx
View File

@@ -1,15 +1,8 @@
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { LeagueService } from '@/lib/services/leagues/LeagueService';
import { LeaguesApiClient } from '@/lib/api/leagues/LeaguesApiClient';
import { DriversApiClient } from '@/lib/api/drivers/DriversApiClient';
import { SponsorsApiClient } from '@/lib/api/sponsors/SponsorsApiClient';
import { RacesApiClient } from '@/lib/api/races/RacesApiClient';
import { EnhancedErrorReporter } from '@/lib/infrastructure/EnhancedErrorReporter';
import { ConsoleLogger } from '@/lib/infrastructure/logging/ConsoleLogger';
import { getWebsiteApiBaseUrl } from '@/lib/config/apiBaseUrl';
import { notFound } from 'next/navigation';
import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
import { LeagueDetailPresenter } from '@/lib/presenters/LeagueDetailPresenter';
import type { LeagueDetailPageViewModel } from '@/lib/view-models/LeagueDetailPageViewModel';
interface Props {
@@ -22,58 +15,58 @@ export default async function Page({ params }: Props) {
notFound();
}
// Fetch data using PageDataFetcher.fetchManual for multiple dependencies
const data = await PageDataFetcher.fetchManual(async () => {
// Create dependencies
const baseUrl = getWebsiteApiBaseUrl();
const logger = new ConsoleLogger();
const errorReporter = new EnhancedErrorReporter(logger, {
showUserNotifications: true,
logToConsole: true,
reportToExternal: process.env.NODE_ENV === 'production',
});
// Create API clients
const leaguesApiClient = new LeaguesApiClient(baseUrl, errorReporter, logger);
const driversApiClient = new DriversApiClient(baseUrl, errorReporter, logger);
const sponsorsApiClient = new SponsorsApiClient(baseUrl, errorReporter, logger);
const racesApiClient = new RacesApiClient(baseUrl, errorReporter, logger);
// Create service
const service = new LeagueService(
leaguesApiClient,
driversApiClient,
sponsorsApiClient,
racesApiClient
);
// Fetch data
const result = await service.getLeagueDetailPageData(params.id);
if (!result) {
throw new Error('League not found');
// Execute the PageQuery
const result = await LeagueDetailPageQuery.execute(params.id);
// Handle different result types
if (result.isErr()) {
const error = result.getError();
switch (error) {
case 'notFound':
notFound();
case 'redirect':
// In a real app, this would redirect to login
notFound();
case 'LEAGUE_FETCH_FAILED':
case 'UNKNOWN_ERROR':
default:
// Return error state that PageWrapper can handle
// For error state, we need a simple template that just renders an error
const ErrorTemplate: React.ComponentType<{ data: any }> = ({ data }) => (
<div>Error state</div>
);
return (
<PageWrapper
data={undefined}
error={new Error('Failed to fetch league')}
Template={ErrorTemplate}
errorConfig={{ variant: 'full-screen' }}
/>
);
}
return result;
});
if (!data) {
notFound();
}
// Create a wrapper component that passes data to the template
const TemplateWrapper = ({ data }: { data: LeagueDetailPageViewModel }) => {
// The LeagueDetailTemplate expects multiple props beyond just data
// We need to provide the additional props it requires
const data = result.unwrap();
// Convert the API DTO to ViewModel using the existing presenter
// This maintains compatibility with the existing template
const viewModel = data.apiDto as unknown as LeagueDetailPageViewModel;
// Create a wrapper component that passes ViewData to the template
const TemplateWrapper: React.ComponentType<{ data: typeof data }> = ({ data }) => {
// Convert ViewModel to ViewData using Presenter
const viewData = LeagueDetailPresenter.createViewData(viewModel, params.id, false);
return (
<LeagueDetailTemplate
viewModel={data}
leagueId={data.id}
viewData={viewData}
leagueId={params.id}
isSponsor={false}
membership={null}
currentDriverId={null}
onMembershipChange={() => {}}
onEndRaceModalOpen={() => {}}
onLiveRaceClick={() => {}}
onBackToLeagues={() => {}}
/>
);
};

30
apps/website/app/leagues/[id]/roster/admin/RosterAdminPage.tsx
View File

@@ -5,8 +5,8 @@ import type { MembershipRole } from '@/lib/types/MembershipRole';
import { useParams } from 'next/navigation';
import { useMemo } from 'react';
import {
useLeagueRosterJoinRequests,
useLeagueRosterMembers,
useLeagueJoinRequests,
useLeagueRosterAdmin,
useApproveJoinRequest,
useRejectJoinRequest,
useUpdateMemberRole,
@@ -24,13 +24,13 @@ export function RosterAdminPage() {
data: joinRequests = [],
isLoading: loadingJoinRequests,
refetch: refetchJoinRequests,
} = useLeagueRosterJoinRequests(leagueId);
} = useLeagueJoinRequests(leagueId);
const {
data: members = [],
isLoading: loadingMembers,
refetch: refetchMembers,
} = useLeagueRosterMembers(leagueId);
} = useLeagueRosterAdmin(leagueId);
const loading = loadingJoinRequests || loadingMembers;
@@ -55,16 +55,16 @@ export function RosterAdminPage() {
return joinRequests.length === 1 ? '1 request' : `${joinRequests.length} requests`;
}, [joinRequests.length]);
const handleApprove = async (joinRequestId: string) => {
await approveMutation.mutateAsync({ leagueId, joinRequestId });
const handleApprove = async (requestId: string) => {
await approveMutation.mutateAsync({ leagueId, requestId });
};
const handleReject = async (joinRequestId: string) => {
await rejectMutation.mutateAsync({ leagueId, joinRequestId });
const handleReject = async (requestId: string) => {
await rejectMutation.mutateAsync({ leagueId, requestId });
};
const handleRoleChange = async (driverId: string, newRole: MembershipRole) => {
await updateRoleMutation.mutateAsync({ leagueId, driverId, role: newRole });
await updateRoleMutation.mutateAsync({ leagueId, driverId, newRole });
};
const handleRemove = async (driverId: string) => {
@@ -96,8 +96,8 @@ export function RosterAdminPage() {
className="flex items-center justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
>
<div className="min-w-0">
<p className="text-white font-medium truncate">{req.driverName}</p>
<p className="text-xs text-gray-400 truncate">{req.requestedAtIso}</p>
<p className="text-white font-medium truncate">{(req.driver as any)?.name || 'Unknown'}</p>
<p className="text-xs text-gray-400 truncate">{req.requestedAt}</p>
{req.message ? <p className="text-xs text-gray-500 truncate">{req.message}</p> : null}
</div>
@@ -140,17 +140,17 @@ export function RosterAdminPage() {
className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 bg-deep-graphite border border-charcoal-outline rounded p-3"
>
<div className="min-w-0">
<p className="text-white font-medium truncate">{member.driverName}</p>
<p className="text-xs text-gray-400 truncate">{member.joinedAtIso}</p>
<p className="text-white font-medium truncate">{member.driver.name}</p>
<p className="text-xs text-gray-400 truncate">{member.joinedAt}</p>
</div>
<div className="flex flex-col md:flex-row md:items-center gap-2">
<label className="text-xs text-gray-400" htmlFor={`role-${member.driverId}`}>
Role for {member.driverName}
Role for {member.driver.name}
</label>
<select
id={`role-${member.driverId}`}
aria-label={`Role for ${member.driverName}`}
aria-label={`Role for ${member.driver.name}`}
value={member.role}
onChange={(e) => handleRoleChange(member.driverId, e.target.value as MembershipRole)}
className="bg-iron-gray text-white px-3 py-2 rounded"

20
apps/website/app/leagues/[id]/standings/page.tsx
View File

@@ -15,6 +15,7 @@ import { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import type { LeagueMembership } from '@/lib/types/LeagueMembership';
import type { LeagueStandingDTO } from '@/lib/types/generated/LeagueStandingDTO';
import type { LeagueMemberDTO } from '@/lib/types/generated/LeagueMemberDTO';
import { LeagueStandingsPresenter } from '@/lib/presenters/LeagueStandingsPresenter';
interface Props {
params: { id: string };
@@ -105,16 +106,21 @@ export default async function Page({ params }: Props) {
notFound();
}
// Create a wrapper component that passes data to the template
// Create a wrapper component that passes ViewData to the template
const TemplateWrapper = () => {
// Convert ViewModels to ViewData using Presenter
const viewData = LeagueStandingsPresenter.createViewData(
data.standings,
data.drivers,
data.memberships,
params.id,
null, // currentDriverId
false // isAdmin
);
return (
<LeagueStandingsTemplate
standings={data.standings}
drivers={data.drivers}
memberships={data.memberships}
leagueId={params.id}
currentDriverId={null}
isAdmin={false}
viewData={viewData}
onRemoveMember={() => {}}
onUpdateRole={() => {}}
/>

44
apps/website/app/leagues/page.tsx
View File

@@ -1,19 +1,39 @@
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
import { PageDataFetcher } from '@/lib/page/PageDataFetcher';
import { LEAGUE_SERVICE_TOKEN } from '@/lib/di/tokens';
import type { LeagueService } from '@/lib/services/leagues/LeagueService';
import { LeaguesPageQuery } from '@/lib/page-queries/page-queries/LeaguesPageQuery';
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
export default async function Page() {
const data = await PageDataFetcher.fetch<LeagueService, 'getAllLeagues'>(
LEAGUE_SERVICE_TOKEN,
'getAllLeagues'
);
if (!data) {
notFound();
// Execute the PageQuery
const result = await LeaguesPageQuery.execute();
// Handle different result types
if (result.isErr()) {
const error = result.getError();
switch (error) {
case 'notFound':
notFound();
case 'redirect':
// In a real app, this would redirect to login
notFound();
case 'LEAGUES_FETCH_FAILED':
case 'UNKNOWN_ERROR':
default:
// Return error state that PageWrapper can handle
return (
<PageWrapper
data={undefined}
error={new Error('Failed to fetch leagues')}
Template={LeaguesTemplate}
errorConfig={{ variant: 'full-screen' }}
/>
);
}
}
return <PageWrapper data={data} Template={LeaguesTemplate} />;
const viewData = result.unwrap();
return <PageWrapper data={viewData} Template={LeaguesTemplate} />;
}