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

react-query

Browse Source
This commit is contained in:
Marc Mintel
2025-12-21 01:45:17 +01:00
parent 22f28728ce
commit 13d8563feb
13 changed files with 324 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
apps/website/app/races/[id]/page.tsx
View File

@@ -8,7 +8,8 @@ import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import Heading from '@/components/ui/Heading';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useServices } from '@/lib/services/ServiceProvider';
import { useRaceDetail, useRegisterForRace, useWithdrawFromRace, useCancelRace, useCompleteRace, useReopenRace } from '@/hooks/useRaceService';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { LeagueMembershipUtility } from '@/lib/utilities/LeagueMembershipUtility';
import type { RaceDetailViewModel } from '@/lib/view-models/RaceDetailViewModel';
import {
@@ -37,54 +38,29 @@ export default function RaceDetailPage() {
const router = useRouter();
const params = useParams();
const raceId = params.id as string;
const { raceService, leagueMembershipService } = useServices();
const currentDriverId = useEffectiveDriverId();
const isSponsorMode = useSponsorMode();
const { data: viewModel, isLoading: loading, error } = useRaceDetail(raceId, currentDriverId);
const { data: membership } = useLeagueMembership(viewModel?.league?.id || '', currentDriverId);
const [viewModel, setViewModel] = useState<RaceDetailViewModel | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [cancelling, setCancelling] = useState(false);
const [registering, setRegistering] = useState(false);
const [reopening, setReopening] = useState(false);
const [ratingChange, setRatingChange] = useState<number | null>(null);
const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
const [showProtestModal, setShowProtestModal] = useState(false);
const [showEndRaceModal, setShowEndRaceModal] = useState(false);
const [membership, setMembership] = useState<any>(null);
const currentDriverId = useEffectiveDriverId();
const isSponsorMode = useSponsorMode();
const loadRaceData = async () => {
setLoading(true);
setError(null);
try {
const vm = await raceService.getRaceDetail(raceId, currentDriverId);
setViewModel(vm);
// Fetch league membership for admin controls
if (vm.league) {
await leagueMembershipService.fetchLeagueMemberships(vm.league.id);
const leagueMembership = leagueMembershipService.getMembership(vm.league.id, currentDriverId);
setMembership(leagueMembership);
}
const userResultRatingChange = vm.userResult?.ratingChange ?? null;
setRatingChange(userResultRatingChange);
if (userResultRatingChange === null) {
setAnimatedRatingChange(0);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load race');
setViewModel(null);
} finally {
setLoading(false);
}
};
const registerMutation = useRegisterForRace();
const withdrawMutation = useWithdrawFromRace();
const cancelMutation = useCancelRace();
const completeMutation = useCompleteRace();
const reopenMutation = useReopenRace();
// Set rating change when viewModel changes
useEffect(() => {
loadRaceData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [raceId]);
if (viewModel?.userResult?.ratingChange !== undefined) {
setRatingChange(viewModel.userResult.ratingChange);
}
}, [viewModel?.userResult?.ratingChange]);
// Animate rating change when it changes
useEffect(() => {

51
apps/website/app/races/[id]/results/page.tsx
View File

@@ -7,7 +7,8 @@ import ResultsTable from '@/components/races/ResultsTable';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useServices } from '@/lib/services/ServiceProvider';
import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import type { RaceResultsDetailViewModel } from '@/lib/view-models';
import { ArrowLeft, Calendar, Trophy, Users, Zap } from 'lucide-react';
@@ -19,54 +20,18 @@ export default function RaceResultsPage() {
const params = useParams();
const raceId = params.id as string;
const currentDriverId = useEffectiveDriverId();
const { raceResultsService, leagueMembershipService } = useServices();
const [raceData, setRaceData] = useState<RaceResultsDetailViewModel | null>(null);
const [raceSOF, setRaceSOF] = useState<number | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const { data: raceData, isLoading: loading, error } = useRaceResultsDetail(raceId, currentDriverId);
const { data: sofData } = useRaceWithSOF(raceId);
const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
const [importing, setImporting] = useState(false);
const [importSuccess, setImportSuccess] = useState(false);
const [isAdmin, setIsAdmin] = useState(false);
const [showQuickPenaltyModal, setShowQuickPenaltyModal] = useState(false);
const [preSelectedDriver, setPreSelectedDriver] = useState<{ id: string; name: string } | undefined>(undefined);
const loadData = async () => {
try {
const raceData = await raceResultsService.getResultsDetail(raceId, currentDriverId);
setRaceData(raceData);
setError(null);
try {
const sofData = await raceResultsService.getWithSOF(raceId);
setRaceSOF(sofData.strengthOfField);
} catch (sofErr) {
console.error('Failed to load SOF:', sofErr);
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to load race data');
setRaceData(null);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadData();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [raceId]);
useEffect(() => {
const leagueId = raceData?.league?.id;
if (leagueId && currentDriverId) {
const checkAdmin = async () => {
await leagueMembershipService.fetchLeagueMemberships(leagueId);
const membership = leagueMembershipService.getMembership(leagueId, currentDriverId);
setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
};
checkAdmin();
}
}, [raceData?.league?.id, currentDriverId, leagueMembershipService]);
const raceSOF = sofData?.strengthOfField || null;
const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
const handleImportSuccess = async (importedResults: any[]) => {
setImporting(true);

40
apps/website/app/races/[id]/stewarding/page.tsx
View File

@@ -4,8 +4,8 @@ import Breadcrumbs from '@/components/layout/Breadcrumbs';
import Button from '@/components/ui/Button';
import Card from '@/components/ui/Card';
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
import { useServices } from '@/lib/services/ServiceProvider';
import { RaceStewardingViewModel } from '@/lib/view-models/RaceStewardingViewModel';
import { useRaceStewardingData } from '@/hooks/useRaceStewardingService';
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
import {
AlertCircle,
@@ -20,42 +20,20 @@ import {
} from 'lucide-react';
import Link from 'next/link';
import { useParams, useRouter } from 'next/navigation';
import { useEffect, useState } from 'react';
import { useState } from 'react';
export default function RaceStewardingPage() {
const params = useParams();
const router = useRouter();
const { raceStewardingService, leagueMembershipService } = useServices();
const raceId = params.id as string;
const currentDriverId = useEffectiveDriverId();
const [stewardingData, setStewardingData] = useState<RaceStewardingViewModel | null>(null);
const [loading, setLoading] = useState(true);
const [isAdmin, setIsAdmin] = useState(false);
const { data: stewardingData, isLoading: loading } = useRaceStewardingData(raceId, currentDriverId);
const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
const [activeTab, setActiveTab] = useState<'pending' | 'resolved' | 'penalties'>('pending');
useEffect(() => {
async function loadData() {
setLoading(true);
try {
const data = await raceStewardingService.getRaceStewardingData(raceId, currentDriverId);
setStewardingData(data);
if (data.league?.id) {
const membership = await leagueMembershipService.getMembership(data.league.id, currentDriverId);
setIsAdmin(membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false);
} else {
setIsAdmin(false);
}
} catch (err) {
console.error('Failed to load data:', err);
} finally {
setLoading(false);
}
}
loadData();
}, [raceId, currentDriverId, raceStewardingService, leagueMembershipService]);
const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
const pendingProtests = stewardingData?.pendingProtests ?? [];
const resolvedProtests = stewardingData?.resolvedProtests ?? [];
@@ -153,7 +131,7 @@ export default function RaceStewardingPage() {
<Breadcrumbs items={breadcrumbItems} className="text-sm text-gray-400" />
<Button
variant="secondary"
onClick={() => router.push(`/races/${race.id}`)}
onClick={() => router.push(`/races/${raceId}`)}
className="flex items-center gap-2 text-sm"
>
<ArrowLeft className="w-4 h-4" />
@@ -393,7 +371,7 @@ export default function RaceStewardingPage() {
{activeTab === 'penalties' && (
<div className="space-y-4">
{penalties.length === 0 ? (
{stewardingData?.penalties.length === 0 ? (
<Card className="text-center py-12">
<div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gray-500/10 flex items-center justify-center">
<Gavel className="w-8 h-8 text-gray-500" />

25
apps/website/app/races/all/page.tsx
View File

@@ -1,14 +1,13 @@
'use client';
import { useState, useEffect, useMemo } from 'react';
import { useState, useMemo, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import Breadcrumbs from '@/components/layout/Breadcrumbs';
import { useServices } from '@/lib/services/ServiceProvider';
import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
import { useAllRacesPageData } from '@/hooks/useRaceService';
import {
Calendar,
Clock,
@@ -34,10 +33,7 @@ type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'all';
export default function AllRacesPage() {
const router = useRouter();
const searchParams = useSearchParams();
const { raceService } = useServices();
const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
const [loading, setLoading] = useState(true);
const { data: pageData, isLoading: loading } = useAllRacesPageData();
// Pagination
const [currentPage, setCurrentPage] = useState(1);
@@ -48,21 +44,6 @@ export default function AllRacesPage() {
const [searchQuery, setSearchQuery] = useState('');
const [showFilters, setShowFilters] = useState(false);
const loadRaces = async () => {
try {
const viewModel = await raceService.getAllRacesPageData();
setPageData(viewModel);
} catch (err) {
console.error('Failed to load races:', err);
} finally {
setLoading(false);
}
};
useEffect(() => {
void loadRaces();
}, []);
const races = pageData?.races ?? [];
const filteredRaces = useMemo(() => {

25
apps/website/app/races/page.tsx
View File

@@ -1,13 +1,12 @@
'use client';
import { useState, useEffect, useMemo } from 'react';
import { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import Card from '@/components/ui/Card';
import Button from '@/components/ui/Button';
import Heading from '@/components/ui/Heading';
import { useServices } from '@/lib/services/ServiceProvider';
import { RacesPageViewModel } from '@/lib/view-models/RacesPageViewModel';
import { useRacesPageData } from '@/hooks/useRaceService';
import {
Calendar,
Clock,
@@ -31,31 +30,13 @@ type RaceStatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' | 'a
export default function RacesPage() {
const router = useRouter();
const { raceService } = useServices();
const [pageData, setPageData] = useState<RacesPageViewModel | null>(null);
const [loading, setLoading] = useState(true);
const { data: pageData, isLoading: loading } = useRacesPageData();
// Filters
const [statusFilter, setStatusFilter] = useState<RaceStatusFilter | 'all'>('all');
const [leagueFilter, setLeagueFilter] = useState<string>('all');
const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
const loadRaces = async () => {
try {
const data = await raceService.getRacesPageData();
setPageData(data);
} catch (err) {
console.error('Failed to load races:', err);
} finally {
setLoading(false);
}
};
useEffect(() => {
loadRaces();
}, []);
// Filter races
const filteredRaces = useMemo(() => {
if (!pageData) return [];