FJurmanovic/grid-gladiators-results
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extract client logic to separate ClientPage component

Browse Source 
- Create ClientPage.tsx with 'use client' and all stateful logic
- Simplify page.tsx to just import and render ClientPage
- Allows easy switching between client/server rendering strategies
- Maintains same functionality with cleaner separation of concerns
This commit is contained in:
Fran Jurmanović
2026-03-01 14:26:15 +01:00
parent 6c9a5ea7a6
commit a096075d8c
2 changed files with 87 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/app/ClientPage.tsx Normal file
View File

@@ -0,0 +1,84 @@
'use client';
import { useState, useEffect, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { AppData } from '@/lib/types';
import { defaultAppData } from '@/lib/defaultData';
import { calculateStandingsData } from '@/lib/leaderboard';
import RaceResultsTable from './components/RaceResultsTable';
import DriverStandings from './components/DriverStandings';
import PointsKey from './components/PointsKey';
const CumulativeChart = dynamic(() => import('./components/CumulativeChart'), { ssr: false });
const API_BASE = process.env.NEXT_PUBLIC_API_BASE || '';
const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';
async function fetchLeaderboard(): Promise<AppData | null> {
try {
const res = await fetch(`${API_BASE}/server/${SERVER_ID}/leaderboard`, {
headers: {
"Access-Key": ACCESS_TOKEN
}
});
if (!res.ok) return null;
const data = await res.json();
// Treat empty leaderboard (no drivers) as null to fall back to defaults
if (!data || !data.drivers || data.drivers.length === 0) return null;
return data;
} catch (e) {
console.error("Failed to load leaderboard from API:", e);
return null;
}
}
export default function ClientPage() {
const [appData, setAppData] = useState<AppData>(defaultAppData);
useEffect(() => {
const loadData = async () => {
const savedData = await fetchLeaderboard();
if (savedData) {
setAppData(savedData);
}
};
loadData();
}, []);
const standingsData = useMemo(() => calculateStandingsData(appData), [appData]);
return (
<div className="container mx-auto max-w-7xl space-y-12">
<header className="text-center">
<h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 mb-4">
Grid Gladiators League Leaderboard
</h1>
</header>
<main className="space-y-12">
<section>
<h2 className="text-2xl font-bold text-white mb-4">Race Results</h2>
<RaceResultsTable appData={appData} />
</section>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<section className="lg:col-span-2">
<h2 className="text-2xl font-bold text-white mb-4">Driver Standings</h2>
<DriverStandings standingsData={standingsData} />
</section>
<section className="lg:col-span-1">
<h2 className="text-2xl font-bold text-white mb-4">Points Table:</h2>
<PointsKey pointsTable={appData.pointsTable} flPoints={appData.flPoints} />
</section>
</div>
</main>
<section>
<h2 className="text-2xl font-bold text-white mb-6 text-center">Cumulative Points per Race</h2>
<CumulativeChart standingsData={standingsData} tracks={appData.tracks} />
</section>
</div>
);
}

85
src/app/page.tsx
View File

@@ -1,84 +1,5 @@
'use client';
import ClientPage from './ClientPage';
import { useState, useEffect, useMemo } from 'react';
import dynamic from 'next/dynamic';
import { AppData } from '@/lib/types';
import { defaultAppData } from '@/lib/defaultData';
import { calculateStandingsData } from '@/lib/leaderboard';
import RaceResultsTable from './components/RaceResultsTable';
import DriverStandings from './components/DriverStandings';
import PointsKey from './components/PointsKey';
const CumulativeChart = dynamic(() => import('./components/CumulativeChart'), { ssr: false });
const API_BASE = process.env.NEXT_PUBLIC_API_BASE || '';
const SERVER_ID = process.env.NEXT_PUBLIC_SERVER_ID || '';
const ACCESS_TOKEN = process.env.NEXT_PUBLIC_ACCESS_TOKEN || '';
async function fetchLeaderboard(): Promise<AppData | null> {
try {
const res = await fetch(`${API_BASE}/server/${SERVER_ID}/leaderboard`, {
headers: {
"Access-Key": ACCESS_TOKEN
}
});
if (!res.ok) return null;
const data = await res.json();
// Treat empty leaderboard (no drivers) as null to fall back to defaults
if (!data || !data.drivers || data.drivers.length === 0) return null;
return data;
} catch (e) {
console.error("Failed to load leaderboard from API:", e);
return null;
}
}
export default function Home() {
const [appData, setAppData] = useState<AppData>(defaultAppData);
useEffect(() => {
const loadData = async () => {
const savedData = await fetchLeaderboard();
if (savedData) {
setAppData(savedData);
}
};
loadData();
}, []);
const standingsData = useMemo(() => calculateStandingsData(appData), [appData]);
return (
<div className="container mx-auto max-w-7xl space-y-12">
<header className="text-center">
<h1 className="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 mb-4">
Grid Gladiators League Leaderboard
</h1>
</header>
<main className="space-y-12">
<section>
<h2 className="text-2xl font-bold text-white mb-4">Race Results</h2>
<RaceResultsTable appData={appData} />
</section>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
<section className="lg:col-span-2">
<h2 className="text-2xl font-bold text-white mb-4">Driver Standings</h2>
<DriverStandings standingsData={standingsData} />
</section>
<section className="lg:col-span-1">
<h2 className="text-2xl font-bold text-white mb-4">Points Table:</h2>
<PointsKey pointsTable={appData.pointsTable} flPoints={appData.flPoints} />
</section>
</div>
</main>
<section>
<h2 className="text-2xl font-bold text-white mb-6 text-center">Cumulative Points per Race</h2>
<CumulativeChart standingsData={standingsData} tracks={appData.tracks} />
</section>
</div>
);
export default function Page() {
return <ClientPage />;
}